bind的受體是對(duì)象，返回的是個(gè)新的函數(shù)。
我們知道this總是指向調(diào)用他的對(duì)象圆雁。但是有時(shí)候我們希望‘固化’這個(gè)this由桌。
也就是無論怎么調(diào)用這個(gè)返回的函數(shù)都有同樣的this值为黎。
這就是bind的作用。
語法
fun.bind(thisArg[, arg1[, arg2[, ...]]])
參數(shù)
thisArg
當(dāng)綁定函數(shù)被調(diào)用時(shí)行您，該參數(shù)會(huì)作為原函數(shù)運(yùn)行時(shí)的 this 指向铭乾。當(dāng)使用new操作符調(diào)用綁定函數(shù)時(shí)，該參數(shù)無效娃循。
this將永久地被綁定到了bind的第一個(gè)參數(shù)炕檩，無論這個(gè)函數(shù)是如何被調(diào)用的。
arg1, arg2, ...
當(dāng)綁定函數(shù)被調(diào)用時(shí)捌斧，這些參數(shù)將置于實(shí)參之前傳遞給被綁定的方法笛质。
返回值
返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝
例1
window.color = 'red';
var o = {color: 'blue'};
function sayColor(){
alert(this.color);
}
var func = sayColor.bind(o);
// 輸出 "blue", 因?yàn)閭鞯氖菍?duì)象 o，this 始終指向 o
func();
var func2 = sayColor.bind(this);
// 輸出 "red", 因?yàn)閭鞯氖莟his捞蚂，在全局作用域中this代表 window妇押。等于傳的是 window。
func2();
例2
注意：bind只生效一次
function f(){
return this.a;
}
//this被固定到了傳入的對(duì)象上
var g = f.bind({a:"azerty"});
console.log(g()); // azerty
var h = g.bind({a:'yoo'}); //bind只生效一次姓迅！
console.log(h()); // azerty
var o = {a:37, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty
例3
var myObj = {
specialFunction: function () {
},
anotherSpecialFunction: function () {
},
getAsyncData: function (cb) {
cb();
},
render: function () {
// 注意這里敲霍，寫成 this.specialFunction() 會(huì)報(bào)錯(cuò)
var that = this;
this.getAsyncData(function () {
that.specialFunction();
that.anotherSpecialFunction();
});
}
};
myObj.render();
// 使用 bind 優(yōu)化
// 當(dāng)myObj 調(diào)用，this就指向了myObj
render: function () {
this.getAsyncData(function () {
this.specialFunction();
this.anotherSpecialFunction();
}.bind(this));
}
例4
使用bind可少寫匿名函數(shù)
<button>Clict Me!</button>
<script>
var logger = {
x: 0,
updateCount: function(){
this.x++;
console.log(this.x);
}
}
// document.querySelector('button').addEventListener('click', function(){
// logger.updateCount();
// });
// 優(yōu)化后
// 因?yàn)閎ind返回就是新的函數(shù)丁存，不用再寫匿名函數(shù)了肩杈。
document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger))
參考
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
