摘要：返回值這段在下方應(yīng)用中有詳細的示例解析。回調(diào)函數(shù)丟失的解決方案綁定回調(diào)函數(shù)的指向這是典型的應(yīng)用場景綁定指向，用做回調(diào)函數(shù)。

函數(shù)原型鏈中的 apply，call 和 bind 方法是 JavaScript 中相當重要的概念，與 this 關(guān)鍵字密切相關(guān)，相當一部分人對它們的理解還是比較淺顯，所謂js基礎(chǔ)扎實，繞不開這些基礎(chǔ)常用的API，這次讓我們來徹底掌握它們吧！

call,apply,bind的基本介紹

call/apply/bind的核心理念：借用方法

call和apply的應(yīng)用場景

bind的應(yīng)用場景

中高級面試題：手寫call/apply、bind

fun.call(thisArg, param1, param2, ...)
fun.apply(thisArg, [param1,param2,...])
fun.bind(thisArg, param1, param2, ...)

call/apply：fun執(zhí)行的結(jié)果
bind：返回fun的拷貝，并擁有指定的this值和初始參數(shù)

thisArg(可選):

fun的this指向thisArg對象

非嚴格模式下：thisArg指定為null，undefined，fun中的this指向window對象.

嚴格模式下：fun的this為undefined

值為原始值(數(shù)字，字符串，布爾值)的this會指向該原始值的自動包裝對象，如 String、Number、Boolean

param1,param2(可選): 傳給fun的參數(shù)。

如果param不傳或為 null/undefined，則表示不需要傳入任何參數(shù).

apply第二個參數(shù)為數(shù)組，數(shù)組內(nèi)的值為傳給fun的參數(shù)。

call、apply和bind是掛在Function對象上的三個方法,只有函數(shù)才有這些方法。

只要是函數(shù)就可以，比如: Object.prototype.toString就是個函數(shù)，我們經(jīng)常看到這樣的用法：Object.prototype.toString.call(data)

改變函數(shù)執(zhí)行時的this指向，目前所有關(guān)于它們的運用，都是基于這一點來進行的。

弄混這兩個API的不在少數(shù)，不要小看這個問題，記住下面的這個方法就好了。

apply是以a開頭，它傳給fun的參數(shù)是Array，也是以a開頭的。

傳給fun的參數(shù)寫法不同：

apply是第2個參數(shù)，這個參數(shù)是一個數(shù)組：傳給fun參數(shù)都寫在數(shù)組中。

call從第2~n的參數(shù)都是傳給fun的。

執(zhí)行：

call/apply改變了函數(shù)的this上下文后馬上執(zhí)行該函數(shù)

bind則是返回改變了上下文后的函數(shù),不執(zhí)行該函數(shù)

返回值:

call/apply 返回fun的執(zhí)行結(jié)果

bind返回fun的拷貝，并指定了fun的this指向，保存了fun的參數(shù)。

返回值這段在下方bind應(yīng)用中有詳細的示例解析。

看到一個非常棒的例子：

生活中：

平時沒時間做飯的我，周末想給孩子燉個腌篤鮮嘗嘗。但是沒有適合的鍋，而我又不想出去買。所以就問鄰居借了一個鍋來用，這樣既達到了目的，又節(jié)省了開支，一舉兩得。

程序中：

A對象有個方法，B對象因為某種原因也需要用到同樣的方法，那么這時候我們是多帶帶為 B 對象擴展一個方法呢，還是借用一下 A 對象的方法呢？

當然是借用 A 對象的方法啦，既達到了目的，又節(jié)省了內(nèi)存。

這就是call/apply/bind的核心理念：借用方法。

借助已實現(xiàn)的方法，改變方法中數(shù)據(jù)的this指向，減少重復(fù)代碼，節(jié)省內(nèi)存。

這些應(yīng)用場景，多加體會就可以發(fā)現(xiàn)它們的理念都是：借用方法

判斷數(shù)據(jù)類型：

Object.prototype.toString用來判斷類型再合適不過，借用它我們幾乎可以判斷所有類型的數(shù)據(jù)：

