JS中的bind方法以及context上下文

先解釋一下this的硬綁定


function foo() {
  console.log(this.a);
}

var obj = {
  a: 2
}

var bar = function() {
  foo.call(obj);
};

bar(); // 2
setTimeout(bar, 100); // 2
// 硬綁定的bar不可能再修改它的this
bar.call(window); // 2
  • 我們創(chuàng)建了函數(shù) bar,并在其內(nèi)部手動(dòng)調(diào)用了foo.call(obj),因此強(qiáng)制把this綁定到了obj上,無論之后如何調(diào)用bar,它總會(huì)手動(dòng)在obj上調(diào)用foo
  • 由于硬綁定是非常常用的模式,因此ES5提供了內(nèi)置的方法Function.prototype.bind

bind的用法


function foo(something) {
  console.log(this.a, something);
  return this.a + something;
}

var obj = {
  a: 2
};

var bar = foo.bind(obj);
var b = bar(); // 2 3
console.log(b); // 5

context對(duì)象


第三方庫(kù)的許多函數(shù),以及JS語言和宿主環(huán)境中許多新的內(nèi)置函數(shù),都提供了一個(gè)可選的參數(shù),通常稱為上下文(context)。其作用和bind(...)一樣,確保你的回調(diào)函數(shù)使用指定的this

舉個(gè)??:

function foo(el) {
  console.log(el, this.id);
}

var obj = {
  id: "yt"
};

[1, 2, 3].forEach(foo, obj);

結(jié)果:

1 yt
2 yt
3 yt

這些函數(shù)實(shí)際上就是通過call(...)或者apply(...)實(shí)現(xiàn)了顯式綁定。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容