面试官问：能否模拟实现JS的bind方法

Julylovin 发布于2019-08-26 13:25 / 965人阅读

摘要：点击那么面试官可能会问是否想过到底做了什么，怎么模拟实现呢。另外前不久写过一篇文章面试官问能否模拟实现的操作符。所以相当于调用时，的返回值函数内部要模拟实现实现的操作。文章中的例子和测试代码放在中模拟实现。

前言

用过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  (
            点击
        );
    };
}
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的一个属性，每个函数都可以调用它。

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.创建了一个全新的对象。

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很好的解决这一问题

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");

function Student2(name){
    if(typeof new.target !== "undefined"){
        this.name = name;
        console.log("name", name);
    }
    else{
        throw new Error("必须通过new关键字来调用Student2。");
    }
}
var student2 = new Student2("轩辕");
var notAStudent2 = Student2.call(student2, "Rowboat");
console.log(student2, "student2", notAStudent2, "notAStudent2"); // 抛出错误

细心的同学可能会发现了这版本的代码没有实现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

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

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，欢迎follow~

idc机房托管超融合服务器 bind()方法 bind方法 js实现数据调用方法有哪些 js的基础面试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108792.html

面试官问：JS的this指向

摘要：之前写过一篇文章面试官问能否模拟实现的和方法就是利用对象上的函数指向这个对象，来模拟实现和的。虽然实际使用时不会显示返回，但面试官会问到。非严格模式下，和，指向全局对象前言面试官出很多考题，基本都会变着方式来考察this指向，看候选人对JS基础知识是否扎实。读者可以先拉到底部看总结，再谷歌（或各技术平台）搜索几篇类似文章，看笔者写的文章和别人有什么不同（欢迎在评论区评论不同之处），...

warnerwu 2019-08-23 14:17 评论0 收藏0
面试官问：能否模拟实现JS的call和apply方法

摘要：之前写过两篇面试官问能否模拟实现的操作符和面试官问能否模拟实现的方法其中模拟方法时是使用的和修改指向。但面试官可能问能否不用和来实现呢。使用模拟实现的浏览器环境非严格模式方法的属性是。之前写过两篇《面试官问：能否模拟实现JS的new操作符》和《面试官问：能否模拟实现JS的bind方法》其中模拟bind方法时是使用的call和apply修改this指向。但面试官可能问：能否不用cal...

wuyangnju 2019-08-23 13:48 评论0 收藏0
学习 underscore 源码整体架构，打造属于自己的函数式编程类库

摘要：译立即执行函数表达式处理支持浏览器环境微信小程序。学习整体架构，利于打造属于自己的函数式编程类库。下一篇文章可能是学习的源码整体架构。也可以加微信，注明来源，拉您进前端视野交流群。前言上一篇文章写了jQuery整体架构，学习 jQuery 源码整体架构，打造属于自己的 js 类库虽然看过挺多underscore.js分析类的文章，但总感觉少点什么。这也许就是纸上得来终觉浅，绝知此...

junnplus 2019-08-26 10:40 评论0 收藏0
面试官问：能否模拟实现JS的new操作符

摘要：接下来继续看升级版例子例子轩辕轩辕轩辕是浏览器实现的查看原型方案。模拟实现知道了这些现象，我们就可以模拟实现操作符。前言用过Vuejs的同学都知道，需要用new操作符来实例化。 new Vue({ el: #app, mounted(){}, }); 那么面试官可能会问是否想过new到底做了什么，怎么模拟实现呢。附上之前写文章写过的一段话：已经有很多模拟实现new...

shenhualong 2019-08-23 12:48 评论0 收藏0
面试官问：JS的继承

摘要：用过的读者知道，经常用继承。部分源码使用点击这里查看源码面试官可以顺着这个问继承的相关问题，比如的继承用如何实现。主要就是三点子类构造函数的指向父类构造器，继承父类的静态方法子类构造函数的的指向父类构造器的，继承父类的方法。用过React的读者知道，经常用extends继承React.Component。 // 部分源码 function Component(props, conte...

stonezhu 2019-08-23 15:20 评论0 收藏0