ES6系列教程第八篇--箭頭函式詳解
阿新 • • 發佈:2019-02-14
一、什麼是箭頭函式
箭頭函式是ES6新增的一種函式,我們先看看一個簡單的ES5匿名函式。
function(x){
return x*x;
}
寫成箭頭函式就是下面這個樣子:
(x)=>x*x;
對於習慣ES5的同學,初次認識箭頭函式的感覺,書寫簡潔,但是有點晦澀。我們來分析下:
入參寫在()中,=>指向函式體,對於單行表示式,{...}以及return都省略了
如果是多行表示式,如下:
let f = function (x,y){ if(x>y){ return x; }else{ return y; } } //等價於 let f =(x,y)=>{ if(x>y){ return x; }else{ return y; } }
此時,{...}於return是不能省略的。
箭頭函式能使我們的書籤更加簡潔。
setTimeout(function(x,y){
x+y
},300)
//等價於
setTimeout((x,y) => x+y, 300)
var result = values.sort(function (a, b) {
return a - b;
});
// 等價於
var result = values.sort((a, b) => a - b);
有沒有一些高大上的感覺呢。
二、this的用法
箭頭函式除了對書寫的簡潔外,對this物件也進行了改造。我們先來看個ES5的this用法:
var handle = { event: 'click', getEvent: function () { var b = this.event; // 'click' var fn = function () { console.log( this.event); // undefine,this指向window或undefined }; return fn(); } }; handle.getEvent()//此時呼叫的物件是window,所以是window.event
handle.geEvent()返回的是fn(),此時等價執行window.fn();所以為undefined。
如果要是fn函式中的this直接指向當前的物件handle,我們就需要轉換下:
var handle = { event: 'click', getEvent: function () { var b = this.event; // 'click' self = this;//獲取當前的this物件,並傳遞到fn中 var fn = function () { console.log( self.event); //此時,可以正確的獲取到click }; return fn(); } }; //或者用bind繫結this物件 var handle = { event: 'click', getEvent: function () { var b = this.event; // 'click' var fn = function () { console.log( this.event); // //此時,可以正確的獲取到click }.bind(this); return fn(); } }; handle.getEvent();
我們在用箭頭函式重寫handle
var handle = {
event: 'click',
getEvent: function () {
var b = this.event; // 'click'
var fn= ()=>console.log( this.event);//'click'
return fn();
}
};
handle.getEvent();
此時,fn函式體中的this物件,不需要轉換,就是指向當前的handle函式物件。
所以,總結一下,ES5函式中的this指向函式的呼叫者,ES6的箭頭函式中this指向是其函式,是一種詞法作用域。
一直以來this物件一直是一個令人頭痛的問題,在物件方法中使用this,必須非常小心。箭頭函式 ” 繫結 ” this,很大程度上解決了這個困擾。