이에 대한 자세한 설명은 JavaScript의 기본

JavaScript에 있는 함수 의 this 객체 는 함수가 실행되는 범위입니다(예: 웹 페이지의 전역 범위에서 함수가 호출될 때 이 참조하는 this 객체 는 창).

JavaScript의 이 기능은 Java와 같은 객체 지향 언어의 기능과 매우 다릅니다. 바인딩(), call() 및 Apply() 함수는 이 기능의 유연성을 더욱 확장합니다. 이 기사는 가독성을 보장하기 위해 직역이 아닌 무료 번역을 사용합니다. 또한, 이 글의 저작권은 원저자에게 있으며, 번역은 학습용으로만 사용됩니다.

자바스크립트 키워드를 이렇게 깊이 이해하지 못하면 때로는 예상치 못한 함정에 빠질 수도 있습니다. 여기서는 이것이 실제로 무엇을 가리키는지 판단하는 데 도움이 되는 5가지 일반 규칙을 요약합니다. 모든 상황이 다루어지는 것은 아니지만 대부분의 일상적인 상황은 이러한 규칙을 사용하여 정확하게 추론할 수 있습니다.

이 값은 일반적으로 함수의 실행 환경에 따라 결정됩니다. 즉, 함수가 호출되는 방식에 따라 달라집니다.

동일한 함수가 호출될 때마다 this는 다른 개체를 가리킬 수 있습니다. (Global

Object
)

Chrome 브라우저 개발자 패널(Windows: Ctrl + Sh
if

t + J)(Mac: Cmd + Option + J)을 열고

console.log(this);

를 입력하여 확인하세요. 출력 무엇?

// Window {}

창 개체

! 전역 범위에서 이는 전역 개체를 가리키기 때문입니다. 브라우저의 전역 개체는 창 개체입니다.
이것이 왜 창 개체를 가리키는지 더 명확하게 이해하기 위해 또 다른 예를 살펴보겠습니다.

var myName = 'Brandon';

myName
// 输出 'Brandon'

사실 전역적으로 정의된 모든 변수는 창 개체에 바인딩됩니다. 다음 테스트를 해보자:

window.myName
// 输出 'Brandon'
window.myName === myName
// 输出 true

이제 이것을 함수 안에 넣어서 어떤 효과가 있는지 살펴보자.

function test(){
 return this;
}
test();

이것은 여전히 ​​전역 창 개체를 가리킨다는 것을 알 수 있습니다. this 키워드는 선언된 객체 내에 있지 않기 때문에 기본값은 전역 창 객체입니다. 대부분의 초보자가 이해하기에는 다소 어려울 수 있습니다. 이 글을 읽고 나면 문득 이해가 되실 겁니다. 참고: strcit 모드인 경우 위 예에서는 정의되지 않습니다.

선언된 개체(

Declare
d 개체)

this 키워드가 선언된 개체 내에서 사용되면 해당 값은 이를 호출하는 함수의 가장 가까운 상위 개체에 바인딩됩니다. 이 문제를 설명하기 위해 예를 사용하겠습니다.

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this.first + ' ' + this.last);
 }
};
person.full();
// 输出 'John Smith'

이것이 선언된 객체 person의 전체 함수에서 사용되면 이를 호출하는 전체 함수의 가장 가까운 상위 객체는 person이므로 이는 person을 가리킵니다.

이것이 실제로 사람 객체를 가리킨다는 것을 더 잘 설명하기 위해 다음 코드를 브라우저 콘솔에 복사하고 인쇄할 수 있습니다.

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this);
 }
};
person.full();
// 输出 Object {first: "John", last: "Smith", full: function}

다음에는 좀 더 복잡한 예를 살펴보겠습니다.

var person = {
 first: 'John',
 last: 'Smith',
 full: function() {
  console.log(this.first + ' ' + this.last);
 },
 personTwo: {
  first: 'Allison',
  last: 'Jones',
  full: function() {
   console.log(this.first + ' ' + this.last);
  }
 }
};

