this繫結方式總結
最近在回顧js的一些基礎知識,把《你不知道的js》系列又看了一遍,this始終是重中之重,還是決定把this相關知識做一個系統的總結,也方便自己日後回顧。
this的四條繫結規則
1.預設繫結
這是最常用的函式呼叫型別:獨立函式呼叫(即函式是直接使用不帶任何修飾的函式引用進行呼叫的)。可以把這條規則看作是無法應用其他規則時的預設規則。
預設繫結的this在非嚴格模式下指向window,嚴格模式下指向undefined,比如下面的函式foo在非嚴格模式下:
var a = 2; function foo(){ var a = 3; console.log(this.a); } foo(); //2
這裡的foo()方法內的this指向了window,因此window.a = 2;
嚴格模式下,this.指向undefined,因此訪問this.a會報錯:
var a = 2;
function foo(){
"use strict";
var a = 3;
console.log(this.a);
}
foo(); //Uncaught TypeError: Cannot read property 'a' of undefined
2.隱式繫結
如果呼叫位置上有上下文物件,或者說被某個物件“擁有”或者“包
含”,則使用隱式繫結。
function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; obj.foo(); // 2
上例中的foo是通過obj.foo()的方式呼叫的,呼叫位置會使用obj上下文來引用函式,因此foo中的this指向了obj。
另外foo是當做引用被加入到obj中的,但是無論是直接在obj 中定義還是先定義再新增為引用屬性,foo嚴格上來說都不屬於obj,因此上述定義裡面的“擁有”與“包含”加上了引號,這樣說是為了方便理解。
常見的隱式呼叫場景:
obj.fn();
arguments[i]();
//其實就是將點的呼叫方式變為了[]呼叫
el.onClick(function(){console.log(this);//this指向el})
隱式丟失
先來看一段程式碼:
function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; var bar = obj.foo; // 函式別名! var a = "global"; // a 是全域性物件的屬性 bar(); // "global"
上述程式碼其實只用看呼叫的方式:bar(),這其實是一個不帶任何修飾的函式呼叫,因此應用了預設繫結。
還有一種引數傳遞的方式也會發生隱式丟失,原理其實跟上述例子一樣:
function foo() {
console.log( this.a );
}
function doFoo(fn) {
// fn 其實引用的是foo
fn(); // <-- 呼叫位置!
}
var obj = {
a: 2,
foo: foo
};
var a = "global"; // a 是全域性物件的屬性
doFoo( obj.foo ); // "global"
顯示繫結
使用call,apply和bind方法可以指定繫結函式的this的值,這種繫結方法叫顯示繫結。
function foo() {
console.log( this.a );
}
var obj = {
a:2
};
foo.call( obj ); // 2
通過foo.call(obj),我們可以在呼叫foo 時強制把它的this 繫結到obj 上
new繫結
new操作符可以基於一個“建構函式”新建立一個物件例項,new的例項化過程如下:
- 建立(或者說構造)一個全新的物件。
- 這個新物件會被執行[[ 原型]] 連線。
- 這個新物件會繫結到函式呼叫的this。
- 如果函式沒有返回其他物件,那麼new 表示式中的函式呼叫會自動返回這個新物件。
明確了new的例項化過程後,思考如下程式碼:
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2
new foo(2)後新建立了個例項物件bar,然後把這個新物件bar繫結到了foo函式中的this,因此執行this.a = a後其實是把a賦給了bar.a
優先順序
一般情況下this的繫結會根據上述四條繫結規則來,那麼他們同時出現時,該以怎樣的順序來判斷this的指向?下面是具體的規則:
- 函式是否在new 中呼叫(new 繫結)?如果是的話this 繫結的是新建立的物件( var bar = new foo() )。
- 函式是否通過call、apply(顯式繫結)或者硬繫結呼叫?如果是的話,this 繫結的是指定的物件( var bar = foo.call(obj2) )。
- 函式是否在某個上下文物件中呼叫(隱式繫結)?如果是的話,this 繫結的是那個上下文物件。( var bar = obj1.foo() )
- 如果都不是的話,使用預設繫結。如果在嚴格模式下,就繫結到undefined,否則繫結到全域性物件。( var bar = foo() )
繫結例外
1.使用call,appy,bind這種顯式繫結的方法,引數傳入null或者undefined作為上下文時,函式呼叫還是會使用預設繫結
function foo() {
console.log( this.a );
}
var a = 2;
foo.call( null ); // 2
什麼情況下需要將上下文傳為null呢?
1.使用bind函式來實現柯里化
function foo(a,b) {
console.log(a,b);
}
// 使用 bind(..) 進行柯里化
var bar = foo.bind( null, 2 );
bar( 3 ); // 2,3
2.使用apply(..) 來展開一個數組,並當作引數傳入一個函式
function foo(a,b) {
console.log(a,b);
}
// 把陣列展開成引數
foo.apply( null, [2, 3] ); // 2,3
其實上面兩種使用場景其實都不關心call/app/bind第一個引數的值是什麼,只是想傳個佔位值而已。
但是總是傳入null可能會出現一些難以追蹤的bug,比如說當你在使用的第三方庫中的某個函式中有this時,this會被錯誤的繫結到全域性物件上,造成一些難以預料的後果(修改全域性變數)
var a = 1;//全域性變數
const Utils = {
a: 2,
changeA: function(a){
this.a = a;
}
}
Utils.changeA(3);
Utils.a //3
a //1
Utils.changeA.call(null,4);
Utils.a //3
a //4,修改了全域性變數a!
更安全的做法:
var o = Object.create(null);
Utils.changeA.call(o,6);
a //1, 全域性變數沒有修改
o.a // 6 改的是變數o
2.間接引用
function foo() {
console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2
賦值表示式p.foo = o.foo 的返回值是目標函式的引用,因此呼叫位置是foo() 而不是p.foo() 或者o.foo()。根據我們之前說過的,這裡會應用預設繫結。
this詞法(箭頭函式)
上述的幾種規則適用於所有的正常函式,但不包括ES6的箭頭函式。箭頭函式不使用this的四種標準規則,而是根據外層(函式或者全域性)作用域(詞法作用域)來決定this
function foo() {
// 返回一個箭頭函式
return (a) => {
//this 繼承自foo()
console.log( this.a );
};
}
var obj1 = {
a:2
};
var obj2 = {
a:3
};
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 不是3 !
foo() 內部建立的箭頭函式會捕獲呼叫時foo() 的this。由於foo() 的this 繫結到obj1,bar(引用箭頭函式)的this 也會繫結到obj1,箭頭函式的繫結無法被修改。(new 也不行!)
幾個例子加深理解
this的理論知識講解得差不多了,來幾個例子看看自己有沒有理解全面:
1.經典面試題:以下輸出結果是什麼
var length = 10;
function fn() {
console.log(this.length);
}
var obj = {
length: 5,
method: function(fn) {
fn();
arguments[0]();
}
};
obj.method(fn, 1);
obj中method方法裡面呼叫了兩次fn。第一次是直接呼叫的“裸露”的fn,因此fn()中this使用預設繫結,this.length為10.第二次呼叫時通過arguments0的方式呼叫的,arguments[0]其實指向的就是fn,但是是通過obj[fn]這種物件上下文的隱式繫結的,因此this指向arguments,而arguments只有一個一項(method中只有fn一個引數),因此arguments.length為1。因此列印的結果為:
10
1
2.以下輸出什麼
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};
obj.getAge();
答案是嚴格模式下會報錯
,非嚴格模式下輸出NaN
原因也是因為在呼叫obj.getAge()後,getAge方法內的this使用隱式繫結。但是return fn()的時候用的是“裸露的fn”使用預設繫結,fn裡面的this指向window或者undefined。
使用箭頭函式來修正this的指向:
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj物件
return fn();
}
};
obj.getAge(); // 25
使用箭頭函式後,fn中的this在他的詞法分析階段就已經確定好了(即fn定義的時候),跟呼叫位置無關。fn的this指向外層的作用域(即getAge中的this)
3.以下輸出為什麼是'luo'
var A = function( name ){
this.name = name;
};
var B = function(){
A.apply(this,arguments);
};
B.prototype.getName = function(){
return this.name;
};
var b=new B('sven'); // B {name: "luo"}
console.log( b.getName() ); // 輸出: 'luo'
執行new B('seven')後會返回一個新物件b,並且B函式中的this會繫結到新物件b上,B的函式體內執行A.apply(this.arguments)也就是執行b.name = name;這個時候b的值就是{name:'luo'},所以b.getName()就能輸出'luo'啦~
實際在業務使用中,邏輯會更復雜一些,但是萬變不離其宗,都按照上面寫的規則來代入就好