? 進(jìn)入了JavaScript 學(xué)習(xí)，在函數(shù)和對(duì)象中會(huì)經(jīng)常遇到this 關(guān)鍵字。雖然大多數(shù)情況下，可以猜測(cè)出this 是指向當(dāng)前對(duì)象，但是遇到了某些例子，就會(huì)感到混亂，不明所以。如下例子：
// 例子一
var obj = {};
var foo1 = function (){
console.log(this.x = 10);
function foo2(){
console.log(this.y = 20)
}
foo2()
}
// 這樣調(diào)用時(shí)this 分別指向什么？
foo1()
// 這樣調(diào)用時(shí)this 又分別指向什么？
obj.method = foo1
obj.method();
? 所以為減少上面這種迷糊時(shí)刻，接下來會(huì)對(duì)this 知識(shí)點(diǎn)進(jìn)行梳理。
一、函數(shù)直接調(diào)用
? 這種情況，代碼在嚴(yán)格模式和非嚴(yán)格模式下，this 的值會(huì)有所差異。但在平時(shí)接觸中，多是非嚴(yán)格模式，所以這里是以非嚴(yán)格模式為前提。
? 函數(shù)被直接調(diào)用，那么this 代表全局對(duì)象，即 window 對(duì)象。因此，這種情況下對(duì)于this 的賦值會(huì)被綁定到全局對(duì)象上，成為全局屬性，要慎用。
// 例子二
function demo(){
console.log(this === window)
}
demo() // true
? 由此可知，例子 一 中foo1 被直接調(diào)用后，函數(shù)中的兩個(gè) this 都是指向 window 對(duì)象，并在window 上分別創(chuàng)建了 x 、y 全局屬性，屬性值分別為10 、20。
二、對(duì)象方法中的 this
? 當(dāng)this 出現(xiàn)在對(duì)象的方法中時(shí)，this 就是調(diào)用這個(gè)方法的對(duì)象。
// 例子三
var o = {
name: 'Michael',
f: function(){
this.name = 'Peter';
console.log(this === o)
}
}
o.f() // true
console.log(o.name) // Peter
? 由此可知，例子 一 在 obj.method(); 調(diào)用method 方法后，第一個(gè)this 指向的是obj 對(duì)象，并在obj對(duì)象上創(chuàng)建了x 屬性，屬性值為10 ；然而其中內(nèi)部函數(shù)foo2 的this 卻指向window 對(duì)象，并覆蓋了已經(jīng)存在的全局屬性y ，屬性值為20 。例子 一 可能不夠清楚，所以在舉一個(gè)例子:
// 例子四
var o = {
gender: 'male',
f: function foo1(){
this.gender = 'female';
function foo2(){
this.gender = 'male or female';
}
foo2();
}
}
o.f()
console.log(o.gender) // female
console.log(window.gender) // male or female
? 所以為了解決這種this 前后不一的問題，大多程序員使用變量替換的方法，而且該變量一般命名為 that，這個(gè)方法參考自深入淺出 JavaScript 中的 this.
// 例子五
var o = {
gender: 'male',
f: function foo1(){
var that = this
function foo2(){
that.gender = 'male or female';
}
foo2();
}
}
o.f()
console.log(o.gender) // male or female
-
就近原則
this 的綁定只受最靠近的成員引用的影響。
// 例子六 var o = { name: 'Michael', gender: 'male' } function foo(){ this.gender = 'female'; } o.obj={ name: 'Peter', gender: 'male', f: foo } o.obj.f() o.gender //male o.obj.gender //female由此可見例子六 的this 指向的是o.obj 。
-
原型中的this
如果該方法存在于一個(gè)對(duì)象的原型鏈上，那么this指向的是調(diào)用這個(gè)方法的對(duì)象，表現(xiàn)得好像是這個(gè)方法就存在于這個(gè)對(duì)象上一樣。具體可參見MDN--this
-
getter 與 setter 中的this
作為getter或setter函數(shù)都會(huì)綁定 this 到從設(shè)置屬性或得到屬性的那個(gè)對(duì)象。具體參見MDN
三、作為構(gòu)造函數(shù)調(diào)用
? 通過構(gòu)造函數(shù)生成一個(gè)新對(duì)象，那么this 就是這個(gè)新對(duì)象。
// 例子七
function foo(){this.xxx = 'yyy'};
var demo = new foo();
demo.xxx // "yyy"
? 構(gòu)造器返回的默認(rèn)值是一個(gè)this引用的對(duì)象，也可以手動(dòng)設(shè)置返回其他的值，如果手動(dòng)設(shè)置的值是一個(gè)對(duì)象，那么就返回這個(gè)對(duì)象；如果返回值不是一個(gè)對(duì)象，那么就返回this。
//例子八
function foo(){
this.xxx = 'yyy';
return {xxx: 'zzz'}
}
var demo = new foo();
demo.xxx // "zzz"
function foo1(){
this.xxx = 'yyy';
return xxx = 'zzz';
}
var demo1 = new foo1();
demo1.xxx // "yyy"
四、使用call 和 apply 調(diào)用
? call 和 apply 是函數(shù)對(duì)象的方法，可以用句點(diǎn)預(yù)算符調(diào)用這兩種方法。這兩種方法都可以用于指定this 綁定的對(duì)象。call 和 apply 第一個(gè)參數(shù)都是 this 要綁定的對(duì)象，不同的是call 方法后面可以接無數(shù)個(gè)參數(shù)，而apply 后面只能再接一個(gè)數(shù)組，數(shù)組里面裝著參數(shù)。
//例子九
var obj = {
age: null,
foo: function(x, y, z){
this.age = x + y + z;
}
}
var o = {
age: ''
}
var x = 'I ', y = 'Don\'t ', z = 'know.'
obj.foo.call(o,x, y, z); //或者寫成 obj.foo.apply(o,[x,y,z])
obj.age //null
o.age //"I Don't know."
? 使用call 和 apply 方法時(shí)要注意，如果傳入的this 的值不是一個(gè)對(duì)象，那么JavaScript 會(huì)內(nèi)部將其轉(zhuǎn)化為一個(gè)對(duì)象。比如傳入數(shù)字，就會(huì)使用new Number() 構(gòu)造函數(shù)，將其轉(zhuǎn)換為對(duì)象；比如傳入字符串，就使用new String() 構(gòu)造函數(shù)，將其轉(zhuǎn)化。如果傳入的this 的值是undefined 或 null，那么這個(gè)this 就綁定到window 對(duì)象上。
//例子十
var obj = {
age: null,
foo: function(x, y, z){
this.age = x + y + z;
}
}
var x = 'I ', y = 'Don\'t ', z = 'know.'
obj.foo.call(undefined,x, y, z);
obj.age //null
window.age //"I Don't know."
var o = {
name: 'Michael',
f: function(name){
this.name = name;
return this
}
}
console.log(o.f.call(0, 'Peter')); //Number {name: "Peter", [[PrimitiveValue]]: 0}
五、Function.prototype.bind
? 這個(gè)方法會(huì)創(chuàng)建一個(gè)新函數(shù)，新函數(shù)的函數(shù)體和函數(shù)作用域是同調(diào)用這個(gè)方法的函數(shù)相同，而在這個(gè)新函數(shù)中，this 被永久的綁定到了bind 的第一個(gè)參數(shù)上，就算call 調(diào)用傳入this 也不會(huì)作用。
//例子十一
var obj = {
name: 'Michael',
foo: function(newName){
this.name = newName;
}
}
var o1 = {
name: null
}
var o2 = {
name: 'none'
}
var g = obj.foo.bind(o1, 'Peter');
g.call(o2,'Lisa')
o1.name //"Peter"
o2.name //"none"
六、DOM事件處理函數(shù)中的 this
? 當(dāng)函數(shù)被用作事件處理函數(shù)時(shí)，它的this指向觸發(fā)事件的元素
- 下面的this 指向window，this
<button onclick="(function(){console.log(this.xx = 30);console.log(this===window)})()" id="firstButton">
click me
</button>
<!-- 這里的變量xx 被綁定到window 對(duì)象上 -->
<script>
function demo(){
console.log(this.aa = 60);
console.log(this === window);
}
</script>
<button onclick="demo()">
click me to fresh
</button>
<!-- 這里的變量aa 被綁定到window 對(duì)象上 -->
- 下面的this 指向文檔元素
<button onclick="console.log(this)" id="secondButton">
click me again
</button>
<!-- 這里的變量yy 被綁定到secondButton 文檔元素上，因?yàn)檫@里的this 在外層代碼上 -->
<button onclick="(function(obj){console.log(obj.xx = 30);console.log(obj)})(this)" id="firstButton">
give me five
</button>
<!-- 這里的變量xx 被綁定到firstButton 文檔元素上，因?yàn)檫@里的this 在外層代碼上 -->
<button id="thirdButton">
click me last time
</button>
<script>
var button3=document.querySelector("#thirdButton");
button3.onclick=function(){
console.log(this.zz=50)
console.log(this)
}
</script>
<!-- 這里的變量zz 被綁定到了thirdButton 文檔元素上 -->
