1、什么是bind

bind()方法創建一個新的函數 ，在bind()被調用時，這個新函數的this被指定 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指向會丟失。

代碼：

this< /span?>.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));