홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

JS의 이러한 포인팅 문제를 이해할 수 있습니까? 이 기사를보세요

저자：Eve Cole 업데이트 시간：2022-09-03 09:02:53
JavaScript의 이러한 포인팅 문제를 이해할 수 있습니까? 다음 기사에서는 이 귀찮은 포인팅 문제에 대해 설명하겠습니다. 도움이 되기를 바랍니다.

VUE3.0을 빠르게 시작하는 방법:

this의 포인팅 방법을 알아보십시오.

this의 포인팅 방법을 결정하는 방법에 대한 다양한 소개에서 "이것은 궁극적으로 그것을 호출하는 객체를 가리킵니다"라는 문장은 다음과 같이 간주됩니다. 핵심이지만, 우리는 다양한 상황에 대해 혼란스러워하는 경향이 있습니다. 다양한 상황에 대한 나의 이해를 바탕으로 "화살표와 타이밍과 구조, 특별한 상황을 보고, 보통 콜은 포인트 번호를 보고, 나중 포인트는 앞을 보지 말고 판단하라"는 문장을 내놓았다. 가장 가까운 원리를 바탕으로 하고, 마지막 남은 것은 창문이다." .

화살표 함수

화살표 함수 자체에는 이것이 없으므로 이 변경 사항이 없습니다.

var name = "windowsName";을
사용하여 외부 this를 캡처합니다.
var a = {
    이름: "체리",
    fn() {
      setTimeout(()=>{
        console.log(this.name); 
      },0)
    }
}

a.fn() //Cherry

분석: 먼저 객체 a가 fn 함수를 호출하므로 fn 함수의 this가 객체 a를 가리키고 화살표가 외부 this를 캡처한 다음 setTimeout에서는 this가 아니지만 this of fn 함수는 결국 객체 a에서 이름을 얻습니다.

지연 함수 내부의 콜백 함수의 타이머는 전역 객체 창을 가리킵니다.

var

name = "windowsName";
var a = {
    이름: "체리",
    fn() {
      setTimeout(함수 (){
        console.log(this.name); 
      },0)
    }
}

a.fn() //windowsName

분석: 먼저 객체 a가 fn 함수를 호출한 다음 여기서 setTimeout의 콜백 함수는 익명 함수이며 이는 일반 함수입니다. 그런 다음 익명 함수의 이 함수는 window

var name =
을 가리킵니다. 
"창이름";
변수 b={
  이름: "setTimeoutName"
}
var a = {
    이름: "체리",
    fn() {
      setTimeout((함수 (){
        console.log(this.name); 
      }).바인드(b),0)
    }
}

a.fn() //setTimeoutName

분석: 먼저 객체 a가 fn 함수를 호출한 다음 여기서 setTimeout의 콜백 함수는 익명 함수입니다. 이는 일반 함수이지만 익명 함수의 이 함수는 창을 가리킵니다. 익명 함수를 변경하려면 바인딩을 사용하십시오. this는 객체 b를 가리키므로 객체 b의 이름

생성자는

최종적으로 생성자에서 생성된 인스턴스 객체를 가리킵니다.

참고: 객체가 생성자에서 반환되면 새 인스턴스가 없습니다. 객체가 생성될 때 객체가 생성되지만 이 객체는

fn(){ 함수
에 의해 반환됩니다.
  this.나이 = 37;
}

var a = 새로운 fn();
console.log(a.age); // 37
a.나이 = 38;
console.log(fn); // { this.age = 37 }
console.log(a.age); // 38

분석: 여기서는 생성자를 통해 인스턴스 객체를 생성합니다. 이는 새 장소를 열고 생성자의 내용을 복사하는 것과 같습니다. 이때 이것은 객체 a를 가리키며, 객체 a의 내용을 수정해도 생성자 도트

수 판단

의 전달에는 영향을 미치지 않습니다

. 이 점을 판단하고 근접성 원칙을 따르세요

.
  나이:10,
  ㄴ: {
      나이:12,
      fn(){
          console.log(this.age); 
      }
  }
}
abfn(); //12

분석: 객체 a는 객체 b의 fn 함수를 호출합니다 . 그러면 가장 가까운 것은 객체 b이므로 이 fn 함수는 객체 b를 가리킵니다. 마지막으로 얻은 것은 객체 b의 나이

var a = {
입니다.
  나이:10,
  ㄴ: {
      나이:12,
      fn(){
          console.log(this.age); //정의되지 않음
      }
  }
}
var c = {
  나이:20,
}

var d = {
  나이:30,
}
abfn.bind(c).bind(d)(); //20

분석: 객체 a는 객체 b의 fn 함수를 . 한 다음, 이 때 fn은 이 방향을 변경합니다. 이전 . 에 관계없이 뒷면을 보면 최신 바인드가 이 지점을 c로 변경하고, fn 함수의 이 지점은 객체 c이고, 얻을 수

있는

것은
객체 c
   console.log(this) // { x: 1 }
   함수 함수() {
    console.log(this) // 창 
   }
   재미있는()
} 

externalFunc.bind({ x: 1 })()
obj = {
  기능() {
    const arrowFunc = () => {
      console.log(this._name)
    }

    return arrowFunc
  },

  _name: "obj",
}

obj.func()() //obj

func = obj.func
func()() //정의되지 않음

obj.func.bind({ _name: "newObj" })()() //newObj

obj.func.bind()()() //정의되지 않음

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj
적용, 호출,

바인딩 기능을 사용하여 방향을 변경합니다

.

this. 위의

thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)

의 차이점은

적용 함수와 호출 함수의 차이점은 this 뒤에 전달되는 매개변수에 있습니다. Apply에서는 배열이고 call에서 전달되는 것은 확장된 매개변수인

bind(thisArg[, arg1[, arg2[, ...]]])()

  • 이며 바인드 함수는
  • 이
    • 새로운 함수를 생성합니다.
  • 이것은 수동으로 호출됩니다. this 첫 번째 매개 bind() 로 지정되며 나머지 매개변수는 호출 시 사용할 새 함수의 매개변수로 사용됩니다

. ! 읽어주신 모든 분들께 감사드립니다!

참고자료

https://juejin.cn/post/6946021671656488991#comment

[관련 영상 튜토리얼 추천 : 웹 프론트엔드]

위와 같이 JS의 포인팅 문제를 어떻게 이해할 수 있을까요? 자세한 내용은 PHP 중국어 홈페이지의 다른 관련 글을 참고해주세요!

관련 기사