js基礎-面試官想知道你有多理解call,apply,bind？[不看後悔系列]

時間  2019-11-05
標籤 基礎 面試 想知道 理解 apply bind 不看 後悔 系列 欄目 JavaScript 简体版
原文   原文鏈接

函數原型鏈中的 apply，call 和 bind 方法是 JavaScript 中至關重要的概念，與 this 關鍵字密切相關，至關一部分人對它們的理解仍是比較淺顯，所謂js基礎紮實，繞不開這些基礎經常使用的API，此次讓咱們來完全掌握它們吧！前端

目錄

  1. call,apply,bind的基本介紹
  2. call/apply/bind的核心理念：借用方法
  3. call和apply的應用場景
  4. bind的應用場景
  5. 中高級面試題：手寫call/apply、bind

call,apply,bind的基本介紹

語法：

fun.call(thisArg, param1, param2, ...)
fun.apply(thisArg, [param1,param2,...])
fun.bind(thisArg, param1, param2, ...)
複製代碼

返回值：

call/apply：fun執行的結果 bind：返回fun的拷貝，並擁有指定的this值和初始參數react

參數

thisArg(可選):git

  1. fun的this指向thisArg對象
  2. 非嚴格模式下：thisArg指定爲null，undefined，fun中的this指向window對象.
  3. 嚴格模式下：fun的this爲undefined
  4. 值爲原始值(數字，字符串，布爾值)的this會指向該原始值的自動包裝對象，如 String、Number、Boolean

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

  1. 若是param不傳或爲 null/undefined，則表示不須要傳入任何參數.
  2. apply第二個參數爲數組，數組內的值爲傳給fun的參數。

調用call/apply/bind的必須是個函數

call、apply和bind是掛在Function對象上的三個方法,只有函數纔有這些方法。web

只要是函數就能夠，好比: Object.prototype.toString就是個函數，咱們常常看到這樣的用法：Object.prototype.toString.call(data)面試

做用：

改變函數執行時的this指向，目前全部關於它們的運用，都是基於這一點來進行的。segmentfault

如何不弄混call和apply

弄混這兩個API的不在少數，不要小看這個問題，記住下面的這個方法就行了。數組

apply是以a開頭，它傳給fun的參數是Array，也是以a開頭的。瀏覽器

區別：

call與apply的惟一區別

傳給fun的參數寫法不一樣：緩存

  • apply是第2個參數，這個參數是一個數組：傳給fun參數都寫在數組中。
  • call從第2~n的參數都是傳給fun的。

call/apply與bind的區別

執行：

  • call/apply改變了函數的this上下文後立刻執行該函數
  • bind則是返回改變了上下文後的函數,不執行該函數

返回值:

  • call/apply 返回fun的執行結果
  • bind返回fun的拷貝，並指定了fun的this指向，保存了fun的參數。

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

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

看到一個很是棒的例子：

生活中：

平時沒時間作飯的我，週末想給孩子燉個醃篤鮮嚐嚐。可是沒有適合的鍋，而我又不想出去買。因此就問鄰居借了一個鍋來用，這樣既達到了目的，又節省了開支，一箭雙鵰。

程序中：

A對象有個方法，B對象由於某種緣由也須要用到一樣的方法，那麼這時候咱們是單獨爲 B 對象擴展一個方法呢，仍是借用一下 A 對象的方法呢？

固然是借用 A 對象的方法啦，既達到了目的，又節省了內存。

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

藉助已實現的方法，改變方法中數據的this指向，減小重複代碼，節省內存。

call和apply的應用場景：

這些應用場景，多加體會就能夠發現它們的理念都是：借用方法

  1. 判斷數據類型：

