JavaScript에서 함수의 this 개체는 함수가 실행되는 범위입니다(예: 웹 페이지의 전역 범위에서 함수가 호출될 때 this 개체는 창을 나타냅니다).
JavaScript의 이는 Java와 같은 객체 지향 언어의 이와 매우 다릅니다. 바인딩(), call() 및 Apply() 함수는 이것의 유연성을 더욱 확장합니다.
이 기사는 가독성을 보장하기 위해 직역이 아닌 무료 번역을 사용합니다. 또한, 이 글의 저작권은 원저자에게 있으며, 번역은 학습용으로만 사용됩니다.
자바스크립트 키워드를 이렇게 깊이 이해하지 못하면 때로는 예상치 못한 함정에 빠질 수도 있습니다. 여기서는 이것이 실제로 무엇을 가리키는지 판단하는 데 도움이 되는 5가지 일반 규칙을 요약했습니다. 모든 상황이 다루어지는 것은 아니지만 대부분의 일상적인 상황은 이러한 규칙을 사용하여 정확하게 추론할 수 있습니다.
이 값은 일반적으로 함수의 실행 환경에 따라 결정됩니다. 즉, 함수가 호출되는 방식에 따라 달라집니다.
동일한 함수가 호출될 때마다 this는 다른 개체를 가리킬 수 있습니다. (전역 개체)
Chrome 브라우저 개발자 패널을 열고(Windows: Ctrl + Shift + J) (Mac: Cmd + Option + J) 다음을 입력하세요.
console.log(this);
출력이 무엇인지 확인하세요. // Window {}
console.log(this);
看看输出了什么?
myName // 输出 'Brandon'
window对象! 因为在全局作用域下,this指向全局对象。在浏览器中全局对象就是window对象。
为了让你更加清楚理解为什么this会指向window对象,我们来看另外一个例子:
var myName = 'Brandon';
我们可以通过在控制台输入myName来访问其值:
window.myName // 输出 'Brandon' window.myName === myName // 输出 true
其实,所有在全局定义的变量都绑定到window对象。我们来做如下测试:
function test(){ return this; } test();
现在我们将this放到函数内部,看看有何效果。
var person = { first: 'John', last: 'Smith', full: function() { console.log(this.first + ' ' + this.last); } }; person.full(); // 输出 'John Smith'
你会发现this依然指向全局的window对象。因为this关键字没有处于一个声明的对象内部,默认指向全局window对象。这一点可能对于大部分初学者来说有点难以理解。当读完这篇文章,你就会豁然开朗。
注意:如果在strcit模式下,上面的例子中this为undefined。
声明的对象 (Declared Object)
当this关键字在一个声明对象内部使用,其值会被绑定到调用该this的函数的最近的父对象。我们用例子来说明这个问题:
var person = { first: 'John', last: 'Smith', full: function() { console.log(this); } }; person.full(); // 输出 Object {first: "John", last: "Smith", full: function}
在被声明的对象person中的full函数里面使用了this, 那么调用this的full函数的最近的父对象就是person, 因此,this指向person。
为了更好的描述this实际上是指向person对象的,你可以拷贝如下代码到浏览器控制台,将this打印出来。
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'
在这里我们有嵌套的对象,在这个时候,this分别指向谁呢? 我们将其打印出来看一看:
function Car(make, model) { this.make = make; this.model = model; };
你会发现满足我们前面所描述的规则:其值会被绑定到调用this的函数的最近的父对象。
new关键字
当使用new关键字构建一个新的对象,this会绑定到这个新对象。我们来看一个例子:
var myCar = new Car('Ford', 'Escape'); console.log(myCar); // 输出 Car {make: "Ford", model: "Escape"}
根据第一条规则,你可能会推断this指向全局对象。但是如果我们使用new关键字来声明一个新的变量,Car函数中的this将会绑定一个新的空对象,然后初始化this.make和this.model的值。
function add(c, d) { console.log(this.a + this.b + c + d); } add(3,4); // 输出 NaN
call, bind, 和apply
我们可以显示的在call(),bind(),apply()中设置this的绑定对象。这三个函数很类似,但是我们需要注意它们微小的区别。
d7ee23e7ba694ae212761bca76923316
我们来看一个例子:
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函数输出NaN, 因为this.a和this.b未定义。
现在我们引入对象,并且使用call()和apply()来调用:
var small = { a: 1, go: function(b,c,d){ console.log(this.a+b+c+d); } } var large = { a: 100 }
当我们使用add.call(),第一个参数是this需要绑定的对象,剩下的是add函数本来的参数。
因此,this.a指向ten.a,this.b指向ten.b。add.apply()也类似,除了第二个参数是一个数组,用于存储add函数的参数。
bind()函数和call()类似,但是bind()函数不会立即被调用。bind()函数会返回一个函数,并且将this绑定好。接下来我们来用例子来帮助理解bind()函数的应用场景:
small.go(2, 3, 4); // 输出 10
执行:
small.go.call(large, 2, 3, 4); // 输出 109
如果我们想使用large.a的值,而不是small.a呢? 我们可以使用call/apply:
console.log(bindTest); // 输出 function (b,c,d){console.log(this.a+b+c+d);}
但是,如果我们现在还不知道这三个参数应该传入什么值,应该怎么办呢? 我们可以使用bind:
var bindTest = small.go.bind(large, 2);
창 개체! 전역 범위에서 이는 전역 개체를 가리키기 때문입니다. 브라우저의 전역 개체는 창 개체입니다.
var myName = 'Brandon';
콘솔에 myName을 입력하여 해당 값에 액세스할 수 있습니다. :
bindTest(3, 4); // 输出 109
사실 전역적으로 정의된 모든 변수는 window 객체에 바인딩됩니다. 다음 테스트를 해보자:
rrreee이제 이것을 함수 안에 넣어서 어떤 효과가 있는지 살펴보자.
rrreee🎜이것은 여전히 전역 창 개체를 가리킨다는 것을 알 수 있습니다. this 키워드는 선언된 객체 내에 있지 않기 때문에 기본값은 전역 창 객체입니다. 대부분의 초보자가 이해하기에는 다소 어려울 수 있습니다. 이 글을 읽고 나면 문득 이해가 되실 겁니다. 🎜참고: strcit 모드인 경우 위 예에서는 정의되지 않습니다. 🎜🎜🎜Declared Object🎜🎜🎜this 키워드가 선언된 객체 내에서 사용되면 해당 값은 이를 호출하는 함수의 가장 가까운 상위 객체에 바인딩됩니다. 이 문제를 설명하기 위해 예를 사용하겠습니다. 🎜rrreee🎜이것이 선언된 객체 person의 전체 함수에서 사용되면 이를 호출하는 전체 함수의 가장 가까운 상위 객체는 person이므로 이는 person을 가리킵니다. 🎜🎜이것이 실제로 사람 객체를 가리킨다는 것을 더 잘 설명하기 위해 다음 코드를 브라우저 콘솔에 복사하고 인쇄할 수 있습니다. 🎜rrreee🎜다음에는 좀 더 복잡한 예를 살펴보겠습니다. 🎜rrreee🎜여기에 중첩된 개체가 있습니다. 이 시점은 누구를 가리키는 것일까요? 인쇄하여 살펴보겠습니다. 🎜rrreee🎜 앞서 설명한 규칙이 충족되는 것을 확인할 수 있습니다. 해당 값은 이것을 호출한 함수의 가장 가까운 상위 개체에 바인딩됩니다. 🎜🎜🎜new 키워드🎜🎜🎜new 키워드를 사용하여 새 개체를 생성하면 새 개체에 바인딩됩니다. 예를 살펴보겠습니다. 🎜rrreee🎜첫 번째 규칙에 따르면 이것이 전역 객체를 가리킨다고 추론할 수 있습니다. 하지만 new 키워드를 사용하여 새 변수를 선언하면 Car 함수의 this가 새로운 빈 개체에 바인딩되고 this.make 및 this.model의 값이 초기화됩니다. 🎜rrreee🎜🎜call, 바인딩 및 적용🎜🎜🎜call(), 바인딩() 및 Apply()에서 이것의 바인딩 개체를 명시적으로 설정할 수 있습니다. 이 세 가지 기능은 매우 유사하지만 미묘한 차이점에 주의할 필요가 있습니다. 🎜🎜aaf871443a1ce03c109bb25b8cc637c0🎜🎜예를 살펴보겠습니다. 🎜rrreee🎜add 함수는 NaN을 출력합니다. 왜냐하면 this.a와 this.b가 정의되지 않았기 때문입니다. 🎜🎜이제 개체를 소개하고 call() 및 apply()를 사용하여 다음을 호출합니다. 🎜rrreee🎜 add.call()을 사용할 때 첫 번째 매개변수는 바인딩해야 하는 개체이고 나머지는 함수 자체 매개변수를 추가합니다. 🎜따라서 this.a는 ten.a를 가리키고, this.b는 ten.b를 가리킵니다. add.apply()는 두 번째 매개변수가 add 함수의 매개변수를 저장하는 배열이라는 점을 제외하면 유사합니다. 🎜🎜bind() 함수는 call()과 유사하지만, 바인딩() 함수는 즉시 호출되지 않습니다. 바인딩() 함수는 함수를 반환하고 이를 바인딩합니다. 다음으로, 바인딩() 함수의 적용 시나리오를 이해하는 데 도움이 되는 예를 사용하겠습니다. 🎜rrreee🎜실행: 🎜rrreee🎜small.a 대신 Large.a의 값을 사용하려면 어떻게 해야 할까요? call/apply를 사용할 수 있습니다:🎜rrreee🎜하지만 이 세 가지 매개변수에 대해 어떤 값을 전달해야 하는지 아직 모른다면 어떻게 해야 할까요? 다음과 같이 바인드를 사용할 수 있습니다:🎜🎜var binTest = small.go.bind(large, 2);
🎜🎜콘솔 아래에 바인딩 테스트를 인쇄하면 다음이 표시됩니다. 🎜rrreee🎜참고: 이 함수는 이것을 대형 객체에 바인딩하고 첫 번째 매개변수에 전달했습니다. b. 따라서 다음으로 나머지 매개변수를 전달해야 합니다. 🎜rrreee🎜위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜JS에서 this 포인팅과 호출 및 적용 기능(그림 및 텍스트 튜토리얼)
JS에서 this 포인팅과 호출 및 적용 기능_기본 지식
self , in PHP static과 $this의 차이점과 후기 정적 바인딩
위 내용은 JavaScript로 이에 대한 자세한 답변(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!