摘要：和概覽我們要將歸為一類，多帶帶歸為一類三者的共同點是都可以指定和都是綁定在的原型上的，所以的實例都可以調(diào)用這三個方法至于為什么，看完這篇文章你就懂了如果你不懂什么是實例的話，請移步深入淺出面向?qū)ο蠛驮透拍钇钊霚\出面向?qū)ο蠛驮透拍钇谝粋€

我們要將call/apply歸為一類，bind多帶帶歸為一類

三者的共同點是都可以指定this

call/apply和bind都是綁定在Function的原型上的，所以Function的實例都可以調(diào)用這三個方法

Function.prototype.call(this,arg1,arg2)
Function.prototype.apply(this,[arg1,arg2])
Function.prototype.bind(this,arg1,arg2)

至于為什么，看完這篇文章你就懂了：）

如果你不懂什么是實例的話，請移步深入淺出面向?qū)ο蠛驮汀靖拍钇?】、深入淺出面向?qū)ο蠛驮汀靖拍钇?】

作用

調(diào)用函數(shù)

改變該函數(shù)this值

操作參數(shù)

返回值
返回值是你調(diào)用的方法的返回值，若該方法沒有返回值，則返回undefined。

    window.a = 1

    function print(b, c) {
        console.log(this.a, b, c)
    }

    print(2, 3) // 1 2 3

    print.call({a: -1}, -2, -3) // -1 -2 -3
    print.apply({a: 0}, [-2, -3]) // 0 -2 -3

call()方法的作用和 apply() 方法是一樣的，只有一個區(qū)別
call()方法接受的是若干個參數(shù)
apply()方法接受的是一個包含若干個參數(shù)的數(shù)組

    // 例子一
    // Math.max()不接收數(shù)組的傳遞，我們可以使用apply方法
    let answer = Math.max.apply(null, [2, 4, 3])
    console.log(answer) // 4

    // 注意下面三個等價
    Math.max.apply(null, [2, 4, 3])
    Math.max.call(null, 2, 4, 3)
    Math.max(2, 4, 3)

    // 例子二
    // 合并兩個數(shù)組
    let arr1 = ["parsnip", "potato"]
    let arr2 = ["celery", "beetroot"]
    // 將第二個數(shù)組融合進第一個數(shù)組
    // 相當于 arr1.push("celery", "beetroot");
    Array.prototype.push.apply(arr1, arr2)
    // 注意?。。his的意思是誰調(diào)用了push這個方法
    // 所以當 this = arr1 后
    // 就成了 arr1 調(diào)用了 push方法
    // 所以上述表達式等價于 arr1.push("celery", "beetroot") 

    console.log(arr1)
    // ["parsnip", "potato", "celery", "beetroot"]

例子二中非常值得注意的就是arr2數(shù)組被拆開了，成了一個一個的參數(shù)

所以，apply經(jīng)常性的作用之一就是將數(shù)組元素迭代為函數(shù)參數(shù)

    // 例子三
    Math.max.apply(null, [2, 4, 3]) // 完美運行
    arr1.push.apply(null, arr2) // 報錯 Uncaught TypeError: Array.prototype.push called on null or undefined

    // 說明
    Math = {
        max: function (values) {
            // 沒用到this值
        }
    }
    Array.prototype.push = function (items) {
        // this -> 調(diào)用push方法的數(shù)組本身
        // this為null的話，就是向null里push
        // Array.prototype.push called on null or undefined
    }
    // 下面三個值是完全等價的，因為this值已經(jīng)是arr1
    Array.prototype.push.apply(arr1, arr2)
    arr1.push.apply(arr1, arr2)
    arr2.push.apply(arr1, arr2)

    function xx() {
        console.log(this)
    }
    xx.call("1") // ??
    xx() // ??

如果答案和你想的不一樣，請移步this總結(jié)【1】—— this概覽

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

改變this

返回一個新函數(shù)

實例使用bind()方法后會返回一個新的函數(shù)【綁定函數(shù)】
而原函數(shù)為【目標函數(shù)】

我個人更喜歡用新函數(shù)和原函數(shù)來區(qū)分，因為新名詞越多，理解上的困難越大

那么新函數(shù)被調(diào)用時會發(fā)生什么呢？
下面一句話務必記住
其實就是把原函數(shù)call/apply一下，并指定你傳遞的this

    function xx() {
        console.log(this)
    }

    let foo = xx.bind({"name":"jason"})
    // foo —— 新函數(shù)【綁定函數(shù)】
    // xx —— 原函數(shù)【目標函數(shù)】

    foo()

    // 新函數(shù)調(diào)用時對原函數(shù)的操作
    
    // 下面是偽代碼
    // function foo(){
    //     xx.call({"name":"jason"})
    // }

    // 1.給xx（原函數(shù)）指定this 2.調(diào)用xx（原函數(shù)）
    // 一定要注意這兩步是在新函數(shù)被調(diào)用時才發(fā)生，不調(diào)用不發(fā)生
    // 你也可以總結(jié)為一句話，給原函數(shù) call/apply 了一下

bind(this,arg1)會將arg1插入到原函數(shù)【目標函數(shù)】的參數(shù)列表的開始位置

傳遞給新函數(shù)【綁定函數(shù)】的參數(shù)會跟在它們的后面

    function list() {
        // 原函數(shù)【目標函數(shù)】
        return Array.prototype.slice.call(arguments);
    }

    let listTest = list(1, 2, 3); // [1, 2, 3]

    // 新函數(shù)【綁定函數(shù)】
    let leadingThirtysevenList = list.bind(undefined, 37);

    let list1 = leadingThirtysevenList(); // [37]
    let list2 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

思考過程

    // 實現(xiàn)bind其實就是實現(xiàn)bind的特點
    // 1.bind的第一個參數(shù)是this
    // 2.bind可以return一個新函數(shù)，這個新函數(shù)可以調(diào)用原函數(shù)并且可以指定其this，還可以接受參數(shù)
    // 3.bind返回的新函數(shù)傳遞的參數(shù)要在bind傳遞的參數(shù)的后面

代碼

    Function.prototype._bind = function () {
        // 聲明bind接受的參數(shù)【除去this】為bindArgs
        // 因為第一個參數(shù)是this，需要去掉
        let bindArgs = Array.prototype.slice.call(arguments, 1)
        let bindThis = arguments[1]
        // 聲明原函數(shù)【目標函數(shù)】為targetObj
        let targetObj = this
        return function () {
            // return出來的的函數(shù)接受的參數(shù)為newArgs
            // 要在return出來的新函數(shù)里把bindArgs和newArgs合并，使用數(shù)組的concat方法
            let newArgs = Array.prototype.slice.call(arguments)
            return targetObj.apply(bindThis, bindArgs.concat(newArgs))
        }
    }

你在控制臺輸入console.log(1)為什么一個是1，一個是undefined？

1是執(zhí)行console.log()方法的輸出值，undefined是這個方法的返回值
所以，你要知道所有的函數(shù)都有返回值，一定要去關注一下函數(shù)的返回值

xxx.call()/xxx.apply() 的返回值是由xxx本身的返回值決定的
xxx.bind() 的返回值是一個函數(shù)