JavaScript 使用函数上下文的问题

处理JavaScript函数上下文时可能遇到一些问题。在回调函数中（例如事件处理器），函数上下文与预期不符，但可以使用call或apply方法绕过。在本节中，我们看看另外两个选择：箭头函数和bind方法，在一些情况下可以更优雅地实现相同的效果。

使用箭头函数绕过函数上下文

箭头函数相比于传统的函数声明和函数表达式，可以更加优雅地创建函数。箭头函数作为回调函数还有一个更优秀的特性：箭头函数没有单独的this值。箭头函数的this与声明所在的上下文相同。

<!--随后会为该按钮附加事件处理器-->
<!--事件处理的按钮元素-->
<button id="testClick">Click Me!</button>
<script>
/*Button构造函数用于创建保存按钮的状态对象*/
function Button() {
  this.clicked = false;
  //声明用于处理点击的箭头函数。因为click是对象的方法，我们在函数内部使用this获得对象的引用。
  this.click = () =>{
    this.clicked= true;
    //在函数内，验证点击之后按钮的状态发生变化。
    if (button.clicked) {
      console.log('The button has been clicked!');
    }
  }
}

var button = new Button();
var elem = document.getElementById('testClick');
//在按钮上监听点击事件
elem.addEventListener('click', button.click);

</script>

 

 

箭头函数自身不含上下文，从定义时所在函数继承上下文。箭头函数回调函数内的this指向按钮对象。

可以看出一切正常。按钮对象保持单击状态，在button构造函数内部使用箭头函数创建单击事件：

/*Button构造函数用于创建保存按钮的状态对象*/
function Button() {
    this.clicked = false;
    //声明用于处理点击的箭头函数。因为click是对象的方法，我们在函数内部使用this获得对象的引用。
    this.click = () =>{
      this.clicked= true;
      //在函数内，验证点击之后按钮的状态发生变化。
      if (button.clicked) {
        console.log('The button has been clicked!');
      }
    }
}

 

调用箭头函数时，不会隐式传入this参数，而是从定义时的函数继承上下文。在本例中，箭头函数在构造函数内部，this指向新创建的对象本身，因此无论何时调用click函数，this都将指向新创建的button对象。

参考《JavaScript忍者秘籍》