arrow function 箭头函数中的this

箭头函数

箭头函数是对正规函数的语法简化，它没有this、arguments等属性，也不能当作构造函数使用，在使用中尤其要注意箭头函数没有自己的this，它的this是绑定的父作用域上下文，箭头函数主要用在匿名函数的地方，写起来更简单，比如

let arr = ["hi","it's ok","i'm tracy mcgrady"];
arr.map(function(ele){
	return ele.length;
})
//[ 2, 7, 17 ]

//可以简化为
arr.map((ele)=>{
	return ele.length;
})

//只有一个参数，可以去掉参数的括号
arr.map(ele=>{
	return ele.length;
})

//函数体只有一行代码并且是return statement，可去掉return及花括号
arr.map(ele=>ele.length)

//应用解构赋值当作函数参数，length是元素string的length，而x是随意起的变量名
arr.map(({length:x})=>x)

//上一步中，x改为length变为{length:length}，根据object的缩写简化为{length}
arr.map(({length})=>length)

更多用法，请参考Arrow function expressions

普通函数中的this

在介绍箭头函数中的this之前，先看一下普通函数中的this，普通函数中的this一共3种情况

• 构造函数中的this，指的是new出来的对象
• 严格模式下，函数中的this是undefined
• 作为对象的方法被调用，那么this是调用者

下边举例说明

//构造函数中的this，指的是new出来的对象
function Person( name){
	this.name = name;
	this.x=function(){
		return this;
	}
}
let p = new Person("mcgrady");
console.log(p===p.x()) //true

//严格模式下，函数中的this是undefined
"use strict"
function f(){
	console.log(this); //undefined
}
f();

//作为对象的方法被调用，那么this是调用者
var obj2 = {
	name:"mcgrady",
	f2:function(){
		console.log(this.name)
	}
}
obj2.f2() //输出mcgrady

函数作为对象的方法被调用，this是obj2，所以输出mcgrady。

箭头函数中的this

var obj = {
	f:()=>{console.log(this.a)}
}
this.a = "hi";
obj.f()  //输出hi

f是箭头函数，箭头函数没有this，它的this是绑定了父作用域（全局作用域）上下文，父作用域的a="hi"，所以输出hi。
通过babel编译一下，更能看出箭头函数的本质，能很直观的看出箭头函数的this绑定的事父作用域。

var _this = void 0;

var obj = {
  f: function f() {
    console.log(_this.a);
  }
};
(void 0).a = "hi";
obj.f(); //输出hi

再来看一个，函数中内嵌嵌套函数

function f(){
	var ff=()=>{
		console.log(this.x)
	}
}

babel编译后，很明显箭头函数中的this也是取的父作用域的上下文

function f() {
  var _this = this;
  var ff = function ff() {
    console.log(_this.x);
  };
}

如果理解了上文中的this，也就懂了为什么Vue中的methods、computed、watch都不允许用箭头函数。