手写实现call，apply，bind

js中改变this指向的方法： call、apply、bind、以及ES6的箭头函数
面试中不乏被问到这几个方式，如果让你手写实现呢？
巧记一下吧~~~

1. call

特点：

1. 第一个参数为this指向目标: 不传，传null、undefined，会默认指向window
2. 第一个参数之后就是函数中所需参数，多个参数之间以逗号隔开
3. 会立即执行该函数

        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 实现call

1. 第一步拿到调用call的函数

Function.prototype.mCall = function () {
            console.log(this); // 打印了调用mCall的函数
        }

people.speak.mCall();

this：

image.png

2. 第二步传入对象，并将需要改变this的函数放到对象上

        Function.prototype.mCall = function (that) {
            console.log(this); // 打印了调用mCall的函数

            that = that || window;

            var n = this.name; // 函数名
            // 修改函数名，以防与对象中其他属性冲突
            n +=  (Math.random() + '').slice(2, 12) + new Date() * 1;

            // 将函数赋给对象
            that[n] = this;

            that[n]();
            
        }

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

3. 解决参数传递

        Function.prototype.mCall = function (that, ...argu) {
            console.log(this); // 打印了调用mCall的函数
            
             that = that || window;

            var n = this.name; // 函数名
            // 修改函数名，以防与对象中其他属性冲突
            n +=  (Math.random() + '').slice(2, 12) + new Date() * 1;

            // 将函数赋给对象
            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. 第一个参数为this指向目标: 不传，传null、undefined，会默认指向window
2. 第一个参数之后就是函数中所需参数，多个参数使用数组参数
3. 会立即执行该函数

        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 实现apply

和call类似，只不过传参时apply使用的是数组

        Function.prototype.mApply = function (that, argu) {
            that = that || window;
            var n = this.name; // 函数名
            // 修改函数名，以防与对象中其他属性冲突
            n +=  (Math.random() + '').slice(2, 12) + new Date() * 1;

            // 将函数赋给对象
            that[n] = this;

            that[n](...argu);

            delete that[n];
        }

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

3. bind

特点：返回一个被改变this指向的新函数

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): ƒ]

实现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