function isType(data, type) {
    const typeObj = {
        "[object String]": "string",
        "[object Number]": "number",
        "[object Boolean]": "boolean",
        "[object Null]": "null",
        "[object Undefined]": "undefined",
        "[object Object]": "object",
        "[object Array]": "array",
        "[object Function]": "function",
        "[object Date]": "date", // Object.prototype.toString.call(new Date())
        "[object RegExp]": "regExp",
        "[object Map]": "map",
        "[object Set]": "set",
        "[object HTMLDivElement]": "dom", // document.querySelector("#app")
        "[object WeakMap]": "weakMap",
        "[object Window]": "window",  // Object.prototype.toString.call(window)
        "[object Error]": "error", // new Error("1")
        "[object Arguments]": "arguments",
    }
    let name = Object.prototype.toString.call(data) // 借用Object.prototype.toString()獲取數(shù)據(jù)類型
    let typeName = typeObj[name] || "未知類型" // 匹配數(shù)據(jù)類型
    return typeName === type // 判斷該數(shù)據(jù)類型是否為傳入的類型
}
console.log(
    isType({}, "object"), // true
    isType([], "array"), // true
    isType(new Date(), "object"), // false
    isType(new Date(), "date"), // true
)

類數(shù)組借用數(shù)組的方法：

類數(shù)組因為不是真正的數(shù)組所有沒有數(shù)組類型上自帶的種種方法，所以我們需要去借用數(shù)組的方法。

比如借用數(shù)組的push方法：

var arrayLike = {
  0: "OB",
  1: "Koro1",
  length: 2
}
Array.prototype.push.call(arrayLike, "添加元素1", "添加元素2");
console.log(arrayLike) // {"0":"OB","1":"Koro1","2":"添加元素1","3":"添加元素2","length":4}

apply獲取數(shù)組最大值最小值：

apply直接傳遞數(shù)組做要調(diào)用方法的參數(shù)，也省一步展開數(shù)組，比如使用Math.max、Math.min來獲取數(shù)組的最大值/最小值:

const arr = [15, 6, 12, 13, 16];
const max = Math.max.apply(Math, arr); // 16
const min = Math.min.apply(Math, arr); // 6

繼承

ES5的繼承也都是通過借用父類的構(gòu)造方法來實現(xiàn)父類方法/屬性的繼承：

// 父類
function supFather(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"]; // 復(fù)雜類型
}
supFather.prototype.sayName = function (age) {
    console.log(this.name, "age");
};
// 子類
function sub(name, age) {
    // 借用父類的方法：修改它的this指向,賦值父類的構(gòu)造函數(shù)里面方法、屬性到子類上
    supFather.call(this, name);
    this.age = age;
}
// 重寫子類的prototype，修正constructor指向
function inheritPrototype(sonFn, fatherFn) {
    sonFn.prototype = Object.create(fatherFn.prototype); // 繼承父類的屬性以及方法
    sonFn.prototype.constructor = sonFn; // 修正constructor指向到繼承的那個函數(shù)上
}
inheritPrototype(sub, supFather);
sub.prototype.sayAge = function () {
    console.log(this.age, "foo");
};
// 實例化子類，可以在實例上找到屬性、方法
const instance1 = new sub("OBKoro1", 24);
const instance2 = new sub("小明", 18);
instance1.colors.push("black")
console.log(instance1) // {"name":"OBKoro1","colors":["red","blue","green","black"],"age":24}
console.log(instance2) // {"name":"小明","colors":["red","blue","green"],"age":18} 

類似的應(yīng)用場景還有很多，就不贅述了，關(guān)鍵在于它們借用方法的理念，不理解的話多看幾遍。

call,apply的效果完全一樣，它們的區(qū)別也在于

參數(shù)數(shù)量/順序確定就用call，參數(shù)數(shù)量/順序不確定的話就用apply。

考慮可讀性：參數(shù)數(shù)量不多就用call，參數(shù)數(shù)量比較多的話，把參數(shù)整合成數(shù)組，使用apply。

參數(shù)集合已經(jīng)是一個數(shù)組的情況，用apply，比如上文的獲取數(shù)組最大值/最小值。

參數(shù)數(shù)量/順序不確定的話就用apply，比如以下示例：

const obj = {
    age: 24,
    name: "OBKoro1",
}
const obj2 = {
    age: 777
}
callObj(obj, handle)
callObj(obj2, handle)
// 根據(jù)某些條件來決定要傳遞參數(shù)的數(shù)量、以及順序
function callObj(thisAge, fn) {
    let params = []
    if (thisAge.name) {
        params.push(thisAge.name)
    }
    if (thisAge.age) {
        params.push(thisAge.age)
    }
    fn.apply(thisAge, params) // 數(shù)量和順序不確定 不能使用call
}
function handle(...params) {
    console.log("params", params) // do some thing
}

首先來看下一道經(jīng)典的面試題：

for (var i = 1; i <= 5; i++) {
   setTimeout(function test() {
        console.log(i) // 依次輸出：6 6 6 6 6
    }, i * 1000);
}

造成這個現(xiàn)象的原因是等到setTimeout異步執(zhí)行時,i已經(jīng)變成6了。

關(guān)于js事件循環(huán)機制不理解的同學(xué)，可以看我這篇博客：Js 的事件循環(huán)(Event Loop)機制以及實例講解

那么如何使他輸出: 1,2,3,4,5呢？

方法有很多：

閉包, 保存變量

for (var i = 1; i <= 5; i++) {
    (function (i) {
        setTimeout(function () {
            console.log("閉包:", i); // 依次輸出：1 2 3 4 5
        }, i * 1000);
    }(i));
}

在這里創(chuàng)建了一個閉包，每次循環(huán)都會把i的最新值傳進去，然后被閉包保存起來。

bind

for (var i = 1; i <= 5; i++) {
    // 緩存參數(shù)
    setTimeout(function (i) {
        console.log("bind", i) // 依次輸出：1 2 3 4 5
    }.bind(null, i), i * 1000);
}

實際上這里也用了閉包，我們知道bind會返回一個函數(shù)，這個函數(shù)也是閉包。

它保存了函數(shù)的this指向、初始參數(shù)，每次i的變更都會被bind的閉包存起來，所以輸出1-5。

具體細節(jié)，下面有個手寫bind方法，研究一下，就能搞懂了。

let

用let聲明i也可以輸出1-5: 因為let是塊級作用域,所以每次都會創(chuàng)建一個新的變量,所以setTimeout每次讀的值都是不同的,詳解。

這是一個常見的問題，下面是我在開發(fā)VSCode插件處理webview通信時，遇到的真實問題，一開始以為VSCode的API哪里出問題，調(diào)試了一番才發(fā)現(xiàn)是this指向丟失的問題。

class Page {
    constructor(callBack) {
        this.className = "Page"
        this.MessageCallBack = callBack // 
        this.MessageCallBack("發(fā)給注冊頁面的信息") // 執(zhí)行PageA的回調(diào)函數(shù)
    }
}
class PageA {
    constructor() {
        this.className = "PageA"
        this.pageClass = new Page(this.handleMessage) // 注冊頁面 傳遞回調(diào)函數(shù) 問題在這里
    }
    // 與頁面通信回調(diào)
    handleMessage(msg) {
        console.log("處理通信", this.className, msg) //  "Page" this指向錯誤
    }
}
new PageA()

顯然聲明的時候不會出現(xiàn)問題，執(zhí)行回調(diào)函數(shù)的時候也不可能出現(xiàn)問題。

問題出在傳遞回調(diào)函數(shù)的時候：

this.pageClass = new Page(this.handleMessage)

因為傳遞過去的this.handleMessage是一個函數(shù)內(nèi)存地址，沒有上下文對象，也就是說該函數(shù)沒有綁定它的this指向。

那它的this指向于它所應(yīng)用的綁定規(guī)則：

class Page {
    constructor(callBack) {
        this.className = "Page"
        // callBack() // 直接執(zhí)行的話 由于class 內(nèi)部是嚴格模式，所以this 實際指向的是 undefined
        this.MessageCallBack = callBack // 回調(diào)函數(shù)的this 隱式綁定到class page
        this.MessageCallBack("發(fā)給注冊頁面的信息")
    }
}

既然知道問題了，那我們只要綁定回調(diào)函數(shù)的this指向為PageA就解決問題了。

回調(diào)函數(shù)this丟失的解決方案：

bind綁定回調(diào)函數(shù)的this指向：

這是典型bind的應(yīng)用場景, 綁定this指向，用做回調(diào)函數(shù)。

this.pageClass = new Page(this.handleMessage.bind(this)) // 綁定回調(diào)函數(shù)的this指向

PS： 這也是為什么react的render函數(shù)在綁定回調(diào)函數(shù)的時候，也要使用bind綁定一下this的指向，也是因為同樣的問題以及原理。

箭頭函數(shù)綁定this指向

箭頭函數(shù)的this指向定義的時候外層第一個普通函數(shù)的this，在這里指的是class類：PageA

這塊內(nèi)容，可以看下我之前寫的博客：詳解箭頭函數(shù)和普通函數(shù)的區(qū)別以及箭頭函數(shù)的注意事項、不適用場景

this.pageClass = new Page(() => this.handleMessage()) // 箭頭函數(shù)綁定this指向

在大廠的面試中，手寫實現(xiàn)call,apply,bind(特別是bind)一直是比較高頻的面試題，在這里我們也一起來實現(xiàn)一下這幾個函數(shù)。

思路

根據(jù)call的規(guī)則設(shè)置上下文對象,也就是this的指向。

通過設(shè)置context的屬性,將函數(shù)的this指向隱式綁定到context上

通過隱式綁定執(zhí)行函數(shù)并傳遞參數(shù)。

刪除臨時屬性，返回函數(shù)執(zhí)行結(jié)果

Function.prototype.myCall = function (context, ...arr) {
    if (context === null || context === undefined) {
       // 指定為 null 和 undefined 的 this 值會自動指向全局對象(瀏覽器中為window)
        context = window 
    } else {
        context = Object(context) // 值為原始值（數(shù)字，字符串，布爾值）的 this 會指向該原始值的實例對象
    }
    const specialPrototype = Symbol("特殊屬性Symbol") // 用于臨時儲存函數(shù)
    context[specialPrototype] = this; // 函數(shù)的this指向隱式綁定到context上
    let result = context[specialPrototype](...arr); // 通過隱式綁定執(zhí)行函數(shù)并傳遞參數(shù)
    delete context[specialPrototype]; // 刪除上下文對象的屬性
    return result; // 返回函數(shù)執(zhí)行結(jié)果
};

很多人判斷函數(shù)上下文對象，只是簡單的以context是否為false來判斷,比如：

// 判斷函數(shù)上下文綁定到`window`不夠嚴謹
context = context ? Object(context) : window; 
context = context || window; 

經(jīng)過測試,以下三種為false的情況,函數(shù)的上下文對象都會綁定到window上：

// 網(wǎng)上的其他綁定函數(shù)上下文對象的方案: context = context || window; 
function handle(...params) {
    this.test = "handle"
    console.log("params", this, ...params) // do some thing
}
handle.elseCall("") // window
handle.elseCall(0) // window
handle.elseCall(false) // window

而call則將函數(shù)的上下文對象會綁定到這些原始值的實例對象上：

所以正確的解決方案，應(yīng)該是像我上面那么做：

// 正確判斷函數(shù)上下文對象
    if (context === null || context === undefined) {
       // 指定為 null 和 undefined 的 this 值會自動指向全局對象(瀏覽器中為window)
        context = window 
    } else {
        context = Object(context) // 值為原始值（數(shù)字，字符串，布爾值）的 this 會指向該原始值的實例對象
    }

盡管之前用的屬性是testFn但不得不承認，還是有跟上下文對象的原屬性沖突的風險,經(jīng)網(wǎng)友提醒使用Symbol就不會出現(xiàn)沖突了。

考慮兼容的話,還是用盡量特殊的屬性，比如帶上自己的ID：OBKoro1TestFn。

思路：

傳遞給函數(shù)的參數(shù)處理，不太一樣，其他部分跟call一樣。

