[[404584]]

在百題斬js中的這些“this”指向都值得了解中已經(jīng)簡(jiǎn)要概述了call、apply、bind三個(gè)方法，這三者作用是相同的，均可以改變this指向，從而讓某對(duì)象可以調(diào)用自身不具備的方法，本節(jié)將深入理解這三者的實(shí)現(xiàn)原理。

15.1 call()

15.1.1 基礎(chǔ)

call() 方法使用一個(gè)指定的 this 值和單獨(dú)給出的一個(gè)或多個(gè)參數(shù)來(lái)調(diào)用一個(gè)函數(shù)。其返回值是使用調(diào)用者提供的this值和參數(shù)調(diào)用該函數(shù)的返回值，若該方法沒(méi)有返回值，則返回undefined。

基本用法：

function.call(thisArg, arg1, arg2, ...) 

小試牛刀

function method(val1, val2) { 
    return this.a + this.b + val1 + val2; 
} 
 
const obj = { 
    a: 1, 
    b: 2 
}; 
 
console.log(method.call(obj, 3, 4)); // 10 

15.1.2 實(shí)現(xiàn)

實(shí)現(xiàn)一個(gè)call函數(shù)，將通過(guò)以下幾個(gè)步驟：

1. 獲取第一個(gè)參數(shù)(注意第一個(gè)參數(shù)為null或undefined時(shí)，this指向window)，構(gòu)建對(duì)象
2. 將對(duì)應(yīng)函數(shù)傳入該對(duì)象中
3. 獲取參數(shù)并執(zhí)行相應(yīng)函數(shù)
4. 刪除該對(duì)象中函數(shù)，消除副作用
5. 返回結(jié)果

Function.prototype.myCall = function (context, ...args) { 
    // 獲取第一個(gè)參數(shù)（注意第一個(gè)參數(shù)為null或undefined時(shí)，this指向window），構(gòu)建對(duì)象 
    context = context ? Object(context) : window; 
    // 將對(duì)應(yīng)函數(shù)傳入該對(duì)象中 
    context.fn = this; 
    // 獲取參數(shù)并執(zhí)行相應(yīng)函數(shù) 
    let result = context.fn(...args); 
    // 消除副作用 
    delete context.fn; 
    // 返回結(jié)果 
    return result; 
} 
// …… 
console.log(method.myCall(obj, 3, 4)); // 10 

15.2 apply()

15.2.1 基礎(chǔ)

apply() 方法調(diào)用一個(gè)具有給定this值的函數(shù)，以及以一個(gè)數(shù)組(或類(lèi)數(shù)組對(duì)象)的形式提供的參數(shù)。其返回值是指定this值和參數(shù)的函數(shù)的結(jié)果。call() 和 apply()的區(qū)別是call()方法接受的是參數(shù)列表，而apply()方法接受的是一個(gè)參數(shù)數(shù)組;

基本用法

func.apply(thisArg, [argsArray]) 

小試牛刀

function method(val1, val2) { 
    return this.a + this.b + val1 + val2; 
} 
 
const obj = { 
    a: 1, 
    b: 2 
}; 
 
console.log(method.apply(obj, [3, 4])); // 10 

15.2.2 實(shí)現(xiàn)

apply和call的區(qū)別主要是參數(shù)的不同，所以其實(shí)現(xiàn)步驟的call大體類(lèi)似，如下所示：

Function.prototype.myApply = function (context, arr) { 
    context = context ? Object(context) : window; 
    context.fn = this; 
 
    let result = arr ? context.fn(...arr) : context.fun(); 
 
    delete context.fn; 
 
    return result; 
} 
// …… 
console.log(method.myApply(obj, [3, 4])); // 10 

15.3 bind()

15.3.1 基礎(chǔ)

bind() 方法創(chuàng)建一個(gè)新的函數(shù)，在 bind() 被調(diào)用時(shí)，這個(gè)新函數(shù)的 this 被指定為 bind() 的第一個(gè)參數(shù)，而其余參數(shù)將作為新函數(shù)的參數(shù)，供調(diào)用時(shí)使用。該函數(shù)的返回值是一個(gè)原函數(shù)的拷貝，并擁有指定的this值和初始參數(shù)。

基本用法

function.bind(thisArg[, arg1[, arg2[, ...]]]) 

小試牛刀

function method(val1, val2) { 
    return this.a + this.b + val1 + val2; 
} 
 
const obj = { 
    a: 1, 
    b: 2 
}; 
 
const bindMethod = method.bind(obj, 3, 4); 
console.log(bindMethod()); // 10 

15.3.2 實(shí)現(xiàn)

實(shí)現(xiàn)一個(gè)bind函數(shù)相對(duì)較復(fù)雜一些，應(yīng)該注意以下幾點(diǎn)：

1. 能夠改變this指向;
2. 返回的是一個(gè)函數(shù);
3. 能夠接受多個(gè)參數(shù);
4. 支持柯里化形式傳參 fun(arg1)(arg2);
5. 獲取到調(diào)用bind()返回值后，若使用new調(diào)用(當(dāng)做構(gòu)造函數(shù))，bind()傳入的上下文context失效。

Function.prototype.myBind = function (context, ...args) { 
    if (typeof(this) !== 'function') { 
        throw new TypeError('The bound object needs to be a function'); 
    } 
 
    const self = this; 
    // 定義一個(gè)中裝函數(shù) 
    const fNOP = function() {}; 
    const fBound = function(...fBoundArgs) { 
        // 利用apply改變this指向 
        // 接受多個(gè)參數(shù)+支持柯里化形式傳參 
        // 當(dāng)返回值通過(guò)new調(diào)用時(shí)，this指向當(dāng)前實(shí)例 （因?yàn)閠his是當(dāng)前實(shí)例，實(shí)例的隱士原型上有fNOP的實(shí)例（fnop）；fnop instanceof fNOP為true） 
        return self.apply(this instanceof fNOP ? this : context, [...args, ...fBoundArgs]); 
    } 
 
    // 將調(diào)用函數(shù)的原型賦值到中轉(zhuǎn)函數(shù)的原型上 
    if (this.prototype) { 
        fNOP.prototype = this.prototype; 
    } 
    // 通過(guò)原型的方式繼承調(diào)用函數(shù)的原型 
    fBound.prototype = new fNOP(); 
 
    return fBound; 
} 

本文轉(zhuǎn)載自微信公眾號(hào)「執(zhí)鳶者」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系執(zhí)鳶者公眾號(hào)。