箭头函数中this的指向

箭头函数没有this指向, 内部的this指向依赖外层的上下文关系中this的指向,箭头函数中的this一直指向的是定义函数的环境。

            console.log(this);           //Window

            //该箭头函数的外层this指向就是上面的console.log(this)
            onclick = () => {
                console.log(this);        //Window
            };
            
            let PageHandle = {
                id : 123,
                init : function(){
                    onclick();
                }
            }
            
            PageHandle.init();     

/*------------------------------------------------------------------*/

            console.log(this);            //Window             
            //{id:123, onclick:()=>{...}...}这是个表达式, 箭头函数的指向依赖外层就是window
            let PageHandle = {
                id : 123,
                onclick : () => {
                    console.log(this);    //Window   
                },
                init : function(){
                    this.onclick();
                }
            }
            
            PageHandle.init();      

/*------------------------------------------------------------------*/

//构造函数创造的对象            
            function Test(a,b){
                this.a = a;
                this.b = b;
                this.c = function(){       

                    //调用c方法的上下文是Test实例, test.c(),  this就是调用者test              
                    console.log('c',this);                   
                    e = () =>{
                        //this指向依赖箭头函数外层, 也是test对象
                        console.log('e',this);                //e Test {a: 5, b: 8, c: ƒ, d: ƒ} 
                    }
                    e();
                }           
                this.d = () => {
                    console.log('d',this);                   //d Test {a: 5, b: 8, c: ƒ, d: ƒ}
                }
            }    
            
            const test = new Test(5, 8);

            //箭头函数内部的this依赖外层与this.a,this.b....中的this相同,  指向Test的实例test   
            test.d();                //d Test {a: 5, b: 8, c: ƒ, d: ƒ}

            test.c();                //c Test {a: 5, b: 8, c: ƒ, d: ƒ}

                                         //e Test {a: 5, b: 8, c: ƒ, d: ƒ}            
            func = test.c;

            /*    
            func()调用时没有指定一个具体的上下文对象, 相当于

            func=function(){

                console.log('c',this);

                e = () => {

                        console.log('e', this);

                };

                e();

             };   

            */    

            //其中的箭头函数的外层相当于绑定了this.c函数的上下文,
            func();                         //c Window 
                                                //e Window 
            //this.d是个箭头函数, 外层的this指向Test实例, 相当于绑定了该实例
            func02 = test.d;
            func02();            //d Test {a: 5, b: 8, c: ƒ, d: ƒ} 

/*------------------------------------------------------------------*/

//通过类创建对象

//参考构造函数创建对象, 可以将类创建对象的方式转换成构造函数创建对象的方式,

     class Test {
        constructor(a,b){
            this.a = a;
            this.b = b;
        };
        

        //类似于function Test()中的this.c属性, this依赖调用它的上下文环境, 箭头函数e依赖外层,即上面的console.log(this)的值.
        c(){
            console.log(this);
            const e = () => {
                console.log(this);
            };
            e();
        };
 //箭头方法类似于function Test()中this.d的箭头方法,箭头函数内部的this依赖外层与this.a,this.b....中的this相同,  指向Test的实例test 
        d = () => {
            console.log(this);
        };
    }
    
    const test = new Test(5, 8);
    test.c();                                //Test {a: 5, b: 8, d: ƒ}   函数c并没有绑定当前对象.

                                                 //Test {a: 5, b: 8, d: ƒ}

    test.d();                                //Test {a: 5, b: 8, d: ƒ}  箭头函数d已经绑定当前对象.

   
    func = test.c;

     //func()调用时没有指定一个具体的上下文对象,
    func();                                 //严格模式下: undefined

                                                //undefined      
    func02 = test.d;
    func02();                             //Test {a: 5, b: 8, d: ƒ}