ES6-箭头函数-this指向问题

箭头函数的用法

ES6 允许使用“箭头”（=>）定义函数。

let xxx = (p1,p2)=>{
    console.log(1)
    return 2
}

// 只有一个参数，可以省略括号
let xxx = p1 =>{
    console.log(1)
    return 2
}

// 代码块只有一句话时，可以省略花括号和return
let xxx = (p1,p2) => p1+p2
// 等同于
let xxx = function(p1,p2) {
    return p1 + p2;
};

// 只有一个参数，代码块只有一句话时，可以省略括号、花括号和return
let xxx = p1 => p1*2

// 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
let f = () => 5;
// 等同于
let f = function () { return 5 };

箭头函数的一个用处是简化回调函数。

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

箭头函数this的指向

在function（）中this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定，this最终指向调用它的对象

箭头函数中的this，指向与一般function定义的函数不同，箭头函数this的定义：箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。

（1）一般函数this指向在执行是绑定当运行obj.say()时候，this指向的是obj这个对象。

var x=11;

var obj={

x:22,

say:function(){

console.log(this.x)

}

obj.say();

//console.log输出的是22

（2）所谓的定义时候绑定，就是this是继承自父执行上下文！！中的this，比如这里的箭头函数中的this.x，箭头函数本身与say平级以key:value的形式，也就是箭头函数本身所在的对象为obj，而obj的父执行上下文就是window，因此这里的this.x实际上表示的是window.x，因此输出的是11。

var x=11;

var obj={

x:22,

say:()=>{

console.log(this.x);

}

obj.say();

//输出的值为11

类似的还有：

（3）这是一个普通的函数调用这个函数的对象是windows,所以this指向windows

var a=11
function test1(){
  this.a=22;
  let b=function(){
    console.log(this.a);
  };
  b();
}
var x=new test1();
输出11

箭头函数情况：

var a=11;
function test2(){
  this.a=22;
  let b=()=>{console.log(this.a)}
  b();
}
var x=new test2();
//输出22

很奇怪对不对，我是这样理解的，ES6中定义的时候绑定this的具体含义，应该继承的是父执行上下文里面的this，切忌是父执行上下文！！！这样就很多箭头函数中的指向不明确就迎刃而解了。

注意：简单对象（非函数）是没有执行上下文的！

深入理解箭头函数中的this

箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

我们可以来模拟ES5中的箭头函数转化：

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

所以在定义对象的时候，定义对象属性，里面的this指向的一般是全局，或者这个对象所在的那个环境中的this。