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

Posted 时光-ing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6之箭头函数的应用指向注意事项相关的知识,希望对你有一定的参考价值。

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,但是箭头函数不是一个对象。

以上是关于ES6之箭头函数的应用指向注意事项的主要内容,如果未能解决你的问题,请参考以下文章

ES6 从入门到精通 # 06:箭头函数 this 指向和注意事项

ES6 箭头函数this指向

ES6 箭头函数

箭头函数和 this指向

es6 箭头函数

ES6箭头函数中的this指向