2016/11/20
ES 5和ES 6的this指向还是有点区别，今天被问到箭头函数的this指向，我略微懵逼，赶紧又看了下。

ECMAScript 5

ES 5的this很明确，只有以下五种情况

全局

console.log(this); // this 等于 ECMAScript 在浏览器环境的 Global 对象，即 window

函数内

function foo(){
  console.log(this); // this 还是 window
}

方法调用

var obj = {
  name: 'alex',
  getName: function(){
    console.log(this.name);
  }
}
obj.getName(); // this 为 obj

/*
  想下面那样调用
  那么 this 就指向了 window
  因为这样调用时，函数的执行环境是全局的
 */
var bar = obj.getName;
bar();

构造函数

function Foo(){}
Foo.prototype.getName = function(){
  console.log(this.name);
}

var bar = new Foo();
bar.name = 'alex';
bar.getName(); // this 指向实例 bar

显示调用

apply和call改变函数运行时的this指向

function foo(){
  console.log(this.name);
}

var applyObj = {
  name: 'alex'
}

var callObj = {
  name: 'f0rest'
}

foo.apply(applyObj); // alex
foo.call(callObj); // f0rest

ECMAScript 6

考虑到还没有浏览器能完全解析ES 6标准，所以需要借助诸如Babel等工具转成ES 5才可以在浏览器运行

语法

// ES 5
var foo = function(options){};

// ES 6
let foo = options => {};

ES 6中的规则是，紧随箭头的 { 被解析为块的开始，而不是对象的开始
所以小括号包裹对象字面量是唯一一个你需要牢记的小窍门

this

箭头函数它没有自己的this值，它继承至外围作用域
下面这个例子，this为undefined，因为ES 6是严格模式，严格模式this为undefined

let foo = options => {
  console.log(this);
};

React 中的实践

在React组件中，注册事件有三种方式，目的是让事件函数内的this指向这个当前组件实例

// Method 1
constructor() {
  this.myEvent = this.myEvent.bind(this);
}
myEvent() {
  console.log(this);
}
render() {
  return (
    <div onClick={this.myEvent}>For test</div>
  );
}

// Method 2
myEvent() {
  console.log(this);
}
render() {
  return (
    <div onClick={this.myEvent.bind(this)}>For test</div>
  );
}

// Method 3
// 这里就是箭头函数，继承外围作用域的 this，即当前组件实例
myEvent = () => {
  console.log(this);
}
render() {
  return (
    <div onClick={this.myEvent}>For test</div>
  );
}