Object.prototype.toString用來判斷類型再合適不過，借用它咱們幾乎能夠判斷全部類型的數據：

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()獲取數據類型
    let typeName = typeObj[name] || '未知類型' // 匹配數據類型
    return typeName === type // 判斷該數據類型是否爲傳入的類型
}
console.log(
    isType({}, 'object'), // true
    isType([], 'array'), // true
    isType(new Date(), 'object'), // false
    isType(new Date(), 'date'), // true
)
複製代碼
  1. 類數組借用數組的方法：

類數組由於不是真正的數組全部沒有數組類型上自帶的種種方法，因此咱們須要去借用數組的方法。

好比借用數組的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}
複製代碼
  1. apply獲取數組最大值最小值：

apply直接傳遞數組作要調用方法的參數，也省一步展開數組，好比使用Math.max、Math.min來獲取數組的最大值/最小值:

const arr = [15, 6, 12, 13, 16];
const max = Math.max.apply(Math, arr); // 16
const min = Math.min.apply(Math, arr); // 6
複製代碼
  1. 繼承

ES5的繼承也都是經過借用父類的構造方法來實現父類方法/屬性的繼承：

// 父類
function supFather(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green']; // 複雜類型
}
supFather.prototype.sayName = function (age) {
    console.log(this.name, 'age');
};
// 子類
function sub(name, age) {
    // 借用父類的方法：修改它的this指向,賦值父類的構造函數裏面方法、屬性到子類上
    supFather.call(this, name);
    this.age = age;
}
// 重寫子類的prototype，修正constructor指向
function inheritPrototype(sonFn, fatherFn) {
    sonFn.prototype = Object.create(fatherFn.prototype); // 繼承父類的屬性以及方法
    sonFn.prototype.constructor = sonFn; // 修正constructor指向到繼承的那個函數上
}
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} 
複製代碼

相似的應用場景還有不少，就不贅述了，關鍵在於它們借用方法的理念，不理解的話多看幾遍。

call、apply，該用哪一個？、

call,apply的效果徹底同樣，它們的區別也在於

  • 參數數量/順序肯定就用call，參數數量/順序不肯定的話就用apply。
  • 考慮可讀性：參數數量很少就用call，參數數量比較多的話，把參數整合成數組，使用apply。
  • 參數集合已是一個數組的狀況，用apply，好比上文的獲取數組最大值/最小值。

參數數量/順序不肯定的話就用apply，好比如下示例：

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

bind的應用場景：

1. 保存函數參數：

首先來看下一道經典的面試題：

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

形成這個現象的緣由是等到setTimeout異步執行時,i已經變成6了。

關於js事件循環機制不理解的同窗，能夠看我這篇博客：Js 的事件循環(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));
}
複製代碼

在這裏建立了一個閉包，每次循環都會把i的最新值傳進去，而後被閉包保存起來。

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

實際上這裏也用了閉包，咱們知道bind會返回一個函數，這個函數也是閉包。

它保存了函數的this指向、初始參數，每次i的變動都會被bind的閉包存起來，因此輸出1-5。

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

  • let

用let聲明i也能夠輸出1-5: 由於let是塊級做用域,因此每次都會建立一個新的變量,因此setTimeout每次讀的值都是不一樣的,詳解。

2. 回調函數this丟失問題：

這是一個常見的問題，下面是我在開發VSCode插件處理webview通訊時，遇到的真實問題，一開始覺得VSCode的API哪裏出問題，調試了一番才發現是this指向丟失的問題。

class Page {
    constructor(callBack) {
        this.className = 'Page'
        this.MessageCallBack = callBack // 
        this.MessageCallBack('發給註冊頁面的信息') // 執行PageA的回調函數
    }
}
class PageA {
    constructor() {
        this.className = 'PageA'
        this.pageClass = new Page(this.handleMessage) // 註冊頁面 傳遞迴調函數 問題在這裏
    }
    // 與頁面通訊回調
    handleMessage(msg) {
        console.log('處理通訊', this.className, msg) // 'Page' this指向錯誤
    }
}
new PageA()
複製代碼

回調函數this爲什麼會丟失？

顯然聲明的時候不會出現問題，執行回調函數的時候也不可能出現問題。

問題出在傳遞迴調函數的時候：

this.pageClass = new Page(this.handleMessage)
複製代碼

由於傳遞過去的this.handleMessage是一個函數內存地址，沒有上下文對象，也就是說該函數沒有綁定它的this指向。

那它的this指向於它所應用的綁定規則：

class Page {
    constructor(callBack) {
        this.className = 'Page'
        // callBack() // 直接執行的話 因爲class 內部是嚴格模式，因此this 實際指向的是 undefined
        this.MessageCallBack = callBack // 回調函數的this 隱式綁定到class page
        this.MessageCallBack('發給註冊頁面的信息')
    }
}
複製代碼

既然知道問題了，那咱們只要綁定回調函數的this指向爲PageA就解決問題了。

回調函數this丟失的解決方案：

  1. bind綁定回調函數的this指向：

這是典型bind的應用場景, 綁定this指向，用作回調函數。

this.pageClass = new Page(this.handleMessage.bind(this)) // 綁定回調函數的this指向
複製代碼

PS： 這也是爲何react的render函數在綁定回調函數的時候，也要使用bind綁定一下this的指向，也是由於一樣的問題以及原理。

  1. 箭頭函數綁定this指向

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

這塊內容，能夠看下我以前寫的博客：詳解箭頭函數和普通函數的區別以及箭頭函數的注意事項、不適用場景

this.pageClass = new Page(() => this.handleMessage()) // 箭頭函數綁定this指向
複製代碼

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

在大廠的面試中，手寫實現call,apply,bind(特別是bind)一直是比較高頻的面試題，在這裏咱們也一塊兒來實現一下這幾個函數。

你能手寫實現一個call嗎？

思路

  1. 根據call的規則設置上下文對象,也就是this的指向。
  2. 經過設置context的屬性,將函數的this指向隱式綁定到context上
  3. 經過隱式綁定執行函數並傳遞參數。
  4. 刪除臨時屬性，返回函數執行結果
Function.prototype.myCall = function (context, ...arr) {
    if (context === null || context === undefined) {
       // 指定爲 null 和 undefined 的 this 值會自動指向全局對象(瀏覽器中爲window)
        context = window 
    } else {
        context = Object(context) // 值爲原始值（數字，字符串，布爾值）的 this 會指向該原始值的實例對象
    }
    const specialPrototype = Symbol('特殊屬性Symbol') // 用於臨時儲存函數
    context[specialPrototype] = this; // 函數的this指向隱式綁定到context上
    let result = context[specialPrototype](...arr); // 經過隱式綁定執行函數並傳遞參數
    delete context[specialPrototype]; // 刪除上下文對象的屬性
    return result; // 返回函數執行結果
};
複製代碼

判斷函數的上下文對象：

不少人判斷函數上下文對象，只是簡單的以context是否爲false來判斷,好比：

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

通過測試,如下三種爲false的狀況,函數的上下文對象都會綁定到window上：

// 網上的其餘綁定函數上下文對象的方案: 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則將函數的上下文對象會綁定到這些原始值的實例對象上：

原始值的實例對象

因此正確的解決方案，應該是像我上面那麼作：

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

使用Symbol臨時儲存函數

儘管以前用的屬性是testFn但不得不認可，仍是有跟上下文對象的原屬性衝突的風險,經網友提醒使用Symbol就不會出現衝突了。

考慮兼容的話,仍是用盡可能特殊的屬性，好比帶上本身的ID：OBKoro1TestFn。

你能手寫實現一個apply嗎？

思路：

  1. 傳遞給函數的參數處理，不太同樣，其餘部分跟call同樣。
  2. apply接受第二個參數爲類數組對象, 這裏用了JavaScript權威指南中判斷是否爲類數組對象的方法。
