JavaScript에 있는 함수 의 this 객체 는 함수가 실행되는 범위입니다(예: 웹 페이지의 전역 범위에서 함수가 호출될 때 이 참조하는 this 객체 는 창).
JavaScript의 이 기능은 Java와 같은 객체 지향 언어의 기능과 매우 다릅니다. 바인딩(), call() 및 Apply() 함수는 이 기능의 유연성을 더욱 확장합니다. 이 기사는 가독성을 보장하기 위해 직역이 아닌 무료 번역을 사용합니다. 또한, 이 글의 저작권은 원저자에게 있으며, 번역은 학습용으로만 사용됩니다.
자바스크립트 키워드를 이렇게 깊이 이해하지 못하면 때로는 예상치 못한 함정에 빠질 수도 있습니다. 여기서는 이것이 실제로 무엇을 가리키는지 판단하는 데 도움이 되는 5가지 일반 규칙을 요약합니다. 모든 상황이 다루어지는 것은 아니지만 대부분의 일상적인 상황은 이러한 규칙을 사용하여 정확하게 추론할 수 있습니다.
이 값은 일반적으로 함수의 실행 환경에 따라 결정됩니다. 즉, 함수가 호출되는 방식에 따라 달라집니다.
동일한 함수가 호출될 때마다 this는 다른 개체를 가리킬 수 있습니다. (GlobalObject
)
Chrome 브라우저 개발자 패널(Windows: Ctrl + Sh
if
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()에서 이것의 바인딩 개체를 명시적으로 설정할 수 있습니다. 이 세 가지 기능은 매우 유사하지만 미묘한 차이점에 주의할 필요가 있습니다. aaf871443a1ce03c109bb25b8cc637c0
function add(c, d) { console.log(this.a + this.b + c + d); } add(3,4); // 输出 NaNadd 함수는 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]); // 输出 10add.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!