? 進入了JavaScript 學習，在函數和對象中會經常遇到this 關鍵字。雖然大多數情況下，可以猜測出this 是指向當前對象，但是遇到了某些例子，就會感到混亂，不明所以。如下例子：
// 例子一
var obj = {};
var foo1 = function (){
console.log(this.x = 10);
function foo2(){
console.log(this.y = 20)
}
foo2()
}
// 這樣調用時this 分別指向什么？
foo1()
// 這樣調用時this 又分別指向什么？
obj.method = foo1
obj.method();
? 所以為減少上面這種迷糊時刻，接下來會對this 知識點進行梳理。
一、函數直接調用
? 這種情況，代碼在嚴格模式和非嚴格模式下，this 的值會有所差異。但在平時接觸中，多是非嚴格模式，所以這里是以非嚴格模式為前提。
? 函數被直接調用，那么this 代表全局對象，即 window 對象。因此，這種情況下對于this 的賦值會被綁定到全局對象上，成為全局屬性，要慎用。
// 例子二
function demo(){
console.log(this === window)
}
demo() // true
? 由此可知，例子 一 中foo1 被直接調用后，函數中的兩個 this 都是指向 window 對象，并在window 上分別創建了 x 、y 全局屬性，屬性值分別為10 、20。
二、對象方法中的 this
? 當this 出現在對象的方法中時，this 就是調用這個方法的對象。
// 例子三
var o = {
name: 'Michael',
f: function(){
this.name = 'Peter';
console.log(this === o)
}
}
o.f() // true
console.log(o.name) // Peter
? 由此可知，例子 一 在 obj.method(); 調用method 方法后，第一個this 指向的是obj 對象，并在obj對象上創建了x 屬性，屬性值為10 ；然而其中內部函數foo2 的this 卻指向window 對象，并覆蓋了已經存在的全局屬性y ，屬性值為20 。例子 一 可能不夠清楚，所以在舉一個例子:
// 例子四
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，這個方法參考自深入淺出 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
如果該方法存在于一個對象的原型鏈上，那么this指向的是調用這個方法的對象，表現得好像是這個方法就存在于這個對象上一樣。具體可參見MDN--this
-
getter 與 setter 中的this
作為getter或setter函數都會綁定 this 到從設置屬性或得到屬性的那個對象。具體參見MDN
三、作為構造函數調用
? 通過構造函數生成一個新對象，那么this 就是這個新對象。
// 例子七
function foo(){this.xxx = 'yyy'};
var demo = new foo();
demo.xxx // "yyy"
? 構造器返回的默認值是一個this引用的對象，也可以手動設置返回其他的值，如果手動設置的值是一個對象，那么就返回這個對象；如果返回值不是一個對象，那么就返回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 調用
? call 和 apply 是函數對象的方法，可以用句點預算符調用這兩種方法。這兩種方法都可以用于指定this 綁定的對象。call 和 apply 第一個參數都是 this 要綁定的對象，不同的是call 方法后面可以接無數個參數，而apply 后面只能再接一個數組，數組里面裝著參數。
//例子九
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 方法時要注意，如果傳入的this 的值不是一個對象，那么JavaScript 會內部將其轉化為一個對象。比如傳入數字，就會使用new Number() 構造函數，將其轉換為對象；比如傳入字符串，就使用new String() 構造函數，將其轉化。如果傳入的this 的值是undefined 或 null，那么這個this 就綁定到window 對象上。
//例子十
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
? 這個方法會創建一個新函數，新函數的函數體和函數作用域是同調用這個方法的函數相同，而在這個新函數中，this 被永久的綁定到了bind 的第一個參數上，就算call 調用傳入this 也不會作用。
//例子十一
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事件處理函數中的 this
? 當函數被用作事件處理函數時，它的this指向觸發事件的元素
- 下面的this 指向window，this
<button onclick="(function(){console.log(this.xx = 30);console.log(this===window)})()" id="firstButton">
click me
</button>
<!-- 這里的變量xx 被綁定到window 對象上 -->
<script>
function demo(){
console.log(this.aa = 60);
console.log(this === window);
}
</script>
<button onclick="demo()">
click me to fresh
</button>
<!-- 這里的變量aa 被綁定到window 對象上 -->
- 下面的this 指向文檔元素
<button onclick="console.log(this)" id="secondButton">
click me again
</button>
<!-- 這里的變量yy 被綁定到secondButton 文檔元素上，因為這里的this 在外層代碼上 -->
<button onclick="(function(obj){console.log(obj.xx = 30);console.log(obj)})(this)" id="firstButton">
give me five
</button>
<!-- 這里的變量xx 被綁定到firstButton 文檔元素上，因為這里的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 文檔元素上 -->