여기에 중첩된 개체가 있습니다. 이 시점은 누구를 가리키는 것일까요? 인쇄하여 살펴보겠습니다.

person.full();
// 输出 'John Smith'
person.personTwo.full();
// 输出 'Allison Jones'

앞서 설명한 규칙이 충족되는 것을 확인할 수 있습니다. 해당 값은 이것을 호출한 함수의 가장 가까운 상위 개체에 바인딩됩니다.

new

Keyword

new 키워드를 사용하여 새 개체를 생성하면 이 새 개체에 바인딩됩니다. 예를 살펴보겠습니다.

function Car(make, model) {
 this.make = make;
 this.model = model;
};

첫 번째 규칙에 따르면 이것이 전역 객체를 가리킨다고 추론할 수 있습니다. 하지만 new 키워드를 사용하여 새 변수를 선언하면 Car 함수의 this가 새로운 빈 개체에 바인딩된 다음 this.make 및 this.model의 값이 초기화됩니다.

var myCar = new Car('Ford', 'Escape');
console.log(myCar);
// 输出 Car {make: "Ford", model: "Escape"}

call, 바인딩 및 적용

call(), 바인딩() 및 Apply()에서 이것의 바인딩 개체를 명시적으로 설정할 수 있습니다. 이 세 가지 기능은 매우 유사하지만 미묘한 차이점에 주의할 필요가 있습니다.

예를 살펴보겠습니다.

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
add(3,4);
// 输出 NaN

add 함수는 NaN을 출력합니다. 왜냐하면 this.a와 this.b가 정의되지 않았기 때문입니다.

이제 객체를 소개하고 call() 및 apply()를 사용하여 다음을 호출합니다.

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
var ten = {a: 1, b: 2};
add.call(ten, 3, 4);
// 输出 10
add.apply(ten, [3,4]);
// 输出 10

add.call()을 사용할 때 첫 번째 매개변수는 이것이 바인딩되어야 하는 객체이고 나머지는 함수 자체 매개변수를 추가합니다.

따라서 this.a는 ten.a를 가리키고, this.b는 ten.b를 가리킵니다. add.apply()는 두 번째 매개변수가 add

함수의 매개변수

를 저장하는 데 사용되는

배열

이라는 점을 제외하면 비슷합니다.

bind()函数和call()类似，但是bind()函数不会立即被调用。bind()函数会返回一个函数，并且将this绑定好。接下来我们来用例子来帮助理解bind()函数的应用场景：

var small = {
 a: 1,
 go: function(b,c,d){
  console.log(this.a+b+c+d);
 }
}
var large = {
 a: 100
}

执行:

small.go(2, 3, 4);
// 输出 10

如果我们想使用large.a的值，而不是small.a呢？ 我们可以使用call/apply:

small.go.call(large, 2, 3, 4);
// 输出 109

但是，如果我们现在还不知道这三个参数应该传入什么值，应该怎么办呢？ 我们可以使用bind:

var bindTest = small.go.bind(large, 2);

如果我们将bindTest在控制台下打印出来，我们会看到：

console.log(bindTest);
// 输出 function (b,c,d){console.log(this.a+b+c+d);}

注意：该函数已经将this绑定到large对象，并且传入了第一个参数b。所以，我们接下来是需要传入余下的参数即可：

bindTest(3, 4);
// 输出 109

箭头函数(=>)

因为需要很大的篇幅，我们会专门写一篇博客来介绍。

结论

当你读完这篇博客，你应该可以理解大多数情况下this指向的对象。
接下来我们来总结一下：

this的值通常是由当前函数的执行环境所决定；
在全局作用域，this指向全局对象 (window对象)；
当使用new关键字声明，this指向新建对象；
我们可以使用call(), bind(), apply()来设置this；
箭头函数不会绑定this。

위 내용은 이에 대한 자세한 설명은 JavaScript의 기본의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!