箭头函数在对象中的this指向，及适用环境

最近在研究ES6的新特性，箭头函数。发现了几个问题，希望跟大家分享一下，也希望能帮助下同样有此困惑的童鞋们。

正常的箭头函数是这样的：

var fn = (a, b) => {
    return a + b
};

fn(1,2)  //3

这样是没有问题的。

当然，箭头函数出现的原因是为了规范化js中的this指向问题，给我们的编程带来效率。

像以往的var tent = this这种写法，通过箭头函数都可以解决。

究其原因，是因为箭头函数的this指向的是当前的作用域，而非运行时调用函数的对象：

var obj = {
	age:18,
	getAge:function(){
		var b = this.age;
		var fn = () => new Date().getFullYear() - this.age;
		return fn();
	}
}

console.log(obj.getAge());  //1998

通常，在传统函数中，这里的this.age是指向windows的，但是当我们使用箭头函数处理时，由于箭头函数处于obj的作用域中，所以其this指向了obj而非windows。

我们可以验证一下：

var obj = {
　　age:18,
　　getAge:function(){
　　　　var b = this.age;
　　　　var fn = function(){
       　　new Date().getFullYear() - this.age;
       }
　　　　return fn();
　　}
}

console.log(obj.getAge());  //Uncaught TypeError: Cannot read property 'age' of undefined

 

在传统函数中，this指向了window。

可是由此出现了一个问题，就是当我们将箭头函数直接用于对象的方法时，this的指向就发生了变化：

var obj = {
　　age:18,
　　getAge: () => this.age
}

console.log(obj.getAge());  //Uncaught TypeError: Cannot read property 'age' of undefined

这是由于目前为止，箭头函数还不能够直接作为对象的方法使用造成的，同理，在类中：

class obj () {
	constructor (name) {
		this.name = name
	}
	sayName = () => this.name
}

console.log(obj.sayName()); //Uncaught TypeError: obj.sayName is not a function

因此，当我们在使用箭头函数时，需要搞明白我们到底应该用它做什么。建议将一些需要传参并且不作为对象方法使用的函数写作箭头函数会更适合一些。

同时，如果你的对象中有些方法可能需要在上下文转换时使用到原对象的内容时，一样可以使用箭头函数。相信我，它将给你的编程带来无与伦比的体验。

转载于:https://www.cnblogs.com/githubzy/p/5780135.html