[[404584]]

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

15.1 call()

15.1.1 基礎(chǔ)

call() 方法使用一個指定的 this 值和單獨給出的一個或多個參數(shù)來調(diào)用一個函數(shù)。其返回值是使用調(diào)用者提供的this值和參數(shù)調(diào)用該函數(shù)的返回值，若該方法沒有返回值，則返回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 實現(xiàn)

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

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

Function.prototype.myCall = function (context, ...args) { 
    // 獲取第一個參數(shù)（注意第一個參數(shù)為null或undefined時，this指向window），構(gòu)建對象 
    context = context ? Object(context) : window; 
    // 將對應(yīng)函數(shù)傳入該對象中 
    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)用一個具有給定this值的函數(shù)，以及以一個數(shù)組(或類數(shù)組對象)的形式提供的參數(shù)。其返回值是指定this值和參數(shù)的函數(shù)的結(jié)果。call() 和 apply()的區(qū)別是call()方法接受的是參數(shù)列表，而apply()方法接受的是一個參數(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 實現(xiàn)

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

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)建一個新的函數(shù)，在 bind() 被調(diào)用時，這個新函數(shù)的 this 被指定為 bind() 的第一個參數(shù)，而其余參數(shù)將作為新函數(shù)的參數(shù)，供調(diào)用時使用。該函數(shù)的返回值是一個原函數(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 實現(xiàn)

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

1. 能夠改變this指向;
2. 返回的是一個函數(shù);
3. 能夠接受多個參數(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; 
    // 定義一個中裝函數(shù) 
    const fNOP = function() {}; 
    const fBound = function(...fBoundArgs) { 
        // 利用apply改變this指向 
        // 接受多個參數(shù)+支持柯里化形式傳參 
        // 當(dāng)返回值通過new調(diào)用時，this指向當(dāng)前實例 （因為this是當(dāng)前實例，實例的隱士原型上有fNOP的實例（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; 
    } 
    // 通過原型的方式繼承調(diào)用函數(shù)的原型 
    fBound.prototype = new fNOP(); 
 
    return fBound; 
} 

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