引言

内容速递

看了本文您能了解到的知识！ 。

在本篇文章中，将带你了解 什么是bind ， bind的用途 、 如何手写bind 以及 工作中实际使用bind的场景 .

在JavaScript中， bind() 方法是用来 创建一个新函数 ，并将其 绑定到指定的对象 上，从而在调用该函数时确保函数中的 this 关键字指向绑定的对象.

1、什么是bind

bind() 方法 创建一个新的函数 ，在bind()被调用时，这个新函数的 this 被指定 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用.

MDN文档 ： Function.prototype.bind() 。

2、bind的语法

语法:

                        
                          function.bind(thisArg[, arg1[, arg2[, ...]]])

                        
                      

参数:

• thisArg ：被绑定到函数上的对象，即当调用绑定后的函数时，函数中的 this 关键字会指向该对象。如果 thisArg 参数为 null 或 undefined ，则 this 关键字将指向全局对象（在浏览器中通常是 window 对象）.

• arg1, arg2, ... ：要传递给函数的参数。这些参数将按照顺序传递给函数，并在调用函数时作为函数参数使用.

返回值:

返回一个 原函数的拷贝 ，并拥有指定的 this 值和初始参数.

3、浅试一下bind

代码:

                        
                          this.name = 'guizimo'
let obj = {
  name: 'zimo',
  getName: function() {return this.name}
}

console.log(obj.getName())    // zimo

let newGetName = obj.getName
console.log(newGetName())     // guizimo

let bindGetName = newGetName.bind(obj)
console.log(bindGetName())     // zimo

                        
                      

简述代码:

1. 第一次打印 zimo ，可以理解为是打印对象内的一个属性，此时的 this 是指向 obj对象 .

2. 第二次打印 guizimo ，因为当前环境是对象外，因为当前执行的函数是 newGetName() ，因此函数内部的 this 指向全局对象.

3. 通过 bind 生成一个 新的拷贝函数 ，当前执行的函数 bindGetName() 的 this 指向 obj对象 .

4、手写bind

这是面试官最喜欢的环节了 。

思路:

• bind() 方法返回一个新函数，因此需要定义一个函数来返回新函数。
• 在新函数中，需要使用 apply() 或 call() 方法来调用原始函数并传递正确的 this 值和参数。
• 新函数需要接受一个 thisArg 参数来指定要绑定的对象，并可以接受任意数量的其他参数。

代码:

                        
                          /**
 * 手写bind
 * @returns {function(): any}
 */
Function.prototype.myBind = function () {
  // 处理函数
  let args = Array.from(arguments);
  let thisArg = args.shift();
  // 暂存this
  let thisFunc = this;
  // 因为需要构造函数，所以不能是匿名函数了
  const fBound = function () {
    const newArgs = args.concat(Array.from(arguments));
    // 判断是否为构造函数
    thisArg = this instanceof fBound ? this : thisArg;
    return thisFunc.apply(thisArg, newArgs);
  }
  // 直接将原函数的prototype赋值给绑定函数
  fBound.prototype = this.prototype;
  // 返回
  return fBound;
}

                        
                      

简述代码:

1. 通过 Array.from() 将 arguments 转化为数组对象，通过 shift() 取出 thisArg 。
2. 使用 thisFunc 暂存当前函数的 this 。
3. 创建一个闭包函数 fBound ， newArgs 接收合并处理的 arguments 。
4. 判断 fBound 是否为构造函数，如果是构造函数，返回闭包的 this ，反之，返回外部拿到的 thisArg ，使用 thisArg 来接收。
5. 使用 thisFunc.apply 传递 thisArg 值和参数 newArgs 。
6. 直接将原函数的 prototype 赋值给 fBound 。
7. 返回 fBound 。

5、使用场景

5.1、创建绑定函数

这是 bind 最基本的一种使用方式了，也就是 创建一个新的函数 .

代码:

                        
                          this.name = 'guizimo'
let obj = {
  name: 'zimo',
  getName: function() {return this.name}
}

console.log(obj.getName())    // zimo

let newGetName = obj.getName
console.log(newGetName())     // guizimo

let bindGetName = newGetName.bind(obj)
console.log(bindGetName())     // zimo

                        
                      

简述代码:

1. 第一次打印 zimo ，可以理解为是打印对象内的一个属性，此时的 this 是指向 obj对象 。
2. 第二次打印 guizimo ，因为当前环境是对象外，因为当前执行的函数是 newGetName() ，因此函数内部的 this 指向全局对象。
3. 通过 bind 生成一个 新的拷贝函数 ，当前执行的函数 bindGetName() 的 this 指向 obj对象 。

5.2、创建偏函数

如果需要创建一个自定义函数，需要固定部分参数，那么 bind 就有它独特的作用了 。

代码:

                        
                          function add (a, b) {
  return a + b
}

const res1 = add(1, 2)
console.log(res1)  // 3

// 创建一个偏函数，将1作为预设的参数
const addP = add.bind(null, 1)

const res2 = addP(2)
console.log(res2)  // 3

const res3 = addP(3)
console.log(res3)  // 4

const res4 = addP(4)
console.log(res4)  // 5

                        
                      

简述代码:

1. 创建了一个 add 函数，调用 add(1, 2) ，正常打印 3 。
2. 创建一个偏函数 addP ，将1作为预设的参数，调用 addP(2) ，也可以正常打印 3 ，后续调用 addP(3) 、 addp(4) ，皆打印正确的数值， 实现了对一个参数的固定 。

6、在工作中有遇到bind的使用场景吗

6.1、React中bind的场景

在 JSX 中传递的事件不是一个字符串，而是一个函数（如: onClick={this.handleClick} ），此时 onClick 即是中间变量，所以处理函数中的 this指向 会丢失.

代码:

                        
                          <button onClick={this.handleClick.bind(this)}>点击</button>

//此时this指向是当前实例对象
handleAdd = () => {
    console.log(this)
    this.setState({
        ...
    })
}

                        
                      

解决这个问题就是给调用函数时 bind(this) ，从而使得无论事件处理函数如何传递， this指向 都是当前实例化对象。或者 使用箭头函数声明一个函数 ，这样函数内的 this 也是指向当前实例.

6.2、在事件处理程序中访问事件目标的this值

在JavaScript中，需要在事件处理程序中访问事件目标的 this 值。在这种情况下，可以使用 bind() 方法将事件处理程序绑定到事件目标上，以便在调用事件处理程序时， this 关键字始终指向事件目标.

代码:

                        
                          const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
  // 在这里可以使用 this 访问按钮元素的属性和方法
}.bind(button));

                        
                      

博客说明与致谢

文章所涉及的部分资料来自互联网整理，其中包含自己个人的总结和看法，分享的目的在于共建社区和巩固自己.

引用的资料如有侵权，请联系本人删除！ 。

感谢勤劳的 自己 ， 个人博客 ， GitHub ，公众号 【归子莫】 ，小程序 【子莫说】 。

如果你感觉对你有帮助的话，不妨给我点赞鼓励一下，好文记得收藏哟！ 。

幸好我在，感谢你来！ 。

最后此篇关于【JavaScript】你真的熟悉bind吗的文章就讲到这里了,如果你想了解更多关于【JavaScript】你真的熟悉bind吗的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。