this
關鍵字是一個非常重要的語法點。毫不夸張地說,不理解它的含義,大部分開發(fā)任務都無法完成。
前一章已經(jīng)提到,this
可以用在構造函數(shù)之中,表示實例對象。除此之外,this
還可以用在別的場合。但不管是什么場合,this
都有一個共同點:它總是返回一個對象。
簡單說,this
就是屬性或方法“當前”所在的對象。
this.property
上面代碼中,this
就代表property
屬性當前所在的對象。
下面是一個實際的例子。
var person = {
name: '張三',
describe: function () {
return '姓名:'+ this.name;
}
};
person.describe()
// "姓名:張三"
上面代碼中,this.name
表示name
屬性所在的那個對象。由于this.name
是在describe
方法中調用,而describe
方法所在的當前對象是person
,因此this
指向person
,this.name
就是person.name
。
由于對象的屬性可以賦給另一個對象,所以屬性所在的當前對象是可變的,即this
的指向是可變的。
var A = {
name: '張三',
describe: function () {
return '姓名:'+ this.name;
}
};
var B = {
name: '李四'
};
B.describe = A.describe;
B.describe()
// "姓名:李四"
上面代碼中,A.describe
屬性被賦給B
,于是B.describe
就表示describe
方法所在的當前對象是B
,所以this.name
就指向B.name
。
稍稍重構這個例子,this
的動態(tài)指向就能看得更清楚。
function f() {
return '姓名:'+ this.name;
}
var A = {
name: '張三',
describe: f
};
var B = {
name: '李四',
describe: f
};
A.describe() // "姓名:張三"
B.describe() // "姓名:李四"
上面代碼中,函數(shù)f
內部使用了this
關鍵字,隨著f
所在的對象不同,this
的指向也不同。
只要函數(shù)被賦給另一個變量,this
的指向就會變。
var A = {
name: '張三',
describe: function () {
return '姓名:'+ this.name;
}
};
var name = '李四';
var f = A.describe;
f() // "姓名:李四"
上面代碼中,A.describe
被賦值給變量f
,內部的this
就會指向f
運行時所在的對象(本例是頂層對象)。
再看一個網(wǎng)頁編程的例子。
<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>
上面代碼是一個文本輸入框,每當用戶輸入一個值,就會調用onChange
回調函數(shù),驗證這個值是否在指定范圍。瀏覽器會向回調函數(shù)傳入當前對象,因此this
就代表傳入當前對象(即文本框),然后就可以從this.value
上面讀到用戶的輸入值。
總結一下,JavaScript 語言之中,一切皆對象,運行環(huán)境也是對象,所以函數(shù)都是在某個對象之中運行,this
就是函數(shù)運行時所在的對象(環(huán)境)。這本來并不會讓用戶糊涂,但是 JavaScript 支持運行環(huán)境動態(tài)切換,也就是說,this
的指向是動態(tài)的,沒有辦法事先確定到底指向哪個對象,這才是最讓初學者感到困惑的地方。
JavaScript 語言之所以有 this 的設計,跟內存里面的數(shù)據(jù)結構有關系。
var obj = { foo: 5 };
上面的代碼將一個對象賦值給變量obj
。JavaScript 引擎會先在內存里面,生成一個對象{ foo: 5 }
,然后把這個對象的內存地址賦值給變量obj
。也就是說,變量obj
是一個地址(reference)。后面如果要讀取obj.foo
,引擎先從obj
拿到內存地址,然后再從該地址讀出原始的對象,返回它的foo
屬性。
原始的對象以字典結構保存,每一個屬性名都對應一個屬性描述對象。舉例來說,上面例子的foo
屬性,實際上是以下面的形式保存的。
{
foo: {
[[value]]: 5
[[writable]]: true
[[enumerable]]: true
[[configurable]]: true
}
}
注意,foo
屬性的值保存在屬性描述對象的value
屬性里面。
這樣的結構是很清晰的,問題在于屬性的值可能是一個函數(shù)。
var obj = { foo: function () {} };
這時,引擎會將函數(shù)單獨保存在內存中,然后再將函數(shù)的地址賦值給foo
屬性的value
屬性。
{
foo: {
[[value]]: 函數(shù)的地址
...
}
}
由于函數(shù)是一個單獨的值,所以它可以在不同的環(huán)境(上下文)執(zhí)行。
var f = function () {};
var obj = { f: f };
// 單獨執(zhí)行
f()
// obj 環(huán)境執(zhí)行
obj.f()
JavaScript 允許在函數(shù)體內部,引用當前環(huán)境的其他變量。
var f = function () {
console.log(x);
};
上面代碼中,函數(shù)體里面使用了變量x
。該變量由運行環(huán)境提供。
現(xiàn)在問題就來了,由于函數(shù)可以在不同的運行環(huán)境執(zhí)行,所以需要有一種機制,能夠在函數(shù)體內部獲得當前的運行環(huán)境(context)。所以,this
就出現(xiàn)了,它的設計目的就是在函數(shù)體內部,指代函數(shù)當前的運行環(huán)境。
var f = function () {
console.log(this.x);
}
上面代碼中,函數(shù)體里面的this.x
就是指當前運行環(huán)境的x
。
var f = function () {
console.log(this.x);
}
var x = 1;
var obj = {
f: f,
x: 2,
};
// 單獨執(zhí)行
f() // 1
// obj 環(huán)境執(zhí)行
obj.f() // 2
上面代碼中,函數(shù)f
在全局環(huán)境執(zhí)行,this.x
指向全局環(huán)境的x
;在obj
環(huán)境執(zhí)行,this.x
指向obj.x
。
this
主要有以下幾個使用場合。
(1)全局環(huán)境
全局環(huán)境使用this
,它指的就是頂層對象window
。
this === window // true
function f() {
console.log(this === window);
}
f() // true
上面代碼說明,不管是不是在函數(shù)內部,只要是在全局環(huán)境下運行,this
就是指頂層對象window
。
(2)構造函數(shù)
構造函數(shù)中的this
,指的是實例對象。
var Obj = function (p) {
this.p = p;
};
上面代碼定義了一個構造函數(shù)Obj
。由于this
指向實例對象,所以在構造函數(shù)內部定義this.p
,就相當于定義實例對象有一個p
屬性。
var o = new Obj('Hello World!');
o.p // "Hello World!"
(3)對象的方法
如果對象的方法里面包含this
,this
的指向就是方法運行時所在的對象。該方法賦值給另一個對象,就會改變this
的指向。
但是,這條規(guī)則很不容易把握。請看下面的代碼。
var obj ={
foo: function () {
console.log(this);
}
};
obj.foo() // obj
上面代碼中,obj.foo
方法執(zhí)行時,它內部的this
指向obj
。
但是,下面這幾種用法,都會改變this
的指向。
// 情況一
(obj.foo = obj.foo)() // window
// 情況二
(false || obj.foo)() // window
// 情況三
(1, obj.foo)() // window
上面代碼中,obj.foo
就是一個值。這個值真正調用的時候,運行環(huán)境已經(jīng)不是obj
了,而是全局環(huán)境,所以this
不再指向obj
。
可以這樣理解,JavaScript 引擎內部,obj
和obj.foo
儲存在兩個內存地址,稱為地址一和地址二。obj.foo()
這樣調用時,是從地址一調用地址二,因此地址二的運行環(huán)境是地址一,this
指向obj
。但是,上面三種情況,都是直接取出地址二進行調用,這樣的話,運行環(huán)境就是全局環(huán)境,因此this
指向全局環(huán)境。上面三種情況等同于下面的代碼。
// 情況一
(obj.foo = function () {
console.log(this);
})()
// 等同于
(function () {
console.log(this);
})()
// 情況二
(false || function () {
console.log(this);
})()
// 情況三
(1, function () {
console.log(this);
})()
如果this
所在的方法不在對象的第一層,這時this
只是指向當前一層的對象,而不會繼承更上面的層。
var a = {
p: 'Hello',
b: {
m: function() {
console.log(this.p);
}
}
};
a.b.m() // undefined
上面代碼中,a.b.m
方法在a
對象的第二層,該方法內部的this
不是指向a
,而是指向a.b
,因為實際執(zhí)行的是下面的代碼。
var b = {
m: function() {
console.log(this.p);
}
};
var a = {
p: 'Hello',
b: b
};
(a.b).m() // 等同于 b.m()
如果要達到預期效果,只有寫成下面這樣。
var a = {
b: {
m: function() {
console.log(this.p);
},
p: 'Hello'
}
};
如果這時將嵌套對象內部的方法賦值給一個變量,this
依然會指向全局對象。
var a = {
b: {
m: function() {
console.log(this.p);
},
p: 'Hello'
}
};
var hello = a.b.m;
hello() // undefined
上面代碼中,m
是多層對象內部的一個方法。為求簡便,將其賦值給hello
變量,結果調用時,this
指向了頂層對象。為了避免這個問題,可以只將m
所在的對象賦值給hello
,這樣調用時,this
的指向就不會變。
var hello = a.b;
hello.m() // Hello
由于this
的指向是不確定的,所以切勿在函數(shù)中包含多層的this
。
var o = {
f1: function () {
console.log(this);
var f2 = function () {
console.log(this);
}();
}
}
o.f1()
// Object
// Window
上面代碼包含兩層this
,結果運行后,第一層指向對象o
,第二層指向全局對象,因為實際執(zhí)行的是下面的代碼。
var temp = function () {
console.log(this);
};
var o = {
f1: function () {
console.log(this);
var f2 = temp();
}
}
一個解決方法是在第二層改用一個指向外層this
的變量。
var o = {
f1: function() {
console.log(this);
var that = this;
var f2 = function() {
console.log(that);
}();
}
}
o.f1()
// Object
// Object
上面代碼定義了變量that
,固定指向外層的this
,然后在內層使用that
,就不會發(fā)生this
指向的改變。
事實上,使用一個變量固定this
的值,然后內層函數(shù)調用這個變量,是非常常見的做法,請務必掌握。
JavaScript 提供了嚴格模式,也可以硬性避免這種問題。嚴格模式下,如果函數(shù)內部的this
指向頂層對象,就會報錯。
var counter = {
count: 0
};
counter.inc = function () {
'use strict';
this.count++
};
var f = counter.inc;
f()
// TypeError: Cannot read property 'count' of undefined
上面代碼中,inc
方法通過'use strict'
聲明采用嚴格模式,這時內部的this
一旦指向頂層對象,就會報錯。
數(shù)組的map
和foreach
方法,允許提供一個函數(shù)作為參數(shù)。這個函數(shù)內部不應該使用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
方法的回調函數(shù)中的this
,其實是指向window
對象,因此取不到o.v
的值。原因跟上一段的多層this
是一樣的,就是內層的this
不指向外部,而指向頂層對象。
解決這個問題的一種方法,就是前面提到的,使用中間變量固定this
。
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
當作foreach
方法的第二個參數(shù),固定它的運行環(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
回調函數(shù)中的this
往往會改變指向,最好避免使用。
var o = new Object();
o.f = function () {
console.log(this === o);
}
// jQuery 的寫法
$('#button').on('click', o.f);
上面代碼中,點擊按鈕以后,控制臺會顯示false
。原因是此時this
不再指向o
對象,而是指向按鈕的 DOM 對象,因為f
方法是在按鈕對象的環(huán)境中被調用的。這種細微的差別,很容易在編程中忽視,導致難以察覺的錯誤。
為了解決這個問題,可以采用下面的一些方法對this
進行綁定,也就是使得this
固定指向某個對象,減少不確定性。
this
的動態(tài)切換,固然為 JavaScript 創(chuàng)造了巨大的靈活性,但也使得編程變得困難和模糊。有時,需要把this
固定下來,避免出現(xiàn)意想不到的情況。JavaScript 提供了call
、apply
、bind
這三個方法,來切換/固定this
的指向。
函數(shù)實例的call
方法,可以指定函數(shù)內部this
的指向(即函數(shù)執(zhí)行時所在的作用域),然后在所指定的作用域中,調用該函數(shù)。
var obj = {};
var f = function () {
return this;
};
f() === window // true
f.call(obj) === obj // true
上面代碼中,全局環(huán)境運行函數(shù)f
時,this
指向全局環(huán)境(瀏覽器為window
對象);call
方法可以改變this
的指向,指定this
指向對象obj
,然后在對象obj
的作用域中運行函數(shù)f
。
call
方法的參數(shù),應該是一個對象。如果參數(shù)為空、null
和undefined
,則默認傳入全局對象。
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
關鍵字,如果指向全局對象,返回結果為123
。如果使用call
方法將this
關鍵字指向obj
對象,返回結果為456
??梢钥吹?,如果call
方法沒有參數(shù),或者參數(shù)為null
或undefined
,則等同于指向全局對象。
如果call
方法的參數(shù)是一個原始值,那么這個原始值會自動轉成對應的包裝對象,然后傳入call
方法。
var f = function () {
return this;
};
f.call(5)
// Number {[[PrimitiveValue]]: 5}
上面代碼中,call
的參數(shù)為5
,不是對象,會被自動轉成包裝對象(Number
的實例),綁定f
內部的this
。
call
方法還可以接受多個參數(shù)。
func.call(thisValue, arg1, arg2, ...)
call
的第一個參數(shù)就是this
所要指向的那個對象,后面的參數(shù)則是函數(shù)調用時所需的參數(shù)。
function add(a, b) {
return a + b;
}
add.call(this, 1, 2) // 3
上面代碼中,call
方法指定函數(shù)add
內部的this
綁定當前環(huán)境(對象),并且參數(shù)為1
和2
,因此函數(shù)add
運行后得到3
。
call
方法的一個應用是調用對象的原生方法。
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
對象繼承的方法,如果這個方法一旦被覆蓋,就不會得到正確結果。call
方法可以解決這個問題,它將hasOwnProperty
方法的原始定義放到obj
對象上執(zhí)行,這樣無論obj
上有沒有同名方法,都不會影響結果。
apply
方法的作用與call
方法類似,也是改變this
指向,然后再調用該函數(shù)。唯一的區(qū)別就是,它接收一個數(shù)組作為函數(shù)執(zhí)行時的參數(shù),使用格式如下。
func.apply(thisValue, [arg1, arg2, ...])
apply
方法的第一個參數(shù)也是this
所要指向的那個對象,如果設為null
或undefined
,則等同于指定全局對象。第二個參數(shù)則是一個數(shù)組,該數(shù)組的所有成員依次作為參數(shù),傳入原函數(shù)。原函數(shù)的參數(shù),在call
方法中必須一個個添加,但是在apply
方法中,必須以數(shù)組形式添加。
function f(x, y){
console.log(x + y);
}
f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2
上面代碼中,f
函數(shù)本來接受兩個參數(shù),使用apply
方法以后,就變成可以接受一個數(shù)組作為參數(shù)。
利用這一點,可以做一些有趣的應用。
(1)找出數(shù)組最大元素
JavaScript 不提供找出數(shù)組最大元素的函數(shù)。結合使用apply
方法和Math.max
方法,就可以返回數(shù)組的最大元素。
var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15
(2)將數(shù)組的空元素變?yōu)?code>undefined
通過apply
方法,利用Array
構造函數(shù)將數(shù)組的空元素變成undefined
。
Array.apply(null, ['a', ,'b'])
// [ 'a', undefined, 'b' ]
空元素與undefined
的差別在于,數(shù)組的forEach
方法會跳過空元素,但是不會跳過undefined
。因此,遍歷內部元素的時候,會得到不同的結果。
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)轉換類似數(shù)組的對象
另外,利用數(shù)組對象的slice
方法,可以將一個類似數(shù)組的對象(比如arguments
對象)轉為真正的數(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ù)都是對象,但是返回結果都是數(shù)組,這就起到了將對象轉成數(shù)組的目的。從上面代碼可以看到,這個方法起作用的前提是,被處理的對象必須有length
屬性,以及相對應的數(shù)字鍵。
(4)綁定回調函數(shù)的對象
前面的按鈕點擊事件的例子,可以改寫如下。
var o = new Object();
o.f = function () {
console.log(this === o);
}
var f = function (){
o.f.apply(o);
// 或者 o.f.call(o);
};
// jQuery 的寫法
$('#button').on('click', f);
上面代碼中,點擊按鈕以后,控制臺將會顯示true
。由于apply()
方法(或者call()
方法)不僅綁定函數(shù)執(zhí)行時所在的對象,還會立即執(zhí)行函數(shù),因此不得不把綁定語句寫在一個函數(shù)體內。更簡潔的寫法是采用下面介紹的bind()
方法。
bind()
方法用于將函數(shù)體內的this
綁定到某個對象,然后返回一個新函數(shù)。
var d = new Date();
d.getTime() // 1481869925657
var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.
上面代碼中,我們將d.getTime()
方法賦給變量print
,然后調用print()
就報錯了。這是因為getTime()
方法內部的this
,綁定Date
對象的實例,賦給變量print
以后,內部的this
已經(jīng)不指向Date
對象的實例了。
bind()
方法可以解決這個問題。
var print = d.getTime.bind(d);
print() // 1481869925657
上面代碼中,bind()
方法將getTime()
方法內部的this
綁定到d
對象,這時就可以安全地將這個方法賦值給其他變量了。
bind
方法的參數(shù)就是所要綁定this
的對象,下面是一個更清晰的例子。
var counter = {
count: 0,
inc: function () {
this.count++;
}
};
var func = counter.inc.bind(counter);
func();
counter.count // 1
上面代碼中,counter.inc()
方法被賦值給變量func
。這時必須用bind()
方法將inc()
內部的this
,綁定到counter
,否則就會出錯。
this
綁定到其他對象也是可以的。
var counter = {
count: 0,
inc: function () {
this.count++;
}
};
var obj = {
count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101
上面代碼中,bind()
方法將inc()
方法內部的this
,綁定到obj
對象。結果調用func
函數(shù)以后,遞增的就是obj
內部的count
屬性。
bind()
還可以接受更多的參數(shù),將這些參數(shù)綁定原函數(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
對象,還將add()
函數(shù)的第一個參數(shù)x
綁定成5
,然后返回一個新函數(shù)newAdd()
,這個函數(shù)只要再接受一個參數(shù)y
就能運行了。
如果bind()
方法的第一個參數(shù)是null
或undefined
,等于將this
綁定到全局對象,函數(shù)運行時this
指向頂層對象(瀏覽器為window
)。
function add(x, y) {
return x + y;
}
var plus5 = add.bind(null, 5);
plus5(10) // 15
上面代碼中,函數(shù)add()
內部并沒有this
,使用bind()
方法的主要目的是綁定參數(shù)x
,以后每次運行新函數(shù)plus5()
,就只需要提供另一個參數(shù)y
就夠了。而且因為add()
內部沒有this
,所以bind()
的第一個參數(shù)是null
,不過這里如果是其他對象,也沒有影響。
bind()
方法有一些使用注意點。
(1)每一次返回一個新函數(shù)
bind()
方法每運行一次,就返回一個新函數(shù),這會產(chǎn)生一些問題。比如,監(jiān)聽事件的時候,不能寫成下面這樣。
element.addEventListener('click', o.m.bind(o));
上面代碼中,click
事件綁定bind()
方法生成的一個匿名函數(shù)。這樣會導致無法取消綁定,所以下面的代碼是無效的。
element.removeEventListener('click', o.m.bind(o));
正確的方法是寫成下面這樣:
var listener = o.m.bind(o);
element.addEventListener('click', listener);
// ...
element.removeEventListener('click', listener);
(2)結合回調函數(shù)使用
回調函數(shù)是 JavaScript 最常用的模式之一,但是一個常見的錯誤是,將包含this
的方法直接當作回調函數(shù)。解決方法就是使用bind()
方法,將counter.inc()
綁定counter
。
var counter = {
count: 0,
inc: function () {
'use strict';
this.count++;
}
};
function callIt(callback) {
callback();
}
callIt(counter.inc.bind(counter));
counter.count // 1
上面代碼中,callIt()
方法會調用回調函數(shù)。這時如果直接把counter.inc
傳入,調用時counter.inc()
內部的this
就會指向全局對象。使用bind()
方法將counter.inc
綁定counter
以后,就不會有這個問題,this
總是指向counter
。
還有一種情況比較隱蔽,就是某些數(shù)組方法可以接受一個函數(shù)當作參數(shù)。這些函數(shù)內部的this
指向,很可能也會出錯。
var obj = {
name: '張三',
times: [1, 2, 3],
print: function () {
this.times.forEach(function (n) {
console.log(this.name);
});
}
};
obj.print()
// 沒有任何輸出
上面代碼中,obj.print
內部this.times
的this
是指向obj
的,這個沒有問題。但是,forEach()
方法的回調函數(shù)內部的this.name
卻是指向全局對象,導致沒有辦法取到值。稍微改動一下,就可以看得更清楚。
obj.print = function () {
this.times.forEach(function (n) {
console.log(this === window);
});
};
obj.print()
// true
// true
// true
解決這個問題,也是通過bind()
方法綁定this
。
obj.print = function () {
this.times.forEach(function (n) {
console.log(this.name);
}.bind(this));
};
obj.print()
// 張三
// 張三
// 張三
(3)結合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]
里面,按照指定的開始位置和結束位置,切分出另一個數(shù)組。這樣做的本質是在[1, 2, 3]
上面調用Array.prototype.slice()
方法,因此可以用call
方法表達這個過程,得到同樣的結果。
call()
方法實質上是調用Function.prototype.call()
方法,因此上面的表達式可以用bind()
方法改寫。
var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1) // [1]
上面代碼的含義就是,將Array.prototype.slice
變成Function.prototype.call
方法所在的對象,調用時就變成了Array.prototype.slice.call
。類似的寫法還可以用于其他數(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]
如果再進一步,將Function.prototype.call
方法綁定到Function.prototype.bind
對象,就意味著bind
的調用形式也可以被改寫。
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.bind
方法綁定在Function.prototype.call
上面,所以bind
方法就可以直接使用,不需要在函數(shù)實例上使用。
更多建議: