文章目录

手写bind函数
- 第一层 - 绑定在原型上的方法
- 第二层 - 改变this的指向
- 第三层 - 支持柯里化
- 第四层 - 考虑 new 的调用
- 第五层 - 保留函数原型
总结最终版bind函数

手写bind函数

面试经常问到，能不能实现一个bind函数

当时立马写了一个无脑的bind

function bind(fn, obj, ...arr) {return fn.apply(obj, arr)
}

但是这种bind函数，一看就问题重重

函数柯里化怎么用？

new 情况怎么办？

原型对象有考虑嘛？

要是写出上面的bind函数，那么你的面试可能也会因此“草草结束”

所以下面就跟着我，五层速记bind函数原理，并实现一个自己的bind

让面试官对你刮目相看

第一层 - 绑定在原型上的方法

这一层非常的简单，因为JS原型链的特性，当我们在函数的原型对象上挂载了一个方法时，

通过xxx.bind的时候，调用的是函数原型上的方法

Function.prototype.myBind = function(){}
function add(){}
add.myBind  // 调用的就是原型上的myBind方法

详情请看下图：

第二层 - 改变this的指向

这可以说是 bind 最核心的特性了，就是改变 this 的指向，并且返回一个函数。而改变 this , 我们可以通过已知的 apply 和 call 来实现，这里我们就暂且使用 apply 来进行模拟。首先通过 self 来保存当前 this，也就是传入的函数。因为我们知道 this 具有 隐式绑定的规则（摘自《你不知道的JavaScript(上)》2.2.2 ）

代码实现：

Function.prototype.myBind = function (thisObj) {const fn = thisreturn function () {fn.apply(thisObj)}
}

下面让我们看看测试：

let obj = { a: 1 }
function myname() { console.log(this.a) }
myname.myBind(obj)(); // 1

可能很多朋友都止步于此了，因为在一般的面试中，特别是一些校招面试中，可能你只需要知道前面两个就差不多了。但是想要在面试中惊艳所有人，仍然是不够的，接下来我们继续我们的探索与研究。

第三层 - 支持柯里化

函数柯里化，是一个老生常谈的话题了，这里就不再赘述了，不了解的可以去我之前分享的函数柯里化的文章中看

而我们的 bind 函数也是类似，我们通过获取当前外部函数的 arguments ，保存成变量 args，最后 return 的方法，再一次获取当前函数的 arguments, 最终用 finalArgs 进行了一次合并。

Function.prototype.myBind = function (thisObj, ...args) {const fn = thisreturn function () {const finalArgs = [...args, ...arguments]fn.apply(thisObj, finalArgs)}
}

下面看看代码实现效果：

let obj = { i: 1 }
function myFun(a, b, c) {console.log(this.i + a + b + c);
}
let myFun1 = myFun.myBind(obj, 1, 2);
myFun1(3); // 7

一般到了这层，可以说非常棒了，但是再坚持一下下，就变成了完美的答卷。

第四层 - 考虑 new 的调用

要知道，我们的方法，通过 bind 绑定之后，依然是可以通过 new 来进行实例化的， new 的优先级会高于 bind（摘自《你不知道的JavaScript(上)》2.3 优先级）。

这一点我们通过原生 bind 和我们第四层的 _bind 来进行验证对比。

// 原生
var obj = { i: 1}
function myFun(a, b, c) {// 此处用new方法，this指向的是当前函数 myFun console.log(this.i + a + b + c);
}
var myFun1 = myFun.bind(obj, 1, 2);
new myFun1(3); // NAN// 第四层的 bind
var obj = { i: 1}
function myFun(a, b, c) {console.log(this.i + a + b + c);
}
var myFun1 = myFun._bind(obj, 1, 2);
new myFun1(3); // 7

注意，这里第一个函数使用的是 bind方法

因此我们需要在 bind 内部，对 new 的进行处理。而 new.target 属性，正好是用来检测构造方法是否是通过 new 运算符来被调用的。

接下来我们还需要自己实现一个 new ，

而根据 MDN，new 关键字会进行如下的操作：

1.创建一个空的简单JavaScript对象（即{}）；

2.链接该对象（设置该对象的constructor）到另一个对象；

3.将步骤1新创建的对象作为this的上下文；

4.如果该函数没有返回对象，则返回this。

看下实现的代码：

