Javascript之bind

最新推荐文章于 2024-07-07 17:45:05 发布

Annnnty

最新推荐文章于 2024-07-07 17:45:05 发布

阅读量573

点赞数

分类专栏： JavaScript 文章标签：前端 javascript 函数

本文链接：https://blog.csdn.net/weixin_40346046/article/details/78283104

版权

本文探讨了JavaScript的bind方法，解释了它是什么以及如何工作。通过分析bind的实现，阐述了它如何改变函数的this指向并预置参数。文章还介绍了如何手动实现bind，并详细解释了模拟bind时涉及的关键点，包括构造函数使用场景和原型链的处理。

摘要由CSDN通过智能技术生成

写在最前

最近开始重新学习一波js，框架用久了有些时候觉得这样子应该可以实现发现就真的实现了，但是为什么这么写好像又说不太清楚，之前读了LucasHC以及冴羽的两篇关于bind的文章感觉自己好像基础知识都还给体育老师了哈哈哈，所以危机感爆棚，赶紧重头复习一遍。本次主要围绕bind是什么；做了什么；自己怎么实现一个bind，这三个部分。其中会包含一些细节代码的探究，往下看就知道。

所以bind是什么

bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。

var result = fun.bind(thisArg[, arg1[, arg2[, ...]]]) 
result(newArg1, newArg2...)

没看懂没事接着往下看。

bind到底做了什么

从上面的介绍中可以看出三点。首先调用bind方法会返回一个新的函数(这个新的函数的函数体应该和fun是一样的)。同时bind中传递两个参数，第一个是this指向，即传入了什么this就等于什么。如下代码所示：

this.value = 2
var foo = {
    value: 1
}
var bar = function() {
  console.log(this.value)
}
var result = bar.bind(foo)
bar() // 2
result() // 1,即this === foo

第二个参数为一个序列，你可以传递任意数量的参数到其中。并且会预置到新函数参数之前。

this.value = 2
var foo = {
    value: 1
};
var bar = function(name, age, school) {
  console.log(name) // 'An'
  console.log(age) // 22
  console.log(school) // '家里蹲大学'
}
var result = bar.bind(foo, 'An') //预置了部分参数'An'
result(22, '家里蹲大学') //这个参数会和预置的参数合并到一起放入bar中

我们可以看出在最后调用result(22, '家里蹲大学')的时候，其内部已经包含了在调用bind的时候传入的'An'。

一句话总结：调用bind，就