bind实现

bind实现

Posted by limantang on November 14, 2019

bind

如果不了解bind是如何使用的请看MDN

[Bind- JavaScript MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind)

今天实现两种bind的使用

不使用new的函数bind

注意点: - 先使用ES6支持的语法实现bind - 如果浏览器不支持bind说明浏览器也不会支持ES6语法, 那就用ES5在实现一遍 - bind需要位于Function.prototype上 - 需要做polyfill - 需要实现的功能API - fn.bind(this)() - fn.bind(this, p1, p2)() - fn.bind(this)() - fn.bind(this, p1, p2)() - fn.bind(this)(p1) - fn.bind(this, p1)(p2)

代码地址包含ES5和ES6两个版本

包含使用new的bind实现

首先考虑几个问题, 这个版本和上一个版本区别是什么 最大的区别就是这个支持new 那么new操作背后的发生了什么, 只有知道这个关键点才能实现支持new的bind

new操作发生了什么呢

看一段简单代码

const fn = function (a){
	this.a = a;
}
const obj = new fn('a’);

这个在函数在添加new关键字之后发生了这样几步操作


const fn = function (){
	//	const temp = {}
	//	temp.__proto__ = fn.prototype
	//	temp.a = a
	this.a = a;
	//	return temp
}
const obj = new fn();
  1. 首先生成一个临时对象作为this
  2. 然后将这个临时对象的__proto__指向fn.prototype, 这么做的原因其实是为了表明obj这个实例是fn这个函数实例化出来的
  3. 然后添加属性值
  4. 最后将这个临时对象return回来, 其实这个临时对象就是那个实例obj了

注意点: 这四步操作都是JS操作的, 我们是看不见的, 最后如果这个函数我们显示的return了一个对象, 那么这个临时对象this是不会return的, 会被覆盖掉

知道这些注意点之后, 我们就可以开始实现代码了

  • 首先遇到的问题应该是我们如何知道bind新生成的函数是否使用new关键字了
  • 原函数上原型的属性怎么办

代码地址 支持new操作符的bind