面试官问：能否模拟实现bind

jiezi

6 年前

前言
用过 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;
那么面试官可能会问是否想过 bind 到底做了什么，怎么模拟实现呢。
附上之前写文章写过的一段话：已经有很多模拟实现 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 的一个属性，每个函数都可以调用它。<br/>2、bind 本身是一个函数名为 bind 的函数，返回值也是函数，函数名是 bound。（打出来就是 bound 加上一个空格）。知道了 bind 是函数，就可以传参，而且返回值 ’bound ‘ 也是函数，也可以传参，就很容易写出例子 2：后文统一 bound 指原函数 original bind 之后返回的函数，便于说明。
var obj = {
name: ‘ 轩辕 Rowboat’,
};
function original(a, b){
console.log(this.name);
console.log([a, b]);
return false;
}
var bound = original.bind(obj, 1);
var boundResult = bound(2); // ‘ 轩辕 Rowboat’, [1, 2]
console.log(boundResult); // false
console.log(original.bind.name); // ‘bind’
console.log(original.bind.length); // 1
console.log(original.bind().length); // 2 返回 original 函数的形参个数
console.log(bound.name); // ‘bound original’
console.log((function(){}).bind().name); // ‘bound ‘
console.log((function(){}).bind().length); // 0
由此可以得出结论 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：
var obj = {
name: ‘ 轩辕 Rowboat’,
};
function original(a, b){
console.log(‘this’, this); // original {}
console.log(‘typeof this’, typeof this); // object
this.name = b;
console.log(‘name’, this.name); // 2
console.log(‘this’, this); // original {name: 2}
console.log([a, b]); // 1, 2
}
var bound = original.bind(obj, 1);
var newBoundResult = new bound(2);
console.log(newBoundResult, ‘newBoundResult’); // original {name: 2}
从例子 3 种可以看出 this 指向了 new bound()生成的新对象。
可以分析得出结论 3：
1、bind 原先指向 obj 的失效了，其他参数有效。
2、new bound 的返回值是以 original 原函数构造器生成的新对象。original 原函数的 this 指向的就是这个新对象。另外前不久写过一篇文章：面试官问：能否模拟实现 JS 的 new 操作符。简单摘要：new 做了什么：
1. 创建了一个全新的对象。<br/>2. 这个对象会被执行 [[Prototype]]（也就是__proto__）链接。<br/>3. 生成的新对象会绑定到函数调用的 this。<br/>4. 通过 new 创建的每个对象将最终被[[Prototype]] 链接到这个函数的 prototype 对象上。<br/>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 很好的解决这一问题
function Student(name){
if(this instanceof Student){
this.name = name;
console.log(‘name’, name);
}
else{
throw new Error(‘ 必须通过 new 关键字来调用 Student。’);
}
}
var student = new Student(‘ 轩辕 ’);
var notAStudent = Student.call(student, ‘Rowboat’); // 不抛出错误，且执行了。
console.log(student, ‘student’, notAStudent, ‘notAStudent’);

es5-shim 的源码实现 bind

直接附上源码（有删减注释和部分修改等）
var $Array = Array;
var ArrayPrototype = $Array.prototype;
var $Object = Object;
var array_push = ArrayPrototype.push;
var array_slice = ArrayPrototype.slice;
var array_join = ArrayPrototype.join;
var array_concat = ArrayPrototype.concat;
var $Function = Function;
var FunctionPrototype = $Function.prototype;
var apply = FunctionPrototype.apply;
var max = Math.max;
// 简版源码更复杂些。
var isCallable = function isCallable(value){
if(typeof value !== ‘function’){
return false;
}
return true;
};
var Empty = function Empty() {};
// 源码是 defineProperties
// 源码是 bind 笔者改成 bindFn 便于测试
FunctionPrototype.bindFn = function bind(that) {
var target = this;
if (!isCallable(target)) {
throw new TypeError(‘Function.prototype.bind called on incompatible ‘ + target);
}
var args = array_slice.call(arguments, 1);
var bound;
var binder = function () {
if (this instanceof bound) {
var result = apply.call(
target,
this,
array_concat.call(args, array_slice.call(arguments))
);
if ($Object(result) === result) {
return result;
}
return this;
} else {
return apply.call(
target,
that,
array_concat.call(args, array_slice.call(arguments))
);
}
};
var boundLength = max(0, target.length – args.length);
var boundArgs = [];
for (var i = 0; i < boundLength; i++) {
array_push.call(boundArgs, ‘$’ + i);
}
// 这里是 Function 构造方式生成形参 length $1, $2, $3…
bound = $Function(‘binder’, ‘return function (‘ + array_join.call(boundArgs, ‘,’) + ‘){return binder.apply(this, arguments); }’)(binder);

if (target.prototype) {
Empty.prototype = target.prototype;
bound.prototype = new Empty();
Empty.prototype = null;
}
return bound;
};
你说出 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 爱好者 | 所知甚少，唯善学。个人博客 segmentfault 个人主页掘金个人主页知乎 github