6
javaScript原生bind方法的详细解析！
source link: https://blog.51cto.com/u_15875573/5929641
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
javaScript原生bind方法的详细解析！
精选 原创大家好，我是 CoderBin，在面试当中，手撕代码的场景屡见不鲜，手写 JS 当中的方法更是最常见的一种，所以本文将全面的，详细解析bind方法的实现原理，并手写出自己的bind方法，相信看完本文的小伙伴都能从中有所收获💪。
创作不易，你们的点赞收藏留言就是我最大的动力💓
如果文中有不对、疑惑的地方，欢迎各位小伙伴们在评论区留言指正🌻
手写 bind 方法
1. 函数作用
调用函数，可传入参数，改变this指向，返回一个函数可传入参数调用得到结果
2. 总体步骤
- 边界判断（this, context）
- 将调用的函数设置为对象（传入的context）的方法（改变this指向）
- 返回一个函数
- 函数里面：处理参数，调用函数，返回结果
3. 详细步骤
1. 边界判断
- 判断当前
this 是否为一个函数，否则返回错误消息 - 判断是否传入
context 参数，存在则使用 Object() 转换为对象赋给 context，否则将 window 赋值给 context
2. 将调用的函数设置为对象（传入的context）的方法（改变this指向）
3. 调用函数，得到返回值，并返回
- 调用函数，得到结果
- 删除
context 身上的 fn 函数
4. 代码实现
/**
* !实现 binBind() 方法
* @param {*} context 绑定的对象
* @param {...any} args 剩余参数
* @returns
*/
Function.prototype.binBind = function(context, ...args) {
if (typeof this !== 'function') return console.error('Error');
context = (context!==null && context!==undefined) ? Object(context) : window
context.fn = this // 这一步不能放在返回的函数里面
// 返回一个函数
return function Fn(...args2) {
// 处理参数，调用函数，返回结果
const newArr = [...args, ...args2]
const result = context.fn(...newArr)
delete context.fn
return result
}
}
* !实现 binBind() 方法
* @param {*} context 绑定的对象
* @param {...any} args 剩余参数
* @returns
*/
Function.prototype.binBind = function(context, ...args) {
if (typeof this !== 'function') return console.error('Error');
context = (context!==null && context!==undefined) ? Object(context) : window
context.fn = this // 这一步不能放在返回的函数里面
// 返回一个函数
return function Fn(...args2) {
// 处理参数，调用函数，返回结果
const newArr = [...args, ...args2]
const result = context.fn(...newArr)
delete context.fn
return result
}
}
经过原生的bind方法和手写的方法测试，我们手动实现的binBind方法也能实现原生bind方法的功能
需要注意的是：context.fn = this 这行代码必须放在返回的函数外部，否则this指向会有问题！
5. 测试代码
// 测试
function sum(num1, num2) {
console.log(num1, num2, this);
}
// 原生的 bind() 方法
const Fn = sum.bind({ name: 'bin' }, 1)
Fn(2)
// 自定义的 binBind() 方法
const Fn1 = sum.binBind({ name: 'bin' }, 1)
Fn1(2)
function sum(num1, num2) {
console.log(num1, num2, this);
}
// 原生的 bind() 方法
const Fn = sum.bind({ name: 'bin' }, 1)
Fn(2)
// 自定义的 binBind() 方法
const Fn1 = sum.binBind({ name: 'bin' }, 1)
Fn1(2)
6. 细节解析
- 原生
bind() 方法是返回一个函数，所以，这个手写的函数必须也得返回一个函数 - 改变
this 指向那一步，不能放在返回的函数中，因为函数中的 this 指向 widow; -
this 指向的就是调用 binApply() 的那个函数（隐式绑定）； - 传入的
context 参数表示：将 this 的指向改为这个参数； - 改变
this 指向其实就是在 context 上添加一个临时的方法，值为 this； - 调用
context.fn() 时，就已经改变了 this 的指向，同时得使用展开运算符传入参数 -
delete context.fn 删除那个临时方法是因为已经不需要用了
7. 核心原理
通过在传入的对象上，临时新增一个方法，这个方法的值是当前 binBind 的调用者。然后在返回的函数当中 context.fn(...argArray) 调用这个函数，通过隐式绑定的方式改变了 this 的指向，最得到结果并返回
每文一句：非静无以成学。
本次的分享就到这里，希望大家都能够有所收获。有任何疑问都可以在评论区留言，大家一起探讨、进步！
- 1赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK