（es3,es5）与es6的this绑定区别

ES3 ES5 中的函数this绑定区别说区别之前先看如下两段代码

代码段一

es3与es5中函数调用this的写法如下

{
    var factary =function()
    {
       this.a="a";
        this.b="b";
       this.c="c" ;
        this.d={
           a:"a1",
            e: function(){
                console.log(this.a)    
            }
        }
    }
    console.log(new factary().d.e())
}//输出的是a1

复制代码

代码段二

es6中箭头函数调用this的写法如下

{
    var factary =function()
    {
       this.a="a";
        this.b="b";
       this.c="c" ;
        this.d={
           a:"a1",
            e: =>{
                console.log(this.a);
            }
        }
    }
    console.log(new factary().d.e())
}

输出的是a
输出的结果你们猜到了吗

两段代码的不同之处在于一个使用function定义的函数
另外的一个是用箭头函数（）=>{}定义的

两段代码的输出结果如下

分析总结：

es3和es5中this指的是该函数被调用的对象 在代码段一中d调用了e() 则this.a指的就是d这个对象里面的a输出的就是a1；

简单说在es6中调用箭头函数this.a中this指的就是当前对象 factary，所以 this.a输出的是a；

官方点说 ES6的箭头函数 箭头函数的this指的是定义时this的指向，e在定义时，this指向的是d被定义时的函数