07箭头函数中的this|Sikara

07箭头函数中的this

箭头函数中this是在定义函数的时候绑定的，而不是在执行函数的时候绑定
箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this，所以也就不能用作构造函数
加粗句子理解：this是继承自父执行上下文中的this,比如这里的箭头函数中的this.name，箭头函数本身与say平级以key:value的形式，也就是箭头函数本身所在的对象为b,而b的父执行上下文就是window,因此这里的this.x实际上表示的是window.x，因此输出的是111。
执行上下文：描述js的代码执行环境（当前执行代码中片段的变量，函数，作用域链等）
js采用栈的方式对执行上下文进行管理

 var name = 111;
    var b = {
        name:222,
        say: ()=> { //say里的函数进栈，创建执行上下文，this继承父执行上下文中的this，也就是b所在的全局上下文（window）
            console.log(this.name)
        }
    }
 b.say() //111

简单代码测试

var name = 111;
function xxx() {
        console.log(this) //xxx()函数直接调用返回window
       return  {
            name:333,
            say: function () { //xxx()返回一个对象
                console.log(this) //.say()对象调用方法，this指向该对象
                return  ()=>{  //.say()返回一个箭头函数 ，其父执行上下文就是say属性的最外层函数function () {...}
                    console.log(this.name)//function () {...}其this对象本身就被调整成了xxx()返回的对象  333
                    return function (){//.say()()返回一个匿名函数
                        console.log(this.name)//匿名函数自调用（匿名函数的执行环境是全局作用域，window） 111
                    }
                }
            }

        }
    }

    xxx().say()()()
    let a = {
        name:444,
        test:xxx().say() //333 箭头函数this指向不能改变 如果是一般函数声明是444
    }
    a.test()()

在事件中使用this

let element = document.querySelector('.q');
    element.onclick = ()=>{ //element的父执行上下文是window
        console.log(this)
    }
    element.addEventListener('click',function (){ //本身由element节点对象进行调用
        console.log(this)
    })

this指向的三种情况
1. obj.fun() fun 中的 this->obj ，自动指向.前的对象
2. new Fun() Fun 中的 this->正在创建的新对象，new 改变了函数内部的 this 指向，导致 this 指向实例化 new 的对象
3. fun() 和匿名函数自调 this 默认->window，函数内部的 this，this 默认是指向 window 的
补充

07箭头函数中的this

08-12 call-apply的总结

JavaScript中的this指向问题

sikara