不积跬步之手写bind,apply,call
promise.jpeg
这里简单的科普一下call,apply,bind他们都是用来干嘛的。
执行上下文中有四个变量：
- 变量环境
- 词法环境
- outer
- this
执行上下文分为：
- 全局执行上下文
- 函数执行上下文
- eval执行上下文
全局执行上下文中：
- 变量环境 存储 变量提升和函数提升
- 词法环境 存储 let const 以及块级作用域
- this 指向 全局本身，也就是window.
- outer 为 null
函数执行上下文中：
- 变量环境 存储 变量提升和函数提升
- 词法换 存储 let const 以及块级作用域
- outer 指向 它的上一层词法作用域 有可能是其他的函数也可能是全局
- this 指向调用它的那个瞬间来确定。
-
如果是在没有明确指定的时候，那么它就指向window。
-
如果使用的是call,apply,bind 就使用它们指定的对象。
-
如果函数是对象的属性，并且是以函数的属性被调用的。
-
如果是在构造函数里面，那么它就指向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而无法改变的原因
