js中改變this指向的方法： call、apply、bind、以及ES6的箭頭函數(shù)
面試中不乏被問到這幾個方式，如果讓你手寫實現(xiàn)呢？
巧記一下吧~~~

1. call

特點：

1. 第一個參數(shù)為this指向目標(biāo): 不傳，傳null、undefined，會默認(rèn)指向window
2. 第一個參數(shù)之后就是函數(shù)中所需參數(shù)，多個參數(shù)之間以逗號隔開
3. 會立即執(zhí)行該函數(shù)

        var name = 'window';
        var people = {
            name: '麥克',
            speak: function () {
                console.log(this);
                console.log(this.name, arguments);
            }
        }
        var obj2 = {
            name: '杰西',
            speak() {
                console.log(2);

            }
        }

        people.speak.call(null, 1); 
        // window
        // 'window'  arguments[1]
        people.speak.call(undefined, 1, 2);
        // window
        // 'window'  arguments[1, 2]

1.1 實現(xiàn)call

1. 第一步拿到調(diào)用call的函數(shù)

Function.prototype.mCall = function () {
            console.log(this); // 打印了調(diào)用mCall的函數(shù)
        }

people.speak.mCall();

this：

image.png

2. 第二步傳入對象，并將需要改變this的函數(shù)放到對象上

        Function.prototype.mCall = function (that) {
            console.log(this); // 打印了調(diào)用mCall的函數(shù)

            that = that || window;

            var n = this.name; // 函數(shù)名
            // 修改函數(shù)名，以防與對象中其他屬性沖突
            n +=  (Math.random() + '').slice(2, 12) + new Date() * 1;

            // 將函數(shù)賦給對象
            that[n] = this;

            that[n]();
            
        }

        people.speak.mCall(obj2); // 杰西 Arguments [callee: ?, Symbol(Symbol.iterator): ?]

3. 解決參數(shù)傳遞

        Function.prototype.mCall = function (that, ...argu) {
            console.log(this); // 打印了調(diào)用mCall的函數(shù)
            
             that = that || window;

            var n = this.name; // 函數(shù)名
            // 修改函數(shù)名，以防與對象中其他屬性沖突
            n +=  (Math.random() + '').slice(2, 12) + new Date() * 1;

            // 將函數(shù)賦給對象
            that[n] = this;

            that[n](...argu);

            delete that[n];
        }

        people.speak.mCall(obj2, 1, 2, 3); // 杰西 Arguments(3) [1, 2, 3, callee: ?, Symbol(Symbol.iterator): ?]

2. apply

特點

1. 第一個參數(shù)為this指向目標(biāo): 不傳，傳null、undefined，會默認(rèn)指向window
2. 第一個參數(shù)之后就是函數(shù)中所需參數(shù)，多個參數(shù)使用數(shù)組參數(shù)
3. 會立即執(zhí)行該函數(shù)

        people.speak.apply(null, ['你好！', '好']); // window Arguments(2) ["你好！", "好", callee: ?, Symbol(Symbol.iterator): ?]        

        people.speak.apply(undefined, ['你好！', '好']); // window Arguments(2) ["你好！", "好", callee: ?, Symbol(Symbol.iterator): ?]
        
        people.speak.apply(obj2, ['你好！', '好']); // 杰西 Arguments(2) ["你好！", "好", callee: ?, Symbol(Symbol.iterator): ?]

2.1 實現(xiàn)apply

和call類似，只不過傳參時apply使用的是數(shù)組

        Function.prototype.mApply = function (that, argu) {
            that = that || window;
            var n = this.name; // 函數(shù)名
            // 修改函數(shù)名，以防與對象中其他屬性沖突
            n +=  (Math.random() + '').slice(2, 12) + new Date() * 1;

            // 將函數(shù)賦給對象
            that[n] = this;

            that[n](...argu);

            delete that[n];
        }

        people.speak.mApply(obj2, ['大家好！', '是真的好']); // 杰西 Arguments(2) ["大家好！", "是真的好", callee: ?, Symbol(Symbol.iterator): ?]

3. bind

特點：返回一個被改變this指向的新函數(shù)

var fn1 = people.speak.bind(obj2, [1, 2, 3]);
var fn2 = people.speak.bind(obj2, 1, 2, 3);
fn1(); // 杰西 Arguments [Array(3), callee: ?, Symbol(Symbol.iterator): ?]
fn2(); // 杰西 Arguments(3) [1, 2, 3, callee: ?, Symbol(Symbol.iterator): ?]

實現(xiàn)bind

        Function.prototype.mBind = function (that, ...arg) {
            that = that || window;
            
            var _self = this;
            return function () {
                _self.apply(that, arg.concat(...arguments));
            }
        }

        var fn3 = people.speak.mBind(obj2, [1,2,3]);
        var fn4 = people.speak.mBind(obj2, 1,2,3);
        

        fn(); // 杰西 Arguments(3) [1, 2, 3, callee: ?, Symbol(Symbol.iterator): ?]
        fn(4, 5, 6); // 杰西 Arguments(6) [1, 2, 3, 4, 5, 6, callee: ?, Symbol(Symbol.iterator): ?]
        fn3(4, 5, 6); // 杰西 Arguments(4) [Array(3), 4, 5, 6, callee: ?, Symbol(Symbol.iterator): ?]

作者：LH