W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
this
關(guān)鍵字是一個(gè)非常重要的語(yǔ)法點(diǎn)。毫不夸張地說(shuō),不理解它的含義,大部分開發(fā)任務(wù)都無(wú)法完成。
首先,this
總是返回一個(gè)對(duì)象,簡(jiǎn)單說(shuō),就是返回屬性或方法“當(dāng)前”所在的對(duì)象。
this.property
上面代碼中,this
就代表property
屬性當(dāng)前所在的對(duì)象。
下面是一個(gè)實(shí)際的例子。
var person = {
name: '張三',
describe: function () {
return '姓名:'+ this.name;
}
};
person.describe()
// "姓名:張三"
上面代碼中,this.name
表示describe
方法所在的當(dāng)前對(duì)象的name
屬性。調(diào)用person.describe
方法時(shí),describe
方法所在的當(dāng)前對(duì)象是person
,所以就是調(diào)用person.name
。
由于對(duì)象的屬性可以賦給另一個(gè)對(duì)象,所以屬性所在的當(dāng)前對(duì)象是可變的,即this
的指向是可變的。
var A = {
name: '張三',
describe: function () {
return '姓名:'+ this.name;
}
};
var B = {
name: '李四'
};
B.describe = A.describe;
B.describe()
// "姓名:李四"
上面代碼中,A.describe
屬性被賦給B
,于是B.describe
就表示describe
方法所在的當(dāng)前對(duì)象是B
,所以this.name
就指向B.name
。
稍稍重構(gòu)這個(gè)例子,this
的動(dòng)態(tài)指向就能看得更清楚。
function f() {
return '姓名:'+ this.name;
}
var A = {
name: '張三',
describe: f
};
var B = {
name: '李四',
describe: f
};
A.describe() // "姓名:張三"
B.describe() // "姓名:李四"
上面代碼中,函數(shù)f
內(nèi)部使用了this
關(guān)鍵字,隨著f
所在的對(duì)象不同,this
的指向也不同。
只要函數(shù)被賦給另一個(gè)變量,this
的指向就會(huì)變。
var A = {
name: '張三',
describe: function () {
return '姓名:'+ this.name;
}
};
var name = '李四';
var f = A.describe;
f() // "姓名:李四"
上面代碼中,A.describe
被賦值給變量f
,內(nèi)部的this
就會(huì)指向f
運(yùn)行時(shí)所在的對(duì)象(本例是頂層對(duì)象)。
再看一個(gè)網(wǎng)頁(yè)編程的例子。
<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">
<script>
function validate(obj, lowval, hival){
if ((obj.value < lowval) || (obj.value > hival))
console.log('Invalid Value!');
}
</script>
上面代碼是一個(gè)文本輸入框,每當(dāng)用戶輸入一個(gè)值,就會(huì)調(diào)用onChange
回調(diào)函數(shù),驗(yàn)證這個(gè)值是否在指定范圍?;卣{(diào)函數(shù)傳入this
,就代表傳入當(dāng)前對(duì)象(即文本框),然后就可以從this.value
上面讀到用戶的輸入值。
總結(jié)一下,JavaScript語(yǔ)言之中,一切皆對(duì)象,運(yùn)行環(huán)境也是對(duì)象,所以函數(shù)都是在某個(gè)對(duì)象之中運(yùn)行,this
就是這個(gè)對(duì)象(環(huán)境)。這本來(lái)并不會(huì)讓用戶糊涂,但是JavaScript支持運(yùn)行環(huán)境動(dòng)態(tài)切換,也就是說(shuō),this
的指向是動(dòng)態(tài)的,沒(méi)有辦法事先確定到底指向哪個(gè)對(duì)象,這才是最讓初學(xué)者感到困惑的地方。
如果一個(gè)函數(shù)在全局環(huán)境中運(yùn)行,那么this
就是指頂層對(duì)象(瀏覽器中為window
對(duì)象)。
function f() {
return this;
}
f() === window // true
上面代碼中,函數(shù)f
在全局環(huán)境運(yùn)行,它內(nèi)部的this
就指向頂層對(duì)象window
。
可以近似地認(rèn)為,this
是所有函數(shù)運(yùn)行時(shí)的一個(gè)隱藏參數(shù),指向函數(shù)的運(yùn)行環(huán)境。
this
的使用可以分成以下幾個(gè)場(chǎng)合。
(1)全局環(huán)境
在全局環(huán)境使用this
,它指的就是頂層對(duì)象window
。
this === window // true
function f() {
console.log(this === window); // true
}
上面代碼說(shuō)明,不管是不是在函數(shù)內(nèi)部,只要是在全局環(huán)境下運(yùn)行,this
就是指頂層對(duì)象window
。
(2)構(gòu)造函數(shù)
構(gòu)造函數(shù)中的this
,指的是實(shí)例對(duì)象。
var Obj = function (p) {
this.p = p;
};
Obj.prototype.m = function() {
return this.p;
};
上面代碼定義了一個(gè)構(gòu)造函數(shù)Obj
。由于this
指向?qū)嵗龑?duì)象,所以在構(gòu)造函數(shù)內(nèi)部定義this.p
,就相當(dāng)于定義實(shí)例對(duì)象有一個(gè)p
屬性;然后m
方法可以返回這個(gè)p屬性。
var o = new Obj('Hello World!');
o.p // "Hello World!"
o.m() // "Hello World!"
(3)對(duì)象的方法
當(dāng)A對(duì)象的方法被賦予B對(duì)象,該方法中的this
就從指向A對(duì)象變成了指向B對(duì)象。所以要特別小心,將某個(gè)對(duì)象的方法賦值給另一個(gè)對(duì)象,會(huì)改變this
的指向。
請(qǐng)看下面的代碼。
var obj ={
foo: function () {
console.log(this);
}
};
obj.foo() // obj
上面代碼中,obj.foo
方法執(zhí)行時(shí),它內(nèi)部的this
指向obj
。
但是,只有這一種用法(直接在obj
對(duì)象上調(diào)用foo
方法),this
指向obj
;其他用法時(shí),this
都指向代碼塊當(dāng)前所在對(duì)象(瀏覽器為window
對(duì)象)。
// 情況一
(obj.foo = obj.foo)() // window
// 情況二
(false || obj.foo)() // window
// 情況三
(1, obj.foo)() // window
上面代碼中,obj.foo
先運(yùn)算再執(zhí)行,即使它的值根本沒(méi)有變化,this
也不再指向obj
了。
可以這樣理解,在JavaScript引擎內(nèi)部,obj
和obj.foo
儲(chǔ)存在兩個(gè)內(nèi)存地址,簡(jiǎn)稱為M1
和M2
。只有obj.foo()
這樣調(diào)用時(shí),是從M1
調(diào)用M2
,因此this
指向obj
。但是,上面三種情況,都是直接取出M2
進(jìn)行運(yùn)算,然后就在全局環(huán)境執(zhí)行運(yùn)算結(jié)果(還是M2
),因此this
指向全局環(huán)境。
上面三種情況等同于下面的代碼。
// 情況一
(obj.foo = function () {
console.log(this);
})()
// 情況二
(false || function () {
console.log(this);
})()
// 情況三
(1, function () {
console.log(this);
})()
同樣的,如果某個(gè)方法位于多層對(duì)象的內(nèi)部,這時(shí)為了簡(jiǎn)化書寫,把該方法賦值給一個(gè)變量,往往會(huì)得到意料之外的結(jié)果。
var a = {
b: {
m: function() {
console.log(this.p);
},
p: 'Hello'
}
};
var hello = a.b.m;
hello() // undefined
上面代碼中,m
是多層對(duì)象內(nèi)部的一個(gè)方法。為求簡(jiǎn)便,將其賦值給hello
變量,結(jié)果調(diào)用時(shí),this
指向了頂層對(duì)象。為了避免這個(gè)問(wèn)題,可以只將m
所在的對(duì)象賦值給hello
,這樣調(diào)用時(shí),this
的指向就不會(huì)變。
var hello = a.b;
hello.m() // Hello
(4)Node
在Node中,this
的指向又分成兩種情況。全局環(huán)境中,this
指向全局對(duì)象global
;模塊環(huán)境中,this
指向module.exports。
// 全局環(huán)境
this === global // true
// 模塊環(huán)境
this === module.exports // true
(1)避免多層this
由于this
的指向是不確定的,所以切勿在函數(shù)中包含多層的this
。
var o = {
f1: function () {
console.log(this);
var f2 = function () {
console.log(this);
}();
}
}
o.f1()
// Object
// Window
上面代碼包含兩層this
,結(jié)果運(yùn)行后,第一層指向該對(duì)象,第二層指向全局對(duì)象。實(shí)際執(zhí)行的是下面的代碼。
var temp = function () {
console.log(this);
};
var o = {
f1: function () {
console.log(this);
var f2 = temp();
}
}
一個(gè)解決方法是在第二層改用一個(gè)指向外層this
的變量。
var o = {
f1: function() {
console.log(this);
var that = this;
var f2 = function() {
console.log(that);
}();
}
}
o.f1()
// Object
// Object
上面代碼定義了變量that
,固定指向外層的this
,然后在內(nèi)層使用that
,就不會(huì)發(fā)生this
指向的改變。
事實(shí)上,使用一個(gè)變量固定this
的值,然后內(nèi)層函數(shù)調(diào)用這個(gè)變量,是非常常見的做法,有大量應(yīng)用,請(qǐng)務(wù)必掌握。
JavaScript 提供了嚴(yán)格模式,也可以硬性避免這種問(wèn)題。在嚴(yán)格模式下,如果函數(shù)內(nèi)部的this
指向頂層對(duì)象,就會(huì)報(bào)錯(cuò)。
var counter = {
count: 0
};
counter.inc = function () {
'use strict';
this.count++
};
var f = counter.inc;
f()
// TypeError: Cannot read property 'count' of undefined
上面代碼中,inc
方法通過(guò)'use strict'
聲明采用嚴(yán)格模式,這時(shí)內(nèi)部的this
一旦指向頂層對(duì)象,就會(huì)報(bào)錯(cuò)。
(2)避免數(shù)組處理方法中的this
數(shù)組的map
和foreach
方法,允許提供一個(gè)函數(shù)作為參數(shù)。這個(gè)函數(shù)內(nèi)部不應(yīng)該使用this
。
var o = {
v: 'hello',
p: [ 'a1', 'a2' ],
f: function f() {
this.p.forEach(function (item) {
console.log(this.v + ' ' + item);
});
}
}
o.f()
// undefined a1
// undefined a2
上面代碼中,foreach
方法的回調(diào)函數(shù)中的this
,其實(shí)是指向window
對(duì)象,因此取不到o.v
的值。原因跟上一段的多層this
是一樣的,就是內(nèi)層的this
不指向外部,而指向頂層對(duì)象。
解決這個(gè)問(wèn)題的一種方法,是使用中間變量。
var o = {
v: 'hello',
p: [ 'a1', 'a2' ],
f: function f() {
var that = this;
this.p.forEach(function (item) {
console.log(that.v+' '+item);
});
}
}
o.f()
// hello a1
// hello a2
另一種方法是將this
當(dāng)作foreach
方法的第二個(gè)參數(shù),固定它的運(yùn)行環(huán)境。
var o = {
v: 'hello',
p: [ 'a1', 'a2' ],
f: function f() {
this.p.forEach(function (item) {
console.log(this.v + ' ' + item);
}, this);
}
}
o.f()
// hello a1
// hello a2
(3)避免回調(diào)函數(shù)中的this
回調(diào)函數(shù)中的this
往往會(huì)改變指向,最好避免使用。
var o = new Object();
o.f = function () {
console.log(this === o);
}
o.f() // true
上面代碼表示,如果調(diào)用o
對(duì)象的f方法,其中的this
就是指向o
對(duì)象。
但是,如果將f
方法指定給某個(gè)按鈕的click
事件,this的指向就變了。
$('#button').on('click', o.f);
點(diǎn)擊按鈕以后,控制臺(tái)會(huì)顯示false
。原因是此時(shí)this
不再指向o
對(duì)象,而是指向按鈕的DOM對(duì)象,因?yàn)?code class="highlighter-rouge">f方法是在按鈕對(duì)象的環(huán)境中被調(diào)用的。這種細(xì)微的差別,很容易在編程中忽視,導(dǎo)致難以察覺(jué)的錯(cuò)誤。
為了解決這個(gè)問(wèn)題,可以采用下面的一些方法對(duì)this
進(jìn)行綁定,也就是使得this
固定指向某個(gè)對(duì)象,減少不確定性。
this
的動(dòng)態(tài)切換,固然為JavaScript創(chuàng)造了巨大的靈活性,但也使得編程變得困難和模糊。有時(shí),需要把this
固定下來(lái),避免出現(xiàn)意想不到的情況。JavaScript提供了call
、apply
、bind
這三個(gè)方法,來(lái)切換/固定this
的指向。
函數(shù)實(shí)例的call
方法,可以指定函數(shù)內(nèi)部this
的指向(即函數(shù)執(zhí)行時(shí)所在的作用域),然后在所指定的作用域中,調(diào)用該函數(shù)。
var obj = {};
var f = function () {
return this;
};
f() === this // true
f.call(obj) === obj // true
上面代碼中,在全局環(huán)境運(yùn)行函數(shù)f
時(shí),this
指向全局環(huán)境;call
方法可以改變this
的指向,指定this
指向?qū)ο?code class="highlighter-rouge">obj,然后在對(duì)象obj
的作用域中運(yùn)行函數(shù)f
。
call
方法的參數(shù),應(yīng)該是一個(gè)對(duì)象。如果參數(shù)為空、null
和undefined
,則默認(rèn)傳入全局對(duì)象。
var n = 123;
var obj = { n: 456 };
function a() {
console.log(this.n);
}
a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456
上面代碼中,a
函數(shù)中的this
關(guān)鍵字,如果指向全局對(duì)象,返回結(jié)果為123
。如果使用call
方法將this
關(guān)鍵字指向obj
對(duì)象,返回結(jié)果為456
。可以看到,如果call
方法沒(méi)有參數(shù),或者參數(shù)為null
或undefined
,則等同于指向全局對(duì)象。
如果call
方法的參數(shù)是一個(gè)原始值,那么這個(gè)原始值會(huì)自動(dòng)轉(zhuǎn)成對(duì)應(yīng)的包裝對(duì)象,然后傳入call
方法。
var f = function () {
return this;
};
f.call(5)
// Number {[[PrimitiveValue]]: 5}
上面代碼中,call
的參數(shù)為5
,不是對(duì)象,會(huì)被自動(dòng)轉(zhuǎn)成包裝對(duì)象(Number
的實(shí)例),綁定f
內(nèi)部的this
。
call
方法還可以接受多個(gè)參數(shù)。
func.call(thisValue, arg1, arg2, ...)
call
的第一個(gè)參數(shù)就是this
所要指向的那個(gè)對(duì)象,后面的參數(shù)則是函數(shù)調(diào)用時(shí)所需的參數(shù)。
function add(a, b) {
return a + b;
}
add.call(this, 1, 2) // 3
上面代碼中,call
方法指定函數(shù)add
內(nèi)部的this
綁定當(dāng)前環(huán)境(對(duì)象),并且參數(shù)為1
和2
,因此函數(shù)add
運(yùn)行后得到3
。
call
方法的一個(gè)應(yīng)用是調(diào)用對(duì)象的原生方法。
var obj = {};
obj.hasOwnProperty('toString') // false
// 覆蓋掉繼承的 hasOwnProperty 方法
obj.hasOwnProperty = function () {
return true;
};
obj.hasOwnProperty('toString') // true
Object.prototype.hasOwnProperty.call(obj, 'toString') // false
上面代碼中,hasOwnProperty
是obj
對(duì)象繼承的方法,如果這個(gè)方法一旦被覆蓋,就不會(huì)得到正確結(jié)果。call
方法可以解決這個(gè)問(wèn)題,它將hasOwnProperty
方法的原始定義放到obj
對(duì)象上執(zhí)行,這樣無(wú)論obj
上有沒(méi)有同名方法,都不會(huì)影響結(jié)果。
apply
方法的作用與call
方法類似,也是改變this
指向,然后再調(diào)用該函數(shù)。唯一的區(qū)別就是,它接收一個(gè)數(shù)組作為函數(shù)執(zhí)行時(shí)的參數(shù),使用格式如下。
func.apply(thisValue, [arg1, arg2, ...])
apply
方法的第一個(gè)參數(shù)也是this
所要指向的那個(gè)對(duì)象,如果設(shè)為null或undefined,則等同于指定全局對(duì)象。第二個(gè)參數(shù)則是一個(gè)數(shù)組,該數(shù)組的所有成員依次作為參數(shù),傳入原函數(shù)。原函數(shù)的參數(shù),在call
方法中必須一個(gè)個(gè)添加,但是在apply
方法中,必須以數(shù)組形式添加。
請(qǐng)看下面的例子。
function f(x,y){
console.log(x+y);
}
f.call(null,1,1) // 2
f.apply(null,[1,1]) // 2
上面的f函數(shù)本來(lái)接受兩個(gè)參數(shù),使用apply方法以后,就變成可以接受一個(gè)數(shù)組作為參數(shù)。
利用這一點(diǎn),可以做一些有趣的應(yīng)用。
(1)找出數(shù)組最大元素
JavaScript不提供找出數(shù)組最大元素的函數(shù)。結(jié)合使用apply方法和Math.max方法,就可以返回?cái)?shù)組的最大元素。
var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a)
// 15
(2)將數(shù)組的空元素變?yōu)?code class="highlighter-rouge">undefined
通過(guò)apply
方法,利用Array構(gòu)造函數(shù)將數(shù)組的空元素變成undefined。
Array.apply(null, ["a",,"b"])
// [ 'a', undefined, 'b' ]
空元素與undefined
的差別在于,數(shù)組的forEach
方法會(huì)跳過(guò)空元素,但是不會(huì)跳過(guò)undefined
。因此,遍歷內(nèi)部元素的時(shí)候,會(huì)得到不同的結(jié)果。
var a = ['a', , 'b'];
function print(i) {
console.log(i);
}
a.forEach(print)
// a
// b
Array.apply(null, a).forEach(print)
// a
// undefined
// b
(3)轉(zhuǎn)換類似數(shù)組的對(duì)象
另外,利用數(shù)組對(duì)象的slice
方法,可以將一個(gè)類似數(shù)組的對(duì)象(比如arguments
對(duì)象)轉(zhuǎn)為真正的數(shù)組。
Array.prototype.slice.apply({0:1,length:1})
// [1]
Array.prototype.slice.apply({0:1})
// []
Array.prototype.slice.apply({0:1,length:2})
// [1, undefined]
Array.prototype.slice.apply({length:1})
// [undefined]
上面代碼的apply
方法的參數(shù)都是對(duì)象,但是返回結(jié)果都是數(shù)組,這就起到了將對(duì)象轉(zhuǎn)成數(shù)組的目的。從上面代碼可以看到,這個(gè)方法起作用的前提是,被處理的對(duì)象必須有l(wèi)ength屬性,以及相對(duì)應(yīng)的數(shù)字鍵。
(4)綁定回調(diào)函數(shù)的對(duì)象
上一節(jié)按鈕點(diǎn)擊事件的例子,可以改寫成
var o = new Object();
o.f = function () {
console.log(this === o);
}
var f = function (){
o.f.apply(o);
// 或者 o.f.call(o);
};
$('#button').on('click', f);
點(diǎn)擊按鈕以后,控制臺(tái)將會(huì)顯示true
。由于apply
方法(或者call
方法)不僅綁定函數(shù)執(zhí)行時(shí)所在的對(duì)象,還會(huì)立即執(zhí)行函數(shù),因此不得不把綁定語(yǔ)句寫在一個(gè)函數(shù)體內(nèi)。更簡(jiǎn)潔的寫法是采用下面介紹的bind
方法。
bind
方法用于將函數(shù)體內(nèi)的this
綁定到某個(gè)對(duì)象,然后返回一個(gè)新函數(shù)。
var d = new Date();
d.getTime() // 1481869925657
var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.
上面代碼中,我們將d.getTime
方法賦給變量print
,然后調(diào)用print
就報(bào)錯(cuò)了。這是因?yàn)?code class="highlighter-rouge">getTime方法內(nèi)部的this
,綁定Date
對(duì)象的實(shí)例,賦給變量print
以后,內(nèi)部的this
已經(jīng)不指向Date
對(duì)象的實(shí)例了。
bind
方法可以解決這個(gè)問(wèn)題,讓log
方法綁定console
對(duì)象。
var print = d.getTime.bind(d);
print() // 1481869925657
上面代碼中,bind
方法將getTime
方法內(nèi)部的this
綁定到d
對(duì)象,這時(shí)就可以安全地將這個(gè)方法賦值給其他變量了。
下面是一個(gè)更清晰的例子。
var counter = {
count: 0,
inc: function () {
this.count++;
}
};
counter.count // 0
counter.inc()
counter.count // 1
上面代碼中,counter.inc
內(nèi)部的this
,默認(rèn)指向counter
對(duì)象。如果將這個(gè)方法賦值給另一個(gè)變量,就會(huì)出錯(cuò)。
var counter = {
count: 0,
inc: function () {
this.count++;
}
};
var func = counter.inc;
func();
counter.count // 0
count // NaN
上面代碼中,函數(shù)func
是在全局環(huán)境中運(yùn)行的,這時(shí)inc
內(nèi)部的this
指向頂層對(duì)象window
,所以counter.count
是不會(huì)變的,反而創(chuàng)建了一個(gè)全局變量count
。因?yàn)?code class="highlighter-rouge">window.count原來(lái)等于undefined
,進(jìn)行遞增運(yùn)算后undefined++
就等于NaN
。
為了解決這個(gè)問(wèn)題,可以使用bind
方法,將inc
內(nèi)部的this
綁定到counter
對(duì)象。
var func = counter.inc.bind(counter);
func();
counter.count // 1
上面代碼中,bind
方法將inc
方法綁定到counter
以后,再運(yùn)行func
就會(huì)得到正確結(jié)果。
this
綁定到其他對(duì)象也是可以的。
var obj = {
count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101
上面代碼中,bind
方法將inc
方法內(nèi)部的this
,綁定到obj
對(duì)象。結(jié)果調(diào)用func
函數(shù)以后,遞增的就是obj
內(nèi)部的count
屬性。
bind
比call
方法和apply
方法更進(jìn)一步的是,除了綁定this
以外,還可以綁定原函數(shù)的參數(shù)。
var add = function (x, y) {
return x * this.m + y * this.n;
}
var obj = {
m: 2,
n: 2
};
var newAdd = add.bind(obj, 5);
newAdd(5)
// 20
上面代碼中,bind
方法除了綁定this
對(duì)象,還將add
函數(shù)的第一個(gè)參數(shù)x
綁定成5
,然后返回一個(gè)新函數(shù)newAdd
,這個(gè)函數(shù)只要再接受一個(gè)參數(shù)y
就能運(yùn)行了。
如果bind
方法的第一個(gè)參數(shù)是null
或undefined
,等于將this
綁定到全局對(duì)象,函數(shù)運(yùn)行時(shí)this
指向頂層對(duì)象(在瀏覽器中為window
)。
function add(x, y) {
return x + y;
}
var plus5 = add.bind(null, 5);
plus5(10) // 15
上面代碼中,函數(shù)add
內(nèi)部并沒(méi)有this
,使用bind
方法的主要目的是綁定參數(shù)x
,以后每次運(yùn)行新函數(shù)plus5
,就只需要提供另一個(gè)參數(shù)y
就夠了。而且因?yàn)?code class="highlighter-rouge">add內(nèi)部沒(méi)有this
,所以bind
的第一個(gè)參數(shù)是null
,不過(guò)這里如果是其他對(duì)象,也沒(méi)有影響。
對(duì)于那些不支持bind
方法的老式瀏覽器,可以自行定義bind
方法。
if(!('bind' in Function.prototype)){
Function.prototype.bind = function(){
var fn = this;
var context = arguments[0];
var args = Array.prototype.slice.call(arguments, 1);
return function(){
return fn.apply(context, args);
}
}
}
bind
方法有一些使用注意點(diǎn)。
(1)每一次返回一個(gè)新函數(shù)
bind
方法每運(yùn)行一次,就返回一個(gè)新函數(shù),這會(huì)產(chǎn)生一些問(wèn)題。比如,監(jiān)聽事件的時(shí)候,不能寫成下面這樣。
element.addEventListener('click', o.m.bind(o));
上面代碼中,click
事件綁定bind
方法生成的一個(gè)匿名函數(shù)。這樣會(huì)導(dǎo)致無(wú)法取消綁定,所以,下面的代碼是無(wú)效的。
element.removeEventListener('click', o.m.bind(o));
正確的方法是寫成下面這樣:
var listener = o.m.bind(o);
element.addEventListener('click', listener);
// ...
element.removeEventListener('click', listener);
(2)結(jié)合回調(diào)函數(shù)使用
回調(diào)函數(shù)是JavaScript最常用的模式之一,但是一個(gè)常見的錯(cuò)誤是,將包含this
的方法直接當(dāng)作回調(diào)函數(shù)。
var counter = {
count: 0,
inc: function () {
'use strict';
this.count++;
}
};
function callIt(callback) {
callback();
}
callIt(counter.inc)
// TypeError: Cannot read property 'count' of undefined
上面代碼中,counter.inc
方法被當(dāng)作回調(diào)函數(shù),傳入了callIt
,調(diào)用時(shí)其內(nèi)部的this
指向callIt
運(yùn)行時(shí)所在的對(duì)象,即頂層對(duì)象window
,所以得不到預(yù)想結(jié)果。注意,上面的counter.inc
方法內(nèi)部使用了嚴(yán)格模式,在該模式下,this
指向頂層對(duì)象時(shí)會(huì)報(bào)錯(cuò),一般模式不會(huì)。
解決方法就是使用bind
方法,將counter.inc
綁定counter
。
callIt(counter.inc.bind(counter));
counter.count // 1
還有一種情況比較隱蔽,就是某些數(shù)組方法可以接受一個(gè)函數(shù)當(dāng)作參數(shù)。這些函數(shù)內(nèi)部的this
指向,很可能也會(huì)出錯(cuò)。
var obj = {
name: '張三',
times: [1, 2, 3],
print: function () {
this.times.forEach(function (n) {
console.log(this.name);
});
}
};
obj.print()
// 沒(méi)有任何輸出
上面代碼中,obj.print
內(nèi)部this.times
的this
是指向obj
的,這個(gè)沒(méi)有問(wèn)題。但是,forEach
方法的回調(diào)函數(shù)內(nèi)部的this.name
卻是指向全局對(duì)象,導(dǎo)致沒(méi)有辦法取到值。稍微改動(dòng)一下,就可以看得更清楚。
obj.print = function () {
this.times.forEach(function (n) {
console.log(this === window);
});
};
obj.print()
// true
// true
// true
解決這個(gè)問(wèn)題,也是通過(guò)bind
方法綁定this
。
obj.print = function () {
this.times.forEach(function (n) {
console.log(this.name);
}.bind(this));
};
obj.print()
// 張三
// 張三
// 張三
(3)結(jié)合call
方法使用
利用bind
方法,可以改寫一些JavaScript原生方法的使用形式,以數(shù)組的slice
方法為例。
[1, 2, 3].slice(0, 1)
// [1]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 1)
// [1]
上面的代碼中,數(shù)組的slice方法從[1, 2, 3]
里面,按照指定位置和長(zhǎng)度切分出另一個(gè)數(shù)組。這樣做的本質(zhì)是在[1, 2, 3]
上面調(diào)用Array.prototype.slice
方法,因此可以用call
方法表達(dá)這個(gè)過(guò)程,得到同樣的結(jié)果。
call
方法實(shí)質(zhì)上是調(diào)用Function.prototype.call
方法,因此上面的表達(dá)式可以用bind
方法改寫。
var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1) // [1]
可以看到,利用bind方法,將[1, 2, 3].slice(0, 1)
變成了slice([1, 2, 3], 0, 1)
的形式。這種形式的改變還可以用于其他數(shù)組方法。
var push = Function.prototype.call.bind(Array.prototype.push);
var pop = Function.prototype.call.bind(Array.prototype.pop);
var a = [1 ,2 ,3];
push(a, 4)
a // [1, 2, 3, 4]
pop(a)
a // [1, 2, 3]
如果再進(jìn)一步,將Function.prototype.call
方法綁定到Function.prototype.bind
對(duì)象,就意味著bind
的調(diào)用形式也可以被改寫。
function f() {
console.log(this.v);
}
var o = { v: 123 };
var bind = Function.prototype.call.bind(Function.prototype.bind);
bind(f, o)() // 123
上面代碼表示,將Function.prototype.call
方法綁定Function.prototype.bind
以后,bind
方法的使用形式從f.bind(o)
,變成了bind(f, o)
。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: