手写 bind/call/apply 方法

回顾一下 this 是什么？

this 是指包含它的函数作为方法被调用时所属的对象。简单拆成三句话就是：

包含它的函数
作为方法被调用
所属的对象

改变 this 指向的函数 bind、call、apply

共同点
- 目标函数调用时，改变 this 指向为指定的值。
- 三个方法都是函数的方法，挂载在 Funtion.prototype 上
不同点
- 目标函数调用 call、apply 会直接被执行。
- 目标函数调用 bind 时，不会立即执行。而是返回一个新的函数，调用新函数才会执行目标函数。

回顾 bind、call、apply 的使用

<body>
    <button class="btn">生长</button>
    <script>
    {
        var btn = document.querySelector(".btn");
        var name = "windows";
        var obj = {
            name: "Linux",
            num: 0,
            updateNum: function(){
                this.num++;
                console.log(this.num) // 1,2,3,4
            }
         }
        function fn(){
            console.log(this.name);   
        };
        btn.addEventListener("click", obj.updateNum.bind(obj))
        fn();           // windows
        fn.call(obj);   // Linux
        fn.apply(obj)   // Linux
        fn.bind(obj)(); // Linux
    }
    </script>
</body>

回顾 bind、call、apply 的参数使用。

let name = "wanna";
let age = 20;
let obj = {
    name: "hurt",
    objAge: this.age,
    objFn: function(a, b){
        console.log(this.name + "年龄" + this.age, "性别:" + a + "兴趣爱好" + b);
    }
};
let user = {
    name: "hico",
    age: 18
};

obj.objFn.call(user, "男", "篮球");             // hico年龄18 性别:男 兴趣爱好篮球
obj.objFn.apply(user, ["男","足球"]);           // hico年龄18 性别:男 兴趣爱好足球
obj.objFn.bind(user, "男", "排球")();           // hico年龄18 性别:男 兴趣爱好排球
obj.objFn.bind(user, ["男", "乒乓球"])(null);   // hico年龄18 性别:男 乒乓球 兴趣爱好null

不同的是：使用 bind 要调用它。

实现 call 函数

call 是可以被所有方法调用的，毫无疑问的定义在 Funtion.prototype 上。
绑定函数被调用时，只传入第二个参数及之后的参数。
如果调用的函数被一个对象所拥有。那么该函数在调用时，内部 this 指向该对象。

Function.prototype.MyCall = function(ctx){
    if(typeof this !== 'function'){
        throw new TypeError('error');
    }
    ctx = ctx || window;  // this 指向
    const fn = Symbol('fn');  // 唯一
    ctx[fn] = this;  // 对象指向该函数
    const arg = [...arguments].slice(1);    // 获取实参
    const rs = arguments.length > 1 ? ctx[fn](...arg) : ctx[fn]();
    delete ctx[fn];
    return rs;
};

let obj  = {
    name: "小东",
    age: 20,
    handler(a, b){
        console.log(`名字：${this.name}，年龄：${this.age}，性别：${a}，兴趣爱好：${b}`);
    }
};

let user = {
    name: '小明',
    age: 18
}

obj.handler.MyCall(user, '男', '篮球');  // 名字：小明，年龄：18，性别：男，兴趣爱好：篮球

实现 apply 函数

实现 apply 方法和 call 差不多，我们只需要对参数进行不同处理就行了。

Function.prototype.MyApply = function(ctx){
    if(typeof this !== 'function'){
        throw new TypeError('error');
    };
    const fn = Symbol('fn');  // 唯一
    ctx = ctx || window;  // this 指向
    ctx[fn] = this;  // 绑定内部函数的 this
    const rs = ctx[fn](...args);  // 执行函数
    delete ctx[fn];
    return rs;
}

let obj  = {
    name: "小东",
    age: 20,
    handler(a, b){
        console.log(`名字：${this.name}，年龄：${this.age}，性别：${a}，兴趣爱好：${b}`);
    }
};

let user = {
    name: '小明',
    age: 18
}

obj.handler.MyApply(user, ['男', '篮球']);  // 名字：小明，年龄：18，性别：男，兴趣爱好：篮球

实现 bind 函数

与 apply 和 call 不一样是，bind 要调用了才会执行，不调用只是绑定 this 指向。

Function.prototype.MyBind = function (ctx) {
    if(typeof this !== 'function'){
        throw new TypeError('error');
    };
    const newCtx = JSON.parse(JSON.stringify(ctx)) || window;  // 防止污染
    const fn = Symbol('fn');
    newCtx[fn] = this;
    const args = [...arguments].slice(1);  // 获取实参
    // 返回一个绑定函数，等待调用
    return function () {
        const allArgs = args.concat([...arguments]); // 合并实参
        // 以对象调用的形式调用 fn ，此时的 this 指向 ctx，也就是传入的需要绑定 this 指向
        return allArgs.length ? newCtx[fn](...allArgs) : newCtx[fn]();
    };
};

let obj = {
    name: "小东",
    age: 20,
    handler(a, b) {
        console.log(`名字：${this.name}，年龄：${this.age}，性别：${a}，兴趣爱好：${b}`);
    }
};
let user = {
    name: '小明',
    age: 18
};
obj.handler.bind(user, '男', '篮球')(null);  // 名字：小明，年龄：18，性别：男，兴趣爱好：篮球
obj.handler.MyBind(user, '男', '篮球')(null);  // 名字：小明，年龄：18，性别：男，兴趣爱好：篮球
obj.handler.MyBind(user, '女', '舞蹈')(null);  // 名字：小明，年龄：18，性别：女，兴趣爱好：舞蹈