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
  • 我们创建了函数 bar,并在其内部手动调用了foo.call(obj),因此强制把this绑定到了obj上,无论之后如何调用bar,它总会手动在obj上调用foo
  • 由于硬绑定是非常常用的模式,因此ES5提供了内置的方法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对象


第三方库的许多函数,以及JS语言和宿主环境中许多新的内置函数,都提供了一个可选的参数,通常称为上下文(context)。其作用和bind(...)一样,确保你的回调函数使用指定的this

举个:

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

var obj = {
  id: "yt"
};

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

结果:

1 yt
2 yt
3 yt

这些函数实际上就是通过call(...)或者apply(...)实现了显式绑定。

你可能感兴趣的:(JS中的bind方法以及context上下文)