前言

用过React的同学都知道，经常会使用bind来绑定this。

import React, { Component } from react; class TodoItem extends Component{ constructor(props){ super(props); this.handleClick = this.handleClick.bind(this); } handleClick(){ console.log(handleClick); } render(){ return ( <div onClick={this.handleClick}>点击</div> ); }; } export default TodoItem;

那么面试官可能会问是否想过new到底做了什么，怎么模拟实现呢。

附上之前写文章写过的一段话：已经有很多模拟实现bind的文章，为什么自己还要写一遍呢。学习就好比是座大山，人们沿着不同的路登山，分享着自己看到的风景。你不一定能看到别人看到的风景，体会到别人的心情。只有自己去登山，才能看到不一样的风景，体会才更加深刻。

先看一下bind是什么。从上面的React代码中，可以看出bind执行后是函数，并且每个函数都可以执行调用它。

眼见为实，耳听为虚。读者可以在控制台一步步点开例子1中的obj:

var obj = {}; console.log(obj); console.log(typeof Function.prototype.bind); // function console.log(typeof Function.prototype.bind()); // function console.log(Function.prototype.bind.name); // bind console.log(Function.prototype.bind().name); // bound

因此可以得出结论1：

1、bind是Functoin原型链中Function.prototype的一个属性，每个函数都可以调用它。

2、bind本身是一个函数名为bind的函数，返回值也是函数，函数名是bound 。（打出来就是bound加上一个空格）。

知道了bind是函数，就可以传参，而且返回值bound 也是函数，也可以传参，就很容易写出例子2：

后文统一 bound 指原函数original bind之后返回的函数，便于说明。

由此可以得出结论2：

1、调用bind的函数中的this指向bind()函数的第一个参数。

2、传给bind()的其他参数接收处理了，bind()之后返回的函数的参数也接收处理了，也就是说合并处理了。

3、并且bind()后的name为bound + 空格 + 调用bind的函数名。如果是匿名函数则是bound + 空格。

4、bind后的返回值函数，执行后返回值是原函数（original）的返回值。

5、bind函数形参（即函数的length）是1。bind后返回的bound函数形参不定，根据绑定的函数原函数（original）形参个数确定。

根据结论2：我们就可以简单模拟实现一个简版bindFn

// 第一版修改this指向，合并参数 Function.prototype.bindFn = function bind(thisArg){ if(typeof this !== function){ throw new TypeError(this + must be a function); } // 存储函数本身 var self = this; // 去除thisArg的其他参数转成数组 var args = [].slice.call(arguments, 1); var bound = function(){ // bind返回的函数的参数转成数组 var boundArgs = [].slice.call(arguments); // apply修改this指向，把两个函数的参数合并传给self函数，并执行self函数，返回执行结果 return self.apply(thisArg, args.concat(boundArgs)); } return bound; } // 测试 var obj = { name: 轩辕Rowboat, }; function original(a, b){ console.log(this.name); console.log([a, b]); } var bound = original.bindFn(obj, 1); bound(2); // 轩辕Rowboat, [1, 2]

如果面试官看到你答到这里，估计对你的印象60、70分应该是会有的。

但我们知道函数是可以用new来实例化的。那么bind()返回值函数会是什么表现呢。

接下来看例子3：

从例子3种可以看出this指向了new bound()生成的新对象。

可以分析得出结论3：

1、bind原先指向obj的失效了，其他参数有效。

2、new bound的返回值是以original原函数构造器生成的新对象。original原函数的this指向的就是这个新对象。

另外前不久写过一篇文章：面试官问：能否模拟实现JS的new操作符。简单摘要：

new做了什么：

1.创建了一个全新的对象。2.这个对象会被执行[[Prototype]]（也就是proto）链接。3.生成的新对象会绑定到函数调用的this。4.通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。5.如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用会自动返回这个新的对象。

所以相当于new调用时，bind的返回值函数bound内部要模拟实现new实现的操作。

话不多说，直接上代码。

