JavaScript(以下簡稱js)是一門動態(tài)語言农渊,與傳統(tǒng)的c,c++最大的區(qū)別就是js是在運行時動態(tài)檢測值的類型和變化。這一點有很大的好處吱雏,比如可以進行隱式類型轉換而不報錯艘策,書寫更加靈活而晒。當然也會造成很多問題碍论。this是js中的一個關鍵字康谆,它代表當前作用域的上下文環(huán)境,而且隨著上下文的改變而動態(tài)變化悬荣。
為什么需要綁定this
this代指當前的上下文環(huán)境菠秒,在不經(jīng)意間容易改變:
var info = "This is global info";
var obj = {
info: 'This is local info',
getInfo: getInfo
}
function getInfo() {
console.log(this.info);
}
obj.getInfo() //This is local info
getInfo() //This is global info 當前上下文環(huán)境被修改了
在上面的例子中疙剑,我們在對象內部創(chuàng)建一個屬性getInfo氯迂,對全局作用域下的getInfo進行引用,而它的作用是打印當前上下文中info的值言缤,當我們使用obj.getInfo進行調用時嚼蚀,它會打印出對象內部的info的值,此時this指向該對象管挟。而當我們使用全局的函數(shù)時轿曙,它會打印全局環(huán)境下的info變量的值,此時this指向全局對象僻孝。
這個例子告訴我們:
- 同一個函數(shù)导帝,調用的方式不同,this的指向就會不同穿铆,結果就會不同您单。
- 對象內部的屬性的值為引用類型時,this的指向不會一直綁定在原對象上荞雏。
其次平酿,還有不經(jīng)意間this丟失的情況:
var info = "This is global info";
var obj = {
info: 'This is local info',
getInfo: function getInfo() {
console.log(this.info);
var getInfo2 = function getInfo2() {
console.log(this.info);
}
getInfo2();
}
}
obj.getInfo();
//This is local info
//This is global info
上面的例子中,對象obj中定義了一個getInfo方法蜈彼,方法內定義了一個新的函數(shù),也希望拿到最外層的該對象的info屬性的值幸逆,但是事與愿違,函數(shù)內函數(shù)的this被錯誤的指向了window全局對象上面暮现,這就導致了錯誤。
解決的方法也很簡單送矩,在最外層定義一個變量,存儲當前詞法作用域內的this指向的位置栋荸,根據(jù)變量作用域的關系菇怀,之后的函數(shù)內部還能訪問這個變量,從而得到上層函數(shù)內部this的真正指向晌块。
var info = "This is global info";
var obj = {
info: 'This is local info',
getInfo: function getInfo() {
console.log(this.info);
var self = this; //將外層this保存到變量中
var getInfo2 = function getInfo2() {
console.log(self.info); //指向外層變量代表的this
}
getInfo2();
}
}
obj.getInfo();
//This is local info
//This is local info
然而這樣也會有一些問題爱沟,上面的self變量等于重新引用了obj對象,這樣的話可能會在有些時候不經(jīng)意間修改了整個對象匆背,而且當需要取得多個環(huán)境下的this指向時呼伸,就需要聲明多個變量,不利于管理钝尸。
有一些方法括享,可以在不聲明類似于self這種變量的條件下,綁定當前環(huán)境下的上下文珍促,確保編程內容的安全铃辖。
如何綁定this
1. call, apply
call和apply是定義在Function.prototype上的兩個函數(shù),他們的作用就是修正函數(shù)執(zhí)行的上下文猪叙,也就是this的指向問題娇斩。
以call為例,上述anotherFun想要輸出local thing就要這樣修改:
...
var anotherFun = obj.getInfo;
anotherFun.call(obj) //This is local info
函數(shù)調用的參數(shù):
- Function.prototype.call(context [, argument1, argument2 ])
- Function.prototype.apply(context [, [ arguments ] ])
從這里就可以看到穴翩,call和apply的第一參數(shù)是必須的犬第,接受一個重新修正的上下文,第二個參數(shù)都是可選的芒帕,他們兩個的區(qū)別在于歉嗓,call從第二個參數(shù)開始,接受傳入調用函數(shù)的值是一個一個單獨出現(xiàn)的副签,而apply是接受一個數(shù)組傳入遥椿。
function add(num1, num2, num3) {
return num1 + num2 + num3;
}
add.call(null, 10, 20, 30); //60
add.apply(null, [10, 20, 30]); //60
當接受的context為undefined或null時基矮,會自動修正為全局對象,上述例子中為window
2. 使用Function.prototype.bind進行綁定
ES5中在Function.prototype新增了bind方法冠场,它接受一個需要綁定的上下文對象家浇,并返回一個調用的函數(shù)的副本,同樣的碴裙,它也可以在后面追加參數(shù)钢悲,實現(xiàn)函數(shù)的柯里化。
- Function.prototype.bind(context[, argument1, argument2])
//函數(shù)柯里化部分
function add(num1 ,num2) {
return num1 + num2;
}
var anotherFun = window.add.bind(window, 10);
anotherFun(20); //30
同時舔株,他返回一個函數(shù)的副本莺琳,并將函數(shù)永遠的綁定在傳入的上下文中。
...
var anotherFun = obj.getInfo.bind(obj)
anotherFun(); //This is local info
polyfill
polyfill是一種為了向下兼容的解決方案载慈,在不支持ES5的老舊瀏覽器上惭等,如何使用bind方法呢,就得需要使用舊的方法重寫一個bind方法办铡。
if (!Function.prototype.bind) {
Function.prototype.bind = function (obj) {
var self = this;
return function () {
self.call(obj);
}
}
}
上面的寫法實現(xiàn)了返回一個函數(shù)寡具,并且將上下文修正為傳入的參數(shù),但是沒有實現(xiàn)柯里化部分框喳。
...
Function.prototype.bind = function(obj) {
var args = Array.prototype.slice.call(arguments, 1);
//記錄下所有第一次傳入的參數(shù)
var self = this;
return function () {
self.apply(obj, args.concat(Array.prototype.slice.call(arguments)));
}
}
當使用bind進行綁定之后厦坛,即不能再通過call粪般,apply進行修正this指向,所以bind綁定又稱為硬綁定。
3. 使用new關鍵字進行綁定
在js中凡橱,函數(shù)有兩種調用方式,一種是直接進行調用顾稀,一種是通過new關鍵字進行構造調用坝撑。
function fun(){console.log("function called")}
//直接調用
fun() //function called
//構造調用
var obj = new fun() //function called
那普通的調用和使用new關鍵字的構造調用之間粮揉,又有哪些區(qū)別呢扶认?
準確的來說辐宾,就是new關鍵字只是在調用函數(shù)的基礎上膨蛮,多增加了幾個步驟,其中就包括了修正this指針到return回去的對象上誉察。
var a = 5;
function Fun() {
this.a = 10;
}
var obj = new Fun();
obj.a //10
幾種綁定方式的優(yōu)先級比較
以下面這個例子來進行幾種綁定狀態(tài)的優(yōu)先級權重的比較
var obj1 = {
info: "this is obj1",
getInfo: () => console.log(this.info)
}
var obj2 = {
info: "this is obj2",
getInfo: () => console.log(this.info)
}
1. call,apply和默認指向比較
首先很顯然冒窍,根據(jù)使用頻率來想综液,使用call和apply會比直接調用的優(yōu)先級更高儒飒。
obj1.getInfo() //this is obj1
obj2.getInfo() //this is obj2
obj1.getInfo.call(obj2) //this is obj2
obj2.getInfo.call(obj1) //this is obj1
使用call和apply相比于使用new呢?
這個時候就會出現(xiàn)問題了附帽,因為我們沒辦法運行類似 new function.call(something)
這樣的代碼蕉扮。所以颗圣,我們通過bind方法返回一個新的函數(shù),再通過new判斷優(yōu)先級奔则。
var obj = {}
function foo(num){
this.num = num;
}
var setNum = foo.bind(obj);
setNum(10);
obj.num //10
var obj2 = new setNum(20);
obj.num //10
obj2.num //20
通過這個例子我們可以看出來易茬,使用new進行構造調用時及老,會返回一個新的對象范抓,并將this修正到這個對象上匕垫,但是它并不會改變之前的對象內容年缎。
那么問題來了铃慷,上面我們寫的bind的polyfill明顯不具備這樣的能力。而在MDN上有一個bind的polyfill方法洲鸠,它的方法如下:
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
throw new TypeError("Function.prototype.bind -
what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP ?
this : oThis || this,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
上面的polyfill首先判斷需要綁定的對象是否為函數(shù)扒腕,防止使用Function.prototype.bind.call(something)
時瘾腰,something不是一個函數(shù)造成未知錯誤覆履。之后讓需要返回的fBound函數(shù)繼承自this,返回fBound栖雾。
特殊情況
當然析藕,在某些情況下凳厢,this指針指向也存在一些意外。
箭頭函數(shù)
ES6中新增了一種定義函數(shù)方式找爱,使用"=>"進行函數(shù)的定義泡孩,在它的內部仑鸥,this的指針不會改變,永遠指向最外層的詞法作用域意狠。
var obj = {
num: 1,
getNum: function () {
return function () {
//this丟失
console.log(this.num);
//此處的this指向window
}
}
}
obj.getNum()(); //undefined
var obj2 = {
num: 2,
getNum: function () {
return () => console.log(this.num);
//箭頭函數(shù)內部綁定外部getNum的this环戈,外部this指向調用的對象
}
}
obj2.getNum()(); //2
軟綁定
上面提供的bind方法可以通過強制修正this指向澎灸,并且再不能通過call,apply進行修正拦止。如果我們希望即能有bind效果糜颠,但是也能通過call和apply對函數(shù)進行二次修正其兴,這個時候就需要我們重寫一個建立在Function.prototype
上的方法,我們給它起名為"軟綁定"榴徐。
if (!Function.prototype.softBind) {
Function.prototype.softbind = function (obj) {
var self = this;
var args = Array.prototype.slice.call(arguments, 1);
return function () {
return self.apply((!this || this === (window || global)) ?
obj : this,
args.concat(Array.prototype.slice.call(arguments)));
}
}
}
bind箕速,call的妙用
在平日里我們需要將偽數(shù)組元素變?yōu)檎5臄?shù)組元素時朋譬,往往通過Array.prototype.slice
方法,正如上面的實例那樣字柠。將arguments這個對象變?yōu)檎嬲臄?shù)組對象窑业,使用 Array.prototype.slice.call(arguments)
進行轉化.枕屉。但是,每次使用這個方法太長而且繁瑣西潘。所以有時候我們就會這樣寫:
var slice = Array.prototype.slice;
slice(arguments);
//error
同樣的問題還出現(xiàn)在:
var qsa = document.querySelectorAll;
qsa(something);
//error
上面的問題就出現(xiàn)在喷市,內置的slice和querySelectorAll方法,內部使用了this寝并,當我們簡單引用時腹备,this在運行時成為了全局環(huán)境window馏谨,當然會造成錯誤。我們只需要簡單的使用bind哎媚,就能創(chuàng)建一個函數(shù)副本喊儡。
var qsa = document.querySelectorAll.bind(document);
qsa(something);
同樣的,使用因為call和apply也是一個函數(shù)买喧,所以也可以在它們上面調用bind方法淤毛。從而使返回的函數(shù)的副本本身就帶有修正指針的功能算柳。
var slice = Function.prototype.call.bind(Array.prototype.slice);
slice(arguments);