javascript_javascript 기술에서 이를 사용하는 네 가지 방법

이것

함수가 실행되면 항상 함수를 호출한 객체를 가리킵니다. 이 지점이 어디인지 확인하려면 실제로 이 기능이 누구에게 속하는지 확인해야 합니다.

'JavaScript 언어의 본질'이라는 책에서는 이것이 나타나는 시나리오를 간단히 말하면 다음과 같이 4가지로 분류합니다.

객체가 있으면 호출하는 객체를 가리킵니다
객체를 호출하지 않고 전역 객체를 가리킵니다
new로 구성되어 새로운 객체를 가리킵니다
적용, 호출 또는 바인드를 통해 이에 대한 참조를 변경하십시오.

1) 함수에 자신이 속한 개체가 있는 경우: 해당 함수가 속한 개체를 가리킵니다.

함수에 자신이 속한 개체가 있는 경우 일반적으로 . 표현식을 통해 호출되며, 이 경우 자연스럽게 함수가 속한 개체를 가리킵니다. 예를 들면 다음과 같습니다.

var myObject = {value: 100};
myObject.getValue = function () {
 console.log(this.value); // 输出 100

 // 输出 { value: 100, getValue: [Function] }，
 // 其实就是 myObject 对象本身
 console.log(this);

 return this.value;
};

console.log(myObject.getValue()); // => 100

getValue()는 myObject 객체에 속하고 myOjbect에 의해 호출되므로 myObject 객체를 가리킵니다.

2) 이 함수에는 소유 개체가 없습니다. 전역 개체를 가리킵니다.

var myObject = {value: 100};
myObject.getValue = function () {
 var foo = function () {
  console.log(this.value) // => undefined
  console.log(this);// 输出全局对象 global
 };

 foo();

 return this.value;
};

console.log(myObject.getValue()); // => 100

위 코드 블록에서 foo 함수는 getValue의 함수 본문에 정의되어 있지만 실제로는 getValue나 myObject에 속하지 않습니다. foo는 어떤 객체에도 바인딩되어 있지 않으므로 호출 시 this 포인터가 전역 객체를 가리킵니다.

설계 오류라고 합니다.

3) 생성자의 이 항목: 새 개체를 가리킵니다.

js에서는 new 키워드를 통해 생성자를 호출하고 이것이 새 객체에 바인딩됩니다.

var SomeClass = function(){
 this.value = 100;
}

var myCreate = new SomeClass();

console.log(myCreate.value); // 输出100

그런데 js에서는 생성자, 일반 함수, 객체 메서드, 클로저 사이에 명확한 경계가 없습니다. 경계는 모두 인간의 마음 속에 있습니다.

4) 호출 적용 및 호출 및 바인딩 바인딩: 바인딩된 개체를 가리킵니다

apply() 메서드는 두 개의 매개변수를 받습니다. 첫 번째는 함수가 실행되는 범위이고 다른 하나는 매개변수 배열(인수)입니다.

call() 메소드의 첫 번째 매개변수의 의미는 다른 매개변수를 하나씩 나열해야 한다는 점을 제외하면 apply() 메소드의 의미와 동일합니다.

간단히 말하면 호출 방법은 우리가 일반적으로 함수를 호출하는 방법에 더 가까운 반면, 적용하려면 배열 형식으로 배열을 전달해야 합니다. 그들은 상호 교환 가능합니다.

var myObject = {value: 100};

var foo = function(){
 console.log(this);
};

foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }

var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

이 글의 내용은 여기까지입니다. 모두 마음에 드셨으면 좋겠습니다.