this

basic

  • function 调用时,有隐式参数 this
  • function 可以在调用时,改变 this,箭头函数不行,总是定义时 context 所指
  • function 作为对象方法调用时,隐式传入对象作为 this

this 继承

{
  ...
  add: function() {},
  addAll: function addAll(pieces) {
    var self = this;
    _.each(pieces, function (piece) {
      self.add(piece);
    });
  },
  ...
}

在这里,你希望在内层函数里写的是this.add(piece),不幸的是,内层函数并未从外层函数继承 this 的值。在内层函数里,this 会是 window 或 undefined, 临时变量 self 用来将外部的 this 值导入内部函数。(另一种方式是在内部函数上执行.bind(this),两种方法都不甚美观。)

箭头函数内的 this 值继承自外围作用域

// ES6
{
  ...
  addAll: function addAll(pieces) {
    _.each(pieces, piece => this.add(piece));
  },
  ...
}

在 ES6 的版本中,注意 addAll 方法从它的调用者处获取了 this 值,内部函数是一个箭头函数,所以它继承了外围作用域的 this 值。

结论:箭头函数和 function 要配合使用,无法完全弃用 function A different way of understanding this in JavaScriptopen in new window

函数 · TypeScript中文网 · TypeScript——JavaScript的超集open in new window 参看 this和箭头函数 一节,有助理解

this的值在函数被调用的时候才会指定 顶级的非方法式调用会将 this视为window

易错题

  var name = 'mike'
  var people = {
    name: 'jordan',
    say: function (){
      console.log(this.name)
    }
  }
  function d(i) {
    return i()
  }

  d(people.say) // mike
  // 参数,按值传递,复制过来一个函数,与原对象无关系
Last Updated:
Contributors: cyio