自己动手用原生实现 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/call/apply

总结一下我们要模拟的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!!! 这还不行啊

上一篇:Codeforces 767B. The Queue 模拟题


下一篇:MVC进阶篇(三)——model层数据验证