// 第三版实现new调用 Function.prototype.bindFn = function bind(thisArg){ if(typeof this !== function){ throw new TypeError(this + must be a function); } // 存储调用bind的函数本身 var self = this; // 去除thisArg的其他参数转成数组 var args = [].slice.call(arguments, 1); var bound = function(){ // bind返回的函数的参数转成数组 var boundArgs = [].slice.call(arguments); var finalArgs = args.concat(boundArgs); // new 调用时，其实this instanceof bound判断也不是很准确。es6 new.target就是解决这一问题的。 if(this instanceof bound){ // 这里是实现上文描述的 new 的第 1, 2, 4 步 // 1.创建一个全新的对象 // 2.并且执行[[Prototype]]链接 // 4.通过`new`创建的每个对象将最终被`[[Prototype]]`链接到这个函数的`prototype`对象上。 // self可能是ES6的箭头函数，没有prototype，所以就没必要再指向做prototype操作。 if(self.prototype){ // ES5 提供的方案 Object.create() // bound.prototype = Object.create(self.prototype); // 但既然是模拟ES5的bind，那浏览器也基本没有实现Object.create() // 所以采用 MDN ployfill方案 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create function Empty(){} Empty.prototype = self.prototype; bound.prototype = new Empty(); } // 这里是实现上文描述的 new 的第 3 步 // 3.生成的新对象会绑定到函数调用的`this`。 var result = self.apply(this, finalArgs); // 这里是实现上文描述的 new 的第 5 步 // 5.如果函数没有返回对象类型`Object`(包含`Functoin`, `Array`, `Date`, `RegExg`, `Error`)， // 那么`new`表达式中的函数调用会自动返回这个新的对象。 var isObject = typeof result === object && result !== null; var isFunction = typeof result === function; if(isObject || isFunction){ return result; } return this; } else{ // apply修改this指向，把两个函数的参数合并传给self函数，并执行self函数，返回执行结果 return self.apply(thisArg, finalArgs); } }; return bound; }

面试官看到这样的实现代码，基本就是满分了，心里独白：这小伙子/小姑娘不错啊。不过可能还会问this instanceof bound不准确问题。

上文注释中提到this instanceof bound也不是很准确，ES6 new.target很好的解决这一问题，我们举个例子4:

`instanceof` 不准确，`ES6 new.target`很好的解决这一问题

细心的同学可能会发现了这版本的代码没有实现bind后的bound函数的nameMDN Function.name和lengthMDN Function.length。面试官可能也发现了这一点继续追问，如何实现，或者问是否看过es5-shim的源码实现L201-L335。如果不限ES版本。其实可以用ES5的Object.defineProperties来实现。

Object.defineProperties(bound, { length: { value: self.length, }, name: { value: bound + self.name, } });

es5-shim的源码实现bind

直接附上源码（有删减注释和部分修改等）

你说出es5-shim源码bind实现，感慨这代码真是高效、严谨。面试官心里独白可能是：你就是我要找的人，薪酬福利你可以和HR去谈下。

最后总结一下

1、bind是Function原型链中的Function.prototype的一个属性，它是一个函数，修改this指向，合并参数传递给原函数，返回值是一个新的函数。

2、bind返回的函数可以通过new调用，这时提供的this的参数被忽略，指向了new生成的全新对象。内部模拟实现了new操作符。

3、es5-shim源码模拟实现bind时用Function实现了length。

事实上，平时其实很少需要使用自己实现的投入到生成环境中。但面试官通过这个面试题能考察很多知识。比如this指向，原型链，闭包，函数等知识，可以扩展很多。

读者发现有不妥或可改善之处，欢迎指出。另外觉得写得不错，可以点个赞，也是对笔者的一种支持。

文章中的例子和测试代码放在github中bind模拟实现 github。bind模拟实现预览地址 F12看控制台输出，结合source面板查看效果更佳。

// 最终版删除注释详细注释版请看上文 Function.prototype.bind = Function.prototype.bind || function bind(thisArg){ if(typeof this !== function){ throw new TypeError(this + must be a function); } var self = this; var args = [].slice.call(arguments, 1); var bound = function(){ var boundArgs = [].slice.call(arguments); var finalArgs = args.concat(boundArgs); if(this instanceof bound){ if(self.prototype){ function Empty(){} Empty.prototype = self.prototype; bound.prototype = new Empty(); } var result = self.apply(this, finalArgs); var isObject = typeof result === object && result !== null; var isFunction = typeof result === function; if(isObject || isFunction){ return result; } return this; } else{ return self.apply(thisArg, finalArgs); } }; return bound; }

参考

OshotOkill翻译的深入理解ES6 简体中文版 – 第三章函数（虽然我是看的纸质书籍，但推荐下这本在线的书）MDN Function.prototype.bind冴羽: JavaScript深入之bind的模拟实现《react状态管理与同构实战》侯策：从一道面试题，到“我可能看了假源码”

关于

作者：常以轩辕Rowboat为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少，唯善学。

博客

:https://lxchuan12.github.io/

文章版权归作者所有，未经允许请勿转载。

THE END