ES6之箭头函数的应用指向注意事项

Posted 2021-12-08 时光-ing

ES6的箭头函数:使用=>来定义（ function(){}等价于 ()=>{} ）
一、箭头函数的五个应用案例
（一）俩参数

let add = function(a,b){   //案例一（ES5）：俩参数  40
    return a + b;
};
console.log(add(10,30));

let add2 = (a,b)=>{   //案例一（ES6）：俩参数  300
    return a + b;
}
console.log(add2(100,200));

let add6 = (val1,val2)=>val1+val2;  //案例二（ES6）：俩个参数（简写） 88
console.log(add6(44,44));

（二）一个参数

let add3 = val=>{   //案例三（ES6）：一个参数  105
    return val + 5;
}
console.log(add3(100));   

let add4 = val=>val + 5;   //案例三（ES6）：一个参数  100
// let add4 = val=>(val + 5); 相当于 {return val + 5;}
console.log(add4(95));

let add5 = val=>val;   //案例三（ES6）：一个参数  66
// 相当于 {return val;}
console.log(add5(66));

（三）无参数

let add7 = ()=>'hello world'+123456;   //案例四（ES6）：无参数  hello world
console.log(add7());

（四）返回对象，一个参数

let add8 = id=>{    //案例五（ES6）：返回对象 
    return {
        id:id,
        name:'小马哥'
    }
};   
let obj=add8(1001);
console.log(obj);

let add9 = id=>({id:id,name:'小马哥'})   //案例五（ES6）：返回对象（简写）              
let obj2=add9(1001);
console.log(obj2);

（五）闭包函数的应用

 //案例六（ES5）：闭包函数            
let fn =(function(){
    return function(){
        console.log('hello es6'); 
    }
})();
fn();
//案例六（ES6）：闭包函数（使用箭头函数）
let fn2 =(()=>{
    return ()=>{
        console.log('hello es6');
    }
})();
fn2();

二、箭头函数的指向问题

 // ES5中的this指向：取决于调用该函数的上下文对象
let PageHandle = {
     id:123,
     init:function(){
         // 给文档添加一个click事件
         document.addEventListener('click',function(event){
             // this是PageHandle对象，doSomeThings是当前对象PageHandle下的一个方法。
             // 此时会报错:Uncaught TypeError: this.doSomeThings is not a function at htmlDocument.<anonymous>
             this.doSomeThings(event.type);  

             // 因为此刻this指向的是整个文档-documnet，故而此时显示的console.log(this)是#document
             // console.log(this);   

             // 修改：在其后加上.bind修改this指向；或者使用ES6的箭头函数解决该问题
         }.bind(this),false);
     },
     doSomeThings:function(type){
         console.log(`事件类型:${type},当前id:${this.id}`);   // 事件类型:click,当前id:123
     }
 };
 PageHandle.init();  //调用PageHandle中的init方法

// ES6中箭头函数没有this指向，一旦使用箭头函数当前则不存在作用域链，需要往上找
// 箭头函数内部this值只能通过查找作用域链确定
let PageHandle = {
    id:123,
    init:function(){
        document.addEventListener('click',(event)=>{
            this.doSomeThings(event.type);  
            // console.log(this);  此时作用域链查找至PageHandle
            // 如果将init:function(){}改为init:()=>{}则查找作用域链至Windows上，报错
        },false);
    },
    doSomeThings:function(type){
        console.log(`事件类型:${type},当前id:${this.id}`);   // 事件类型:click,当前id:123
    }
};
PageHandle.init(); 

三、箭头函数的注意事项
（1）使用箭头函数，函数内部没有arguments

let getVal= (a,b)=>{
    console.log(this); //当前this会指向windows
    console.log(arguments);
    return a + b;
}
console.log(getVal(1,3));
// 此时会报错：Uncaught ReferenceError: arguments is not defined at getVal 

（2）箭头函数不能使用new关键字来实例化对象

let Person = ()=>{

}
let p = new Person();
// 报错：Uncaught TypeError: Person is not a constructor
// 原因：function函数也是一个对象，里面有constructor，但是箭头函数不是一个对象。