this 關鍵字在 Javascript 中很是常見,可是不少開發者很難說清它到底指向什麼。大部分人會從字面意思上去理解 this,認爲 this 指向函數自身,實際上this 是在運行時進行綁定的,並非在編寫時綁定,它的上下文取決於函數調 用時的各類條件。this 的綁定和函數聲明的位置沒有任何關係,只取決於函數的調用方式。javascript
總結: 函數被調用時發生 this 綁定,this 指向什麼徹底取決於函數在哪裏被調用。java
this 一共有 4 中綁定規則,接下來一一介紹每種規則的解釋和規則直接的優先級markdown
獨立函數調用app
function foo() { console.log(this.a); } var a = 2; foo(); // 2 複製代碼
嚴格模式下:函數
function foo() { "use strict"; console.log(this); //undefined console.log(this.a); //Uncaught TypeError: Cannot read property 'a' of undefined } var a = 2; foo(); 複製代碼
注意下邊兩種狀況this
var age = "18"; var obj = { name: "heyushuo", age: 25, fn: function() { function sayName() { console.log(this); //window console.log(this.age); //undefined } sayName(); } }; obj.fn(); 複製代碼
函數 sayName 雖然是在 obj.fn 內部定義的,可是它仍然是一個獨立函數調用,this 仍然指向 window。spa
var a = "global"; var obj = { a: 2, foo: function() { console.log(this.a); //global } }; var bar = obj.foo; // 函數別名! bar(); 複製代碼
雖然 bar 是 obj.foo 的一個引用,可是實際上,它引用的是函數自己,所以此時的 bar() 實際上是一個不帶任何修飾的獨立函數調用,所以應用了默認綁定。prototype
當函數引用有上下文對象時(例如:obj.foo 這個時候使用 obj 上下文來引用函數 foo),隱式綁定規則會把函數中的 this 綁定到這個上下文對象。code
var obj = {
name: "heyushuo,
foo: function() {
console.log(this.name); //heyushuo
}
};
obj.foo();
複製代碼
對象屬性引用鏈中只有上一層或者說最後一層在調用中起做用。orm
var obj = { name: "heyushuo", obj1: { name: "kebi", foo: function() { console.log(this.name); // kebi } } }; obj.obj1.foo(); 複製代碼
隱式丟失 被隱式綁定的函數會丟失綁定對象,而應用默認綁定,把 this 綁定到全局對象或者 undefined(嚴格模式) 上。 第一種
var a = "global"; var obj = { a: 2, foo: function() { console.log(this.a); //global } }; var bar = obj.foo; // 函數別名! bar(); 複製代碼
雖然 bar 是 obj.foo 的一個引用,可是實際上,它引用的是函數自己,所以此時的 bar() 實際上是一個不帶任何修飾的獨立函數調用,所以應用了默認綁定。
第二種傳入回調函數時:
var a = "global"; var obj = { a: 2, foo: function() { console.log(this.a); //global } }; var bar = obj.foo; // 函數別名! function doFoo(fn) { fn(); // <-- 調用位置! } doFoo(bar); //global //和下邊這種同樣 setTimeout(obj.foo, 300); 複製代碼
經過 call() 或者 apply()方法。第一個參數是一個對象,在調用函數時將這個對象綁定到 this 上,稱之爲顯示綁定。
function foo() { console.log(this.a); } var obj = { a: 2 }; foo.call(obj); // 2 複製代碼
顯示綁定引伸出來一個硬綁定,代碼以下
function foo(something) { console.log( this.a, something ); return this.a + something; } // 簡單的輔助綁定函數 function bind(fn, obj) { return function() { return fn.apply( obj, arguments ); //內部已經強制綁定了傳入函數this的指向 }; } var obj = { a:2 }; var bar = bind( foo, obj ); var b = bar( 3 ); // 2 3 console.log( b ); // 5 複製代碼
bar函數不管如何調用,它總會手動在 obj 上調用 fn,強制把 fn 的 this 綁定到了 obj。這樣也解決前面提到的丟失綁定問題
因爲硬綁定是一種很是經常使用的模式,因此在 ES5 中提供了內置的方法 Function.prototype.bind
function foo(something) { console.log( this.a, something ); return this.a + something; } var obj = { a:2 }; var bar = foo.bind( obj ); var b = bar( 3 ); // 2 3 console.log( b ); // 5 複製代碼
使用new來調用函數,或者說發生構造函數調用時,會自動執行下面的操做。
例如:
function foo() { this.name = "heyushuo"; this.age = 25 } foo.prototype.sayName = function(){ console.log(this.name+this.age); } var bar = new foo(); console.log(bar); //{name: "heyushuo", age: 25} //這個新對象會綁定到函數調用的 this。因此此時的this就是bar對象 console.log( bar.age ); // 25 複製代碼
以下圖是 new foo() 這個對象
判斷this,能夠按照下面的順序來進行判斷:
var bar = new foo() 複製代碼
var bar = foo.call(obj2) 複製代碼
var bar = obj1.foo() 複製代碼
var bar = foo() 複製代碼