自己动手用原生实现 bind/call/apply

大家好！！！注册一年多的第一篇博客。

自我介绍： 本人非计算机专业出身，转行进入前端半年时间，写的东西可能观赏性不强，一起进步吧道友们。。。

接下来的一段时间， 我都会不定期整理自己理解的js知识点， 欢迎各路道友吐槽。

进入正题......  （针对新手，老司机不要嘲笑我）

首先， bind/call/apply 这改变this指向的三兄弟我们都很熟悉了， 还有其他改变this指向的方法这里就不多说了哈，要不就跑题了。。。。

你需要知道的前提 ： 这三货都是函数原型（Function.prototype）上的方法， 所以只有函数可以调用。

　　　　　　　　      小白 ： “原型是啥？”   每一个构造函数（其实就是普通函数，函数名首字母大写而已）都有一个prototype原型对象，当你引用某个实例对象上的属性时， 会先查找该对象本身有没有该属性，有就用，没有就会去构造这个实例的构造函数的原型上去找，还没有的话就会沿着构造函数的原型对象的__proto__属性往上找......haha, 好像又跑题了， 关于原型链和继承可以自行百度

真的进入正题。。。。。。

它们不是函数上的方法吗， 我们先定义个函数， 后面来改变这个函数的this指向

function out(age, sex, type) {
    console.log(age, sex, this.age, this.sex, type);
}

分别输出传入的参数age, sex, type  和   this 上的age , sex，

然后定义个对象， 后面让this指向该对象，  没错，此对象描述的就是我

let  my = {
    age : 16,
    sex : 'handsome man'
};

先试试bind, 先会用然后再来实现， 由于bind可以传两次参数，你可以这样传

const bindFunction = out.bind(my,50); //this 指向my 不会直接执行 返回一个明确this指向的函数
bindFunction('women','bind'); // 传参执行 

还可以这样传,想怎么传就怎么传，只要确保.bind后的第一个参数是你要改变this指向的对象, （如果什么都不传，this指向window）

const bindFunction = out.bind(my); //this 指向my 不会直接执行 返回一个明确this指向的函数
bindFunction('50','women','bind'); // 传参执行 

执行后输出 ：

50 "women" 16 "handsome man" "bind"

总结一下我们要模拟的bind

1.  函数A调用bind返回一个可执行的函数B， 调用bind时可传参 可不穿参， 不穿参时this指向window

2.  调用B可继续传参， 两次传参合并

3.   new B() 的构造函数依然是A， 而不是B，并且因为new操作符改变this指向的优先级最高，所以如果使用了new操作符，this指向不应该变，就是该是啥是啥（划重点）

上代码 ：

Function.prototype.myBind = function (target) { // bind 是 function 上的 方法  this 指向 target
    if (typeof  this !== 'function') {
        throw new TypeError('not a function')
    };
    const _this = this, // 保存一下this
        args = Array.prototype.slice.call(arguments, 1),// arguments是类数组,没有 slice 方法 保存第一次传入的参数
        temp = function () {}; // 定义一个中间函数
    const f = function () {
        return _this.apply(this instanceof  temp ? this : (target || window), args.concat([].slice.call(arguments))); // 合并两次传的参数
    };
    temp.prototype = _this.prototype; // 让temp 的原型 等于 this的原型
    f.prototype = new temp(); //f 继承 temp 圣杯继承可以了解下
    return f;
};

先正常执行一下myBind:

　　const bind1 = this.out.myBind(my, 50);
    // const bind2 = new bind1('women','myBind');
　　const bind3 = bind1('women','myBind');

结果是：

50 "women" 16 "handsome man" "myBind"

OK ， 和bind的输出结果一样

再使用new操作符：

　　const bind1 = this.out.myBind(my, 50);
    const bind2 = new bind1('women','myBind');
    // const bind3 = bind1('women','myBind');

结果是这样：此时this不再指向my, 而是指向new 出来的一个空对象，所以this上没有age和sex两个属性

50 "women" undefined undefined "myBind"

到此bind 我们已经完美模拟出来了  -------- 是不是有点小激动 ----------细心的道友会发现myBind 里 还借用了call 和apply!!! 这还不行啊