Function.prototype.myBind = function (thisObj, ...args) {const fn = thisreturn function () {const finalArgs = [...args, ...arguments]// 判断是否有调用new关键字if(new.target !== undefined){// 构造函数的返回值,注意这里的this为实例对象const result = fn.apply(this, finalArgs)if(result instanceof Object){//如果返回的是对象类型的值则返回该对象return result}else{// 如果返回的是正常的值类型// 则返回该实例对象return this}}else{// 如果没有new调用则按原来的操作fn.apply(thisObj, finalArgs)}}
}

看下测试的代码：

let obj = {name:'zss',age:18}
function say(name,age){this.name=namethis.age=ageconsole.log(this); // new 的优先级要高于bind，故this为该实例对象console.log(this.name); // 孙悟空
}
const xxx = say.myBind(obj)
// new 的优先级要高于bind，故this为该实例对象
console.log(new xxx('孙悟空',29)); // 输出 {name: "孙悟空", age: 29}

看到这里，你的造诣已经如火纯情了，但是最后还有一个小细节。

第五层 - 保留函数原型

以上的方法在大部分的场景下都没有什么问题了，但是，当我们的构造函数有 prototype 属性的时候，就出问题啦。因此我们需要给 prototype 补上，还有就是调用对象必须为函数。

Function.prototype.myBind = function (thisObj, ...args) {// 规定调用bind的必须是函数if(typeof this !== 'function' || {}.toString.call(this) !== '[object Function]'){throw new Error(`${this} must be a function`)}const fn = thislet bound =  function () {const finalArgs = [...args, ...arguments]// 判断是否有调用new关键字if(new.target !== undefined){// 构造函数的返回值,注意这里的this为实例对象const result = fn.apply(this, finalArgs)if(result instanceof Object){//如果返回的是对象类型的值则返回该对象return result}else{// 如果返回的是正常的值类型// 则返回该实例对象return this}}else{// 如果没有new调用则按原来的操作return fn.apply(thisObj, finalArgs)}}//继承函数的原型if(fn.prototype){// 为什么使用了 Object.create? 因为我们要防止，bound.prototype 的修改而导致self.prototype 被修改。// 不要写成 bound.prototype = self.prototype; 这样可能会导致原函数的原型被修改。bound.prototype = Object.create(fn.prototype)bound.prototype.constructor = fn}return bound
}

以上就是一个比较完整的 bind 实现了，如果你想了解更多细节的实践，可以查看。（也是 MDN 推荐的）

https://github.com/Raynos/function-bind

总结最终版bind函数

Function.prototype.myBind = function (thisObj, ...args) {// 规定调用bind的必须是函数if(typeof this !== 'function' || {}.toString.call(this) !== '[object Function]'){throw new Error(`${this} must be a function`)}const fn = thislet bound =  function () {const finalArgs = [...args, ...arguments]// 判断是否有调用new关键字if(new.target !== undefined){// 构造函数的返回值,注意这里的this为实例对象const result = fn.apply(this, finalArgs)if(result instanceof Object){//如果返回的是对象类型的值则返回该对象return result}else{// 如果返回的是正常的值类型// 则返回该实例对象return this}}else{// 如果没有new调用则按原来的操作return fn.apply(thisObj, finalArgs)}}//继承函数的原型if(fn.prototype){// 为什么使用了 Object.create? 因为我们要防止，bound.prototype 的修改而导致self.prototype 被修改。// 不要写成 bound.prototype = self.prototype; 这样可能会导致原函数的原型被修改。bound.prototype = Object.create(fn.prototype)bound.prototype.constructor = fn}return bound
}

看下测试代码：

let test1 = {age:18}
function say(a,b,c){return a+b+c+this.age
}
const xxx = say.myBind(test1)
console.log(xxx(1,2,3));  // 24    function Person(name,age){this.name = namethis.age = age
}
Person.prototype.say = function say(){console.log(this.name,this.age);
}
let obj = {name:'孙悟空',age:18}
const inherit = Person.myBind(obj)
const test2 = new inherit('白骨精',28)
test2.say() // '白骨精',28
// 原因new的优先级高于bind，所以this为new的实例对象

最好一步一步的跟着敲然后理解，最后你也能实现一个让面试官满意的bind函数！

面试让写一个“bind”函数，详解五层bind函数进阶写法，带你写出一个让面试官满意的 “bind” 函数相关推荐

【C语言】函数详解（入门到进阶）
目录前言一.什么是函数二.函数的构成三.函数的调用和声明四.函数的参数五.函数的递归总结写在后面前言最近帮家里的小朋友整理一些学习C语言的知识点有整体入门基础文章--[C语言]拯 ...
shell函数详解，基本使用进阶使用
一.基本使用 shell中可以自定义函数,然后在脚本中可调用,但必须保证先定义再使用. 1. 函数定义 function_name () {....[return int] } # 或者 functi ...
c语言中index函数,MATCH+INDEX函数详解
原标题:MATCH+INDEX函数详解小伙伴们好啊,今天和大家分享一个数据查询的最佳搭档--INDEX函数和MATCH函数.这两个函数组合,能够完成VLOOKUP函数和HLOOKUP函数的全部查找功 ...
linux下wait函数,Linux wait函数详解
wait和waitpid出现的原因 SIGCHLD --当子进程退出的时候,内核会向父进程SIGCHLD信号,子进程的退出是个异步事件(子进程可以在父进程运行的任何时刻终止) --子进程退出时,内核将 ...
php的ob函数详解
php的ob函数详解一. 相关函数简介: 1.Flush:刷新缓冲区的内容,输出. 函数格式:flush() 说明:这个函数经常使用,效率非常高. 2.ob_start :打开输出缓冲区函数格式: ...
python数据可视化-matplotlib之散点图sactter函数详解
本文转载自-[数字的可视化:python画图之散点图sactter函数详解] 感谢博主-hefei_cyp的博客最近开始学习Python编程,遇到scatter函数,感觉里面的参数不知道什么意思于是 ...
bind() c语言,c/c++ 标准库 bind 函数详解
bind函数定义在头文件 functional 中.可以将 bind 函数看作一个通用的函数适配器,它接受一个可调用对象,生成一个新的可调用对象来"适应"原对象的参数列表. bin ...
c语言中bind函数,c/c++ 标准库 bind 函数详解
bind函数定义在头文件 functional 中.可以将 bind 函数看作一个通用的函数适配器,它接受一个可调用对象,生成一个新的可调用对象来"适应"原对象的参数列表. bin ...
C语言网络编程：accept函数详解
文章目录前言函数描述代码实例如何得到客户端的IP 和端口号前言当使用tcp服务器使用socket创建通信文件描述符,bind绑定了文件描述符,服务器ip和端口号,listen将服务器端的 ...

面试让写一个“bind”函数，详解五层bind函数进阶写法，带你写出一个让面试官满意的 “bind” 函数