apply接受第二個參數(shù)為類數(shù)組對象, 這里用了JavaScript權(quán)威指南中判斷是否為類數(shù)組對象的方法。

Function.prototype.myApply = function (context) {
    if (context === null || context === undefined) {
        context = window // 指定為 null 和 undefined 的 this 值會自動指向全局對象(瀏覽器中為window)
    } else {
        context = Object(context) // 值為原始值（數(shù)字，字符串，布爾值）的 this 會指向該原始值的實例對象
    }
    // JavaScript權(quán)威指南判斷是否為類數(shù)組對象
    function isArrayLike(o) {
        if (o &&                                    // o不是null、undefined等
            typeof o === "object" &&                // o是對象
            isFinite(o.length) &&                   // o.length是有限數(shù)值
            o.length >= 0 &&                        // o.length為非負值
            o.length === Math.floor(o.length) &&    // o.length是整數(shù)
            o.length < 4294967296)                  // o.length < 2^32
            return true
        else
            return false
    }
    const specialPrototype = Symbol("特殊屬性Symbol") // 用于臨時儲存函數(shù)
    context[specialPrototype] = this; // 隱式綁定this指向到context上
    let args = arguments[1]; // 獲取參數(shù)數(shù)組
    let result
    // 處理傳進來的第二個參數(shù)
    if (args) {
        // 是否傳遞第二個參數(shù)
        if (!Array.isArray(args) && !isArrayLike(args)) {
            throw new TypeError("myApply 第二個參數(shù)不為數(shù)組并且不為類數(shù)組對象拋出錯誤");
        } else {
            args = Array.from(args) // 轉(zhuǎn)為數(shù)組
            result = context[specialPrototype](...args); // 執(zhí)行函數(shù)并展開數(shù)組，傳遞函數(shù)參數(shù)
        }
    } else {
        result = context[specialPrototype](); // 執(zhí)行函數(shù) 
    }
    delete context[specialPrototype]; // 刪除上下文對象的屬性
    return result; // 返回函數(shù)執(zhí)行結(jié)果
};

劃重點：

手寫bind是大廠中的一個高頻的面試題，如果面試的中高級前端，只是能說出它們的區(qū)別，用法并不能脫穎而出，理解要有足夠的深度才能抱得offer歸！

思路

拷貝源函數(shù):

通過變量儲存源函數(shù)

使用Object.create復(fù)制源函數(shù)的prototype給fToBind

返回拷貝的函數(shù)

調(diào)用拷貝的函數(shù)：

new調(diào)用判斷：通過instanceof判斷函數(shù)是否通過new調(diào)用，來決定綁定的context

綁定this+傳遞參數(shù)

返回源函數(shù)的執(zhí)行結(jié)果

Function.prototype.myBind = function (objThis, ...params) {
    const thisFn = this; // 存儲源函數(shù)以及上方的params(函數(shù)參數(shù))
    // 對返回的函數(shù) secondParams 二次傳參
    let fToBind = function (...secondParams) {
        console.log("secondParams",secondParams,...secondParams)
        const isNew = this instanceof fToBind // this是否是fToBind的實例 也就是返回的fToBind是否通過new調(diào)用
        const context = isNew ? this : Object(objThis) // new調(diào)用就綁定到this上,否則就綁定到傳入的objThis上
        return thisFn.call(context, ...params, ...secondParams); // 用call調(diào)用源函數(shù)綁定this的指向并傳遞參數(shù),返回執(zhí)行結(jié)果
    };
    fToBind.prototype = Object.create(thisFn.prototype); // 復(fù)制源函數(shù)的prototype給fToBind
    return fToBind; // 返回拷貝的函數(shù)
};

本來以為這篇會寫的很快，結(jié)果斷斷續(xù)續(xù)的寫了好幾天，終于把這三個API相關(guān)知識介紹清楚了，希望大家看完之后，面試的時候再遇到這個問題，就可以海陸空全方位的裝逼了^_^

前端進階積累、公眾號、GitHub、wx:OBkoro1、郵箱：obkoro1@foxmail.com

以上2019/8/30