不积跬步之手写bind,apply,call

promise.jpeg

这里简单的科普一下call,apply,bind他们都是用来干嘛的。

执行上下文中有四个变量：

• 变量环境
• 词法环境
• outer
• this

执行上下文分为：

• 全局执行上下文
• 函数执行上下文
• eval执行上下文

全局执行上下文中：

• 变量环境 存储 变量提升和函数提升
• 词法环境 存储 let const 以及块级作用域
• this 指向 全局本身，也就是window.
• outer 为 null

函数执行上下文中：

• 变量环境 存储 变量提升和函数提升
• 词法换 存储 let const 以及块级作用域
• outer 指向 它的上一层词法作用域 有可能是其他的函数也可能是全局
• this 指向调用它的那个瞬间来确定。

1. 如果是在没有明确指定的时候，那么它就指向window。

2. 如果使用的是call,apply,bind 就使用它们指定的对象。

3. 如果函数是对象的属性，并且是以函数的属性被调用的。

4. 如果是在构造函数里面，那么它就指向new 出来的那个对象。

现在我们知道call,apply,bind 改变的是 函数在执行的时候，它的内部执行对象。它实际上对词法作用域的一种补充。就像张三家里有一把铁锹，我像借用一下。甚至这把铁锹是公用的，我们只用的时候只需要把想借用的人

call

用法：第一个值传入要操作的对象，后面的值传入函数调用的参数。

我们的实现是基于，上面列出来的第三种情况来实现。

Function.prototype.myCall=function (context,...args){
    if(!context || context == null){
        context = window
    }
    //创造唯一的key值，作为我们构造的context内部方法名
    let fn = Symbol();
    //在context中新建一个key 为symobl的值，value是当前调用这个myCall的**函数对象**。
    context[fn] = this;
    //调用这个函数，并返回result
    let result = context[fn](...args);
    //删除这个属性
    delete context[fn];
    return result
}

apply

用法：和apply一样，区别仅仅是它后面的参数是一个数组

Function.prototype.myApply = function (context,args){
    if(!context || context == null){
        context = window;
    }
    //创造唯一的key值，作为我们构造的context内部方法名
    let fn = Symbol();
    context[fn] = this;
    let result = context[fn](...args);
    delete context[fn];
    return result;
}

bind

function isObject(it) {
    return typeof it == 'object' ? it !== null : typeof it == 'function';
};
Function.prototype.myBind = function (that,...args){
    if(typeof this !== "function"){
        throw new Error("调用的不是函数")
    }
    //当前的函数对象
    let F = this;
    let Prototype = F.prototype;
    //拿到当前函数对象的原型对象
    function boundFunction(...arr){
        return F.myApply(
            this instanceof boundFunction ? this : that,
            [...args,...arr]
        )
    }
    //维护原有的原型关系
    if(isObject(Prototype)){
        boundFunction.prototype = Prototype;
    }
    return boundFunction;
}

测试用例：

let person = {
   name:"张三"
};
function getName (){
   console.log(this.name);
}
getName.myBind(person)()

关于bind 的面试题：

输出什么

 let a = {
    name:"张三"
};
let b = {
name:"李四"
}
let c = {
name:"赵五"
}
function getName (){
    console.log(this.name);
}
getName.bind(a).bind(b).bind(c)();
// 张三

为什么会输出张三，而不是最后一个绑定的赵五呢？
可以通过上面我们自定义的bind分析一下。
可以看到 bind函数实际上是又返回了一个函数boundFunction，然后在这里函数的内部 通过apply方法来绑定执行传过来的this.我们需要关注的并不是apply的操作。
而是它前面的调用函数，我们在第一调用bind的时候，F实际就是我们初始的getName函数。
当我们调用完返回之后，就是boundFunction函数了。

let A = getName.bind(a);
//A实际上已经被替换成了`boundFunction`函数了
let B = A.bind(b);
let C = B.bind(c);

所以在下一次我们执行bind操作的时候，实际上是给新返回来的函数绑定的this。
你虽然可以绑定成功，也可以把this添加进去，但是确无法改变第一层的调用啊。

简单来说，再次bind的时候，我们已经无法对最原始的待绑定函数进行操作了，我们操作的只是它的代理

这个就是为什么我们调用多次bind而无法改变的原因