Function.prototype.myApply = function (context) {
    if (context === null || context === undefined) {
        context = window // 指定爲 null 和 undefined 的 this 值會自動指向全局對象(瀏覽器中爲window)
    } else {
        context = Object(context) // 值爲原始值（數字，字符串，布爾值）的 this 會指向該原始值的實例對象
    }
    // JavaScript權威指南判斷是否爲類數組對象
    function isArrayLike(o) {
        if (o &&                                    // o不是null、undefined等
            typeof o === 'object' &&                // o是對象
            isFinite(o.length) &&                   // o.length是有限數值
            o.length >= 0 &&                        // o.length爲非負值
            o.length === Math.floor(o.length) &&    // o.length是整數
            o.length < 4294967296)                  // o.length < 2^32
            return true
        else
            return false
    }
    const specialPrototype = Symbol('特殊屬性Symbol') // 用於臨時儲存函數
    context[specialPrototype] = this; // 隱式綁定this指向到context上
    let args = arguments[1]; // 獲取參數數組
    let result
    // 處理傳進來的第二個參數
    if (args) {
        // 是否傳遞第二個參數
        if (!Array.isArray(args) && !isArrayLike(args)) {
            throw new TypeError('myApply 第二個參數不爲數組而且不爲類數組對象拋出錯誤');
        } else {
            args = Array.from(args) // 轉爲數組
            result = context[specialPrototype](...args); // 執行函數並展開數組，傳遞函數參數
        }
    } else {
        result = context[specialPrototype](); // 執行函數 
    }
    delete context[specialPrototype]; // 刪除上下文對象的屬性
    return result; // 返回函數執行結果
};
複製代碼

你能手寫實現一個bind嗎？

劃重點：

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

思路

  1. 拷貝源函數:
    • 經過變量儲存源函數
    • 使用Object.create複製源函數的prototype給fToBind
  2. 返回拷貝的函數
  3. 調用拷貝的函數：
    • new調用判斷：經過instanceof判斷函數是否經過new調用，來決定綁定的context
    • 綁定this+傳遞參數
    • 返回源函數的執行結果

2019/8/26更新：修復函數沒有prototype的狀況

Function.prototype.myBind = function (objThis, ...params) {
    const thisFn = this; // 存儲源函數以及上方的params(函數參數)
    // 對返回的函數 secondParams 二次傳參
    let fToBind = function (...secondParams) {
        const isNew = this instanceof fToBind // this是不是fToBind的實例 也就是返回的fToBind是否經過new調用
        const context = isNew ? this : Object(objThis) // new調用就綁定到this上,不然就綁定到傳入的objThis上
        return thisFn.call(context, ...params, ...secondParams); // 用call調用源函數綁定this的指向並傳遞參數,返回執行結果
    };
    if (thisFn.prototype) {
        // 複製源函數的prototype給fToBind 一些狀況下函數沒有prototype，好比箭頭函數
        fToBind.prototype = Object.create(thisFn.prototype);
    }
    return fToBind; // 返回拷貝的函數
};
複製代碼

對象縮寫方法沒有prototype

箭頭函數沒有prototype，這個我知道的，但是getInfo2就是一個縮寫，爲何沒有prototype。

谷歌/stack overflow都沒有找到緣由，有大佬指點迷津一下嗎？？

var student = {
    getInfo: function (name, isRegistered) {
        console.log('this1', this)
    },
    getInfo2(name, isRegistered) {
        console.log('this2', this) // 沒有prototype
    },
    getInfo3: (name, isRegistered) => {
        console.log('this3', this) // 沒有prototype
    }
}
複製代碼

小結

原本覺得這篇會寫的很快，結果斷斷續續的寫了好幾天，終於把這三個API相關知識介紹清楚了，但願你們看完以後，面試的時候再遇到這個問題，就能夠海陸空全方位的裝逼了^_^

以爲個人博客對你有幫助的話，就給我點個Star吧！

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程