之前在看 react tutorial 的時候, 看到下面這段

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this), //就是這邊 !!!
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});

當時對 success callback 那邊的 bind(this) 有點在意, 然而當下沒有特別去查, 後來比較有空在 SO 查到了說明

purpose of .bind(this) at end of ajax callback?

下面會說明為什麼 react ajax success 要用 bind

看完後又研究了一下, 參考了良葛格, Andyyou, MDN, 還有一些大陸網站才發現平時自己可能太少用到 bind 了, 在這邊稍微紀錄一下, 基本上不會太詳細, 這邊主要是給我自己備忘用的

bind 是什麼?

首先 bind 如同字面上的意思就是 綁定, 至於要綁定什麼呢?要綁定到誰呢?我的理解是:

bind 把想綁定的東西綁到 this 上, 就醬

補充:呼叫 bind 的時候, 其實會 new 一個新的 function, 但是我說一堆定義倒不如你直接去看MDN, 所以囉, 詳細的定義以及特性請參考 MDN, 強烈建議去看 MDN, 不要一知半解的唷

MDN中文

MDN英文

Talk is cheap show me the code

ShowMeTheCode

下面這是一個把狗的 getAge function 給貓用的範例, 一切都很合理, getAge function 給貓之後, 貓.getAge() 會得到貓的年齡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var dog = {
age: 7,
getAge: function () {
return this.age;
},
};
console.log(dog.getAge()); // 7
var getDogAge = dog.getAge; //沒有(), 因為沒有要執行 function
var cat = {
age: 29,
getAge: getDogAge, // 把狗的 getAge 給貓用
};
console.log(cat.getAge()); // 29 很合理的 this 參考的對象就是誰呼叫 function 就參考誰

那如果 bind 之後呢?請看下方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var dog = {
age: 7,
getAge: function () {
return this.age;
},
};
console.log(dog.getAge()); // 7
var getDogAge = dog.getAge.bind(dog); //沒有(), 因為沒有要執行 function
var cat = {
age: 29,
getAge: getDogAge,
};
console.log(cat.getAge()); // 7 因為我們強迫 getAge 內的 this 一定要參考 dog 的 age

乍看之下你可能會覺得 哪個腦殘會這樣用, 本來很 OK 的東西被你玩壞了, OK OK 只是舉例而已, 下面是一些用途

梁葛格有提到 Partial Function 可以用 bind 做到, 請看下方

1
2
3
4
5
6
7
function plus(a, b) {
return a + b;
}
var addSeven = plus.bind(undefined, 7);
console.log(addSeven(3)); // 10
console.log(addSeven(23)); //30

react 部份解釋請看下方

1
2
3
4
5
6
success: function (data) {
this.setState({ data: data }); // 這邊想要爽 call setState 一定要 bind 阿阿阿阿
}.bind(this),
// 這個 this 就是為了要把整個 component 的 this 綁進去 success callback function
// 不然上面那行 this.setState() 會 call 不到, ajax 裡面哪知道 setState() 是什麼
// 因此需要把 this(外面有 setState() 的) 榜定到 this(success function裡面的)

參考資料