手寫bind

首先寫一個bind的簡單示例:

'use strict'
function fn() {
  console.log('this::', this)
  console.log('arguments::', arguments)
}
// fn() // 這裡呼叫時this 在嚴格模式下是undefined，非嚴格模式下是Window
var fn1 = fn.bind('str', 1, 2, 3); // 這裡把this改為了'str'
fn1(4, 5, 6);

fn1的呼叫結果如下：

根據以上示例總結幾個bind的特徵：
① 可以提前繫結this及引數
② 不會立刻呼叫，返回一個新函式
③ 新的函式呼叫時也可以傳參

1. 初步雛形( 最後有完整程式碼 )

    Function.prototype.mybind = function (asThis) {
        console.log('mybind.....')
    }
    function fn() {

    }
    fn.mybind();

2.提前快取引數和this

    // 提前快取引數和this
    var slice = Array.prototype.slice;
    Function.prototype.mybind = function (asThis) {
        // 1、第一個引數是this, 後邊的引數才是額外的引數，所以要對引數進行一個擷取
        // 2、因為arguments是一個偽陣列，所以沒有陣列的方法，
        //    所以可以提前獲取下陣列的的方法slice
        var cachedArgs = slice.call(arguments, 1);
        console.log('mybind.....', cachedArgs) // [1, 2]
        // 3、最後它是要返回一個新的函式，所以這裡先定義一個要返回的函式
        var innerFn = function () {
            ///4、這裡要先彙總一下新函式傳過來的引數和提前快取的引數
            var args = slice.call(arguments);
            cachedArgs = cachedArgs.concat(args);
            console.log('cachedArgs::', cachedArgs) // [1, 2, 3, 4]
            console.log('asThis::', asThis) // '我是this'
        };
        return innerFn;
    }

    function fn() {

    }
    var newFn = fn.mybind('我是this', 1, 2);
    newFn(3, 4);

這裡對slice.call(arguments, 1)這行做一個說明：以為這裡的slice是一個純淨的方法，是沒有資料的。所以他要slice就要根據this去slice，所以這裡就要把要擷取的陣列arguments當成它的this，這樣就擷取到了除第一個引數的外的額外引數如1和2.

3.下邊就是隨著newFn方法的呼叫，要這個方法可以執行起來，其實就是要改變this的這個方法fn要執行起來，這就要思考怎麼在innerFn的裡邊拿到fn這個方法。

    var slice = Array.prototype.slice;
    Function.prototype.mybind = function (asThis) {
        // 1、第一個引數是this, 後邊的引數才是額外的引數，所以要對引數進行一個擷取
        ///2、因為arguments是一個偽陣列，所以沒有陣列的方法，
        //    所以可以提前獲取下陣列的的方法slice
        var cachedArgs = slice.call(arguments, 1);
        console.log('mybind.....', cachedArgs) // [1, 2]
        // 3、最後它是要返回一個新的函式，所以這裡先定義一個要返回的函式

        // 5、① 這裡儲存fn的值
        var callFn = this;
        var innerFn = function () {
            ///4、這裡要先彙總一下新函式傳過來的引數和提前快取的引數
            var args = slice.call(arguments);
            cachedArgs = cachedArgs.concat(args);
            console.log('cachedArgs::', cachedArgs) // [1, 2, 3, 4]
            console.log('asThis::', asThis) // '我是this'

            // 5、② 用fn 改變this,傳遞引數
            // 原函式 改變this 引數
            // 這裡return 是因為要可以拿到newFn 的返回值
            return callFn.apply(asThis, cachedArgs);

        };
        return innerFn;
    }

    function fn() {
        console.log('this::', this)
        console.log('arguments::', arguments)
        return 'fn的返回值'
    }
    var newFn = fn.mybind('我是this', 1, 2);
    console.log(newFn(3, 4)); // ''fn的返回值''

4.要求返回的函式可以被new（第6、7步）

 var slice = Array.prototype.slice;
    Function.prototype.mybind = function (asThis) {
        // 1、第一個引數是this, 後邊的引數才是額外的引數，所以要對引數進行一個擷取
        ///2、因為arguments是一個偽陣列，所以沒有陣列的方法，
        //    所以可以提前獲取下陣列的的方法slice
        var cachedArgs = slice.call(arguments, 1);
        console.log('mybind.....', cachedArgs) // [1, 2]
        // 3、最後它是要返回一個新的函式，所以這裡先定義一個要返回的函式

        // 5、① 這裡儲存fn的值
        var callFn = this;
        var innerFn = function () {
            ///4、這裡要先彙總一下新函式傳過來的引數和提前快取的引數
            var args = slice.call(arguments);
            cachedArgs = cachedArgs.concat(args);
            console.log('cachedArgs::', cachedArgs) // [1, 2, 3, 4]
            console.log('asThis::', asThis) // '我是this'

            console.log('檢視呼叫的this:', this); //這裡可以看到被呼叫時是Window 被new時是innerFn {}
            // 所以我們就可以透過this instanceof innerFn來判斷是否是被new的
            // 6、這裡區分是new的還是呼叫？
            if (this instanceof innerFn) {
                // 7、這裡模擬建立物件的4步曲
                var target = {}; //建立一個空物件
                // 原型掛載
                target.__proto__ = callFn.prototype;
                // 執行建構函式
                callFn.apply(target, cachedArgs);
                return target;
            } else {
                // 5、② 用fn 改變this,傳遞引數
                //     原函式 改變this 引數
                //     這裡return 是因為要可以拿到newFn 的返回值
                return callFn.apply(asThis, cachedArgs);
            }

        };
        return innerFn;
    }

    function fn() {
        this.tag = 'Green';
        console.log('this::', this)
        console.log('arguments::', arguments)
        return 'fn的返回值'
    }
    var newFn = fn.mybind('我是this', 1, 2);
    console.log('被呼叫：：', newFn(3, 4)); // 'fn的返回值'
    // 透過上邊的列印可以看出fn() this是window new Xx 就是Xx的例項

    // 要求返回的函式可以被new
    var fnObj = fn.mybind('new的this', 5, 6);
    var instance = new fnObj(7, 8);
    console.log('被new：：', instance); // fn {tag: 'Green'}

5. 以上就完成了整個功能，下邊就展示下完成程式碼：

這裡再加個補充；我們在呼叫mybind時前邊物件會被改變的，所以要確保它是個函式，否則告知要傳一個函式

var slice = Array.prototype.slice;
Function.prototype.mybind = function (asThis) {
    var cachedArgs = slice.call(arguments, 1);
    var callFn = this;
    if(typeof callFn !== 'function') throw new Error('當前例項非函式')
    var innerFn = function () {
        var args = slice.call(arguments);
        cachedArgs = cachedArgs.concat(args);
        // 區分是否被new
        // 這裡可以分別列印下被呼叫和被new時this的區別
        if (this instanceof innerFn) {
            var target = {}; 
            target.__proto__ = callFn.prototype;
            callFn.apply(target, cachedArgs);
            return target;
        } else {
            return callFn.apply(asThis, cachedArgs);
        }
    };
    return innerFn;
}

function fn() {
    this.tag = 'ABC';
    return 'fn的返回值'
}
// 被呼叫時
var newFn = fn.mybind('我是this', 1, 2);
console.log('被呼叫：：', newFn(3, 4)); // 'fn的返回值'

// 被new時
var fnObj = fn.mybind('new的this', 5, 6);
var instance = new fnObj(7, 8);
console.log('被new：：', instance); // fn {tag: 'ABC'}