将此范围绑定到ES6 =>功能操作员

时间:2015-10-22 15:18:40

标签: javascript ecmascript-6

在尝试使用=>继承上下文之后ES6给我们的功能我注意到这个上下文永远不会改变。 示例:

exportOptions.plist

没有=>运算符并使用函数关键字:

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

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

javascript没有告诉你任何事情听起来很危险,人们可能会因为一个非常微妙和困难的错误而陷入困境。

2 个答案:

答案 0 :(得分:7)

它实际上只是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)
  );
}




  

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

因为:

  1. 您已经在第一时间写了该功能
  2. 您已经编写了一个关于如何调用函数的规范,以便人们知道传入一个函数,该函数从您选择的上下文中使用this

答案 1 :(得分:6)

使用function关键字时,绑定this的规则非常简单。

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

  • 在正常模式下,this将成为窗口对象。
  • 在严格模式下,this将不确定。

使用箭头功能,规则更简单。

  • 没有this个关键字。 (也不论证,或其他一些)

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

所以,总结一下:

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