将不同的范围绑定到ES6 =>函数操作符

Binding different this scope to ES6 => function operator

本文关键字：操作符 函数 ES6 范围 绑定      更新时间：2023-09-26

在使用ES6提供的=>特性尝试继承上下文后，我注意到这个上下文永远不能更改。例子:

var otherContext = {
  a: 2
};
function foo() {
  this.a = 1;
  this.bar = () => this.a;
}
var instance = new foo;
instance.bar(); // returns 1
instance.bar.bind(otherContext)(); // returns 1

不带=>操作符并使用function关键字:

function foo() {
  this.a = 1;
  this.bar = function () {
    return this.a;
  }
}
var instance = new foo;
instance.bar(); // returns 1
instance.bar.bind(otherContext)(); // returns 2

因此，如果我们从外部调用接收一个函数，或者只是在变量中有一个函数，我们如何确定我们是否能够将不同的this绑定到它，或者它是否只是从某处继承它?

这听起来很危险，javascript什么都不告诉你，你可能会陷入一个非常微妙和困难的错误。

这实际上只是bind的新语法，因此这不会以陷阱的方式引入任何新的内容。

var otherContext = {
  a: 2
};
function foo() {
  this.a = 1;
  this.bar = function () { return this.a }.bind(this);
}
var instance = new foo;
log(instance.bar()); // returns 1
log(instance.bar.bind(otherContext)()); // returns 1
function log(value) { 
  document.body.appendChild(
    document.createTextNode(value)
  );
}

因此，如果我们从外部调用接收一个函数，或者只是在变量中有一个函数，我们如何确定我们是否能够将不同的this绑定到它，或者它是否只是从某处继承它?

因为:

  1. 你首先要写这个函数或
  2. 你已经写了一个如何调用你的函数的规范，这样人们就知道从你选择的上下文中传递一个使用this的函数。

当使用function关键字时，绑定this的规则相当直接。

调用调用设置this(通过.call, .apply或JavaScript设置this，当函数作为方法调用时)或this获得一个众所周知的值:

  • 在正常模式下，this将是窗口对象。
  • 严格模式下，this未定义。

对于箭头函数，规则更简单。

  • 没有this关键字。(没有参数，或其他一些)

这意味着，在箭头函数中，this总是绑定到外部上下文，因为这是this的来源。

所以，总结一下:

使用箭头函数时，this的值总是来自外部上下文

相关文章：