javaScript的this

默认绑定

普通函数直接调用则 this 绑定全局变量，严格模式下，this 绑定到 undefined

隐式绑定

函数作为对象的属性调用则会将 this 隐式绑定到这个对象

正常绑定

1
2
3
4
5
6
7
8
function foo() {
  console.log(this.a);
}
var obj = {
  a: 42,
  foo: foo,
};
obj.foo(); // 42

引用导致 this 丢失

在上面的例子中，如果给函数一个别名var bar = obj.foo 这个时候它引用的是函数本身，如果这样调用bar()就相当于在全局的位置调用 foo 函数。

传参过程 this 丢失

1
2
3
4
function doFoo(fn) {
  fn();
}
doFoo(foo);

即便是传入 js 内置函数也会发生 this 丢失，比如 setTimeout 等

组件传参防止 this 丢失

传入的函数

1
2
3
const lockedScale = (scale: number) => {
  controller!.lockedScale(scale); //在这里确保了是让controller调用这个函数，不会丢失this
};

传入组件

1
<InputSlider draging={lockedScale} />

显示绑定

  • apply 为函数设置绑定的 this，然后调用它
  • bind 为函数设置绑定的 this，然后返回一个新的函数，但是不会调用它