bind、apply與call三者區別

摘要： 在JS中，這三者都是用來改變函式的this物件的指向的，他們有什麼樣的區別呢。 在說區別之前還是先總結一下三者的相似之處： 都是用來改變函式的this物件的指向的。 第一個引數都是this要指向的物件。 都可以利用後續引數傳參。 ...

在JS中，這三者都是用來改變函式的this物件的指向的，他們有什麼樣的區別呢。

在說區別之前還是先總結一下三者的相似之處：

1. 都是用來改變函式的this物件的指向的。
2. 第一個引數都是this要指向的物件。
3. 都可以利用後續引數傳參。

那麼他們的區別在哪裡的，先看一個例子。

var xw = {
name : "小王",
gender : "男",
age : 24,
say : function() {
alert(this.name + " , " + this.gender + " ,今年" + this.age);
}
}
var xh = {
name : "小紅",
gender : "女",
age : 18
}
xw.say();

那麼如何用xw的say方法來顯示xh的資料呢。

對於call可以這樣：

xw.say.call(xh);

對於apply可以這樣：

xw.say.apply(xh);

而對於bind來說需要這樣：

xw.say.bind(xh)();

總之：bind與apply、call最大的區別就是：bind不會立即呼叫，其他兩個會立即呼叫，apply與call的區別是apply第二個是引數組，但是在確定的引數下，還是最好用call，call的效果會更高，但是在函式的延展性上使用apply更好

手寫一個call方法

考慮兩點

第一個引數為undefined或null的時候，那麼會轉變為window

改變了this執行，讓新的物件可以執行該函式。

Function.prototype.myCall = function(context) {
// 判斷是否是undefined和null
if (typeof context === 'undefined' || context === null) {
context = window
}
context.fn = this
let args = [...arguments].slice(1)
let result = context.fn(...args)
delete context.fn
return result
}

apply的實現

Function.prototype.myApply = function(context) {
if (typeof context === 'undefined' || context === null) {
context = window
}
context.fn = this
let args = arguments[1]
let result
if (args) {
result = context.fn(...args)
} else {
result = context.fn()
}
delete context.fn
return result
}

bind實現

這裡需要注意下，因為bind轉換後的函式可以作為建構函式使用，此時this應該指向構造出的例項，而bind函式繫結的第一個引數。

Function.prototype.myBind = function(context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
let _this = this
let args = [...arguments].slice(1)
return function F() {
// 判斷是否被當做建構函式使用
if (this instanceof F) {
return _this.apply(this, args.concat([...arguments]))
}
return _this.apply(context, args.concat([...arguments]))
}
}