ES6-箭頭函數(shù)

wapeyang 發(fā)布于2019-08-23 10:22 / 2093人閱讀

摘要：編程中經(jīng)常定義一些短小的匿名函數(shù)，使用箭頭函數(shù)語(yǔ)法可使得這類函數(shù)的定義更加簡(jiǎn)潔。外部函數(shù)的，等價(jià)于定義個(gè)局部變量修改內(nèi)部的所以這樣，，也就無(wú)法修改箭頭函數(shù)的值的。拋異常即箭頭函數(shù)不能作為構(gòu)造函數(shù)，其也不具有屬性。

一、概述

箭頭函數(shù)是指通過(guò)=>語(yǔ)法定義的函數(shù)。JS編程中經(jīng)常定義一些短小的匿名函數(shù)，使用箭頭函數(shù)語(yǔ)法可使得這類函數(shù)的定義更加簡(jiǎn)潔。

// ES3/5方式
var fun1 = function(x, y) {
    return x + y;
}

var arr1 = [1,2,3].map(function(item){
    return item * item;
})

// 箭頭函數(shù)方式
var fun2 = (x, y) => x + y;

var arr2 = [1,2,3].map((item) => item * item)

少些了不少代碼，看著也簡(jiǎn)潔許多，有木有。

二、語(yǔ)法

一般的語(yǔ)法格式：

(param1, param2, …, paramN) => { 語(yǔ)句 }

注意參數(shù)部分和箭頭=>之間不能換行，如:

// 正確
var add1 = (x, y) => x + y; 

// 正確
var add2 = (x,             
    y) => x + y;
    
// 正確(=>后面不會(huì)自動(dòng)插入分號(hào)的)
var add3 = (x, y) => 
x + y;

// 語(yǔ)法錯(cuò)誤 Uncaught SyntaxError: Unexpected token =>
var add4 = (x, y) 
    => x + y;

 // 語(yǔ)法錯(cuò)誤 Uncaught SyntaxError: Unexpected token =>
var add5= x 
    => x + 2;

上例中add4定義會(huì)報(bào)錯(cuò)，原因在解析的時(shí)候(x, y)后面會(huì)自動(dòng)插入分號(hào)，所以當(dāng)解析=>時(shí)就報(bào)錯(cuò)了。

如果花括號(hào)里只包含一個(gè)return語(yǔ)句，則可以簡(jiǎn)寫為：

(param1, param2, …, paramN) => 表達(dá)式 // 等價(jià)于 => { return 表達(dá)式; }

因?yàn)閷?duì)象字面量也是用花括號(hào)表示的，所以當(dāng)表達(dá)式是個(gè)對(duì)象字面量時(shí)需要用括號(hào)包?。?/p>

var a = p => ({a: p}) // 不能寫成：p => {a: p}

如果有且只有一個(gè)形參，則可以省略括號(hào)，簡(jiǎn)寫為：

param => {語(yǔ)句} // 等價(jià)于 （param） => {語(yǔ)句}

如上例中的fun1定義：

var fun1 = （x, y) => x + y;
// 等價(jià)于
var fun1 = (x, y) => { return x + y; }

三、特性

箭頭函數(shù)不僅僅更方便定義匿名函數(shù)，它還具有一些特性，這些使得箭頭函數(shù)在使用上也更方便。
箭頭函數(shù)一般定義在一個(gè)函數(shù)內(nèi)部，箭頭函數(shù)的函數(shù)體內(nèi)是可以訪問(wèn)外部函數(shù)定義的局部變量的（閉包），但是外部函數(shù)還有兩個(gè)特殊的變量：this和arguments。因?yàn)槊總€(gè)函數(shù)都具有自己的this和arguments變量，所以當(dāng)內(nèi)部函數(shù)訪問(wèn)外部函數(shù)這兩個(gè)變量時(shí)，我們一般采用這種方式：

var outer = {
    name: "outer",
    say: function() {
        var _arguments = arguments, // 先把a(bǔ)rguments賦值給局部變量_arguments 
            _this = this; // 先把this賦值給局部變量_this
        
        function inner() {
            console.log(arguments.length); // 內(nèi)部函數(shù)的arguments
            console.log(_arguments.length); // 通過(guò)局部變量_arguments訪問(wèn)外部函數(shù)的arguments變量
            
            console.log(this.name); // 內(nèi)部函數(shù)的this
            console.log(_this.name); // 通過(guò)局部變量_this訪問(wèn)外部函數(shù)的this變量
        }
        
        return inner;
    }
}

但是箭頭函數(shù)體可以直接訪問(wèn)外部函數(shù)的this和arguments變量?。?！逆天啊。

3.1 箭頭函數(shù)“不具有自己的this變量” 1 特性語(yǔ)法

箭頭函數(shù)體內(nèi)this變量指向外部函數(shù)的this。如上例可以寫為：

var outer = {
    name: "outer",
    say: function() {
        return () => { console.log(this.name); } // 外部函數(shù)outer的this，
    }
}

并且通過(guò)call，apply，bind函數(shù)也是無(wú)法修改箭頭函數(shù)的this變量的。

var outer = {
    name: "outer",
    say: function() {
        var inner = () => { console.log(this.name); } // 依舊外部函數(shù)outer的this，
        return inner.bind({name: "inner"}) //
    }
}

2 特性原理

箭頭函數(shù)并不是真的不具有自己的this變量，只是它重新修改this變量的值。

var outer = {
    name: "outer",
    say: function() {
        return () => { console.log(this.name); } // 外部函數(shù)outer的this，
    }
}

// 等價(jià)于：
var outer = {
    name: "outer",
    say: function say() {
        var _this = this; // 定義個(gè)局部變量_this
        return function () {
            this = _this; // 修改內(nèi)部的this
            console.log(this.name);
        };
    }
};

所以這樣call，apply，bind也就無(wú)法修改箭頭函數(shù)的this值的。

3.2 箭頭函數(shù)“不具有自己的arguments變量”

跟this變量類似箭頭函數(shù)也“不具有自己的arguments變量”，原理跟this類似。

總結(jié)一句話：箭頭函數(shù)是為了特殊的使用場(chǎng)景（即更方便的定義和使用匿名函數(shù)），它的這些特性也是為了方便其使用。

四、使用限制 4.1 不能用new 操作符

對(duì)箭頭函數(shù)使用new操作符會(huì)拋TypeError異常。

var A = () => {}
var a = new A(); //拋異常 Uncaught TypeError: A is not a constructor

即箭頭函數(shù)不能作為構(gòu)造函數(shù)，其也不具有prototype屬性。原因應(yīng)該是其內(nèi)部的this變量被重寫了，不能作為構(gòu)造函數(shù)理所當(dāng)然。但是箭頭函數(shù)也是函數(shù)：

var a = () => {};
console.log(a instanceof Function); // true

總結(jié)一句話：箭頭函數(shù)是不能作為構(gòu)造函數(shù)的特殊函數(shù)。

4.2 跟其他運(yùn)算符一起用

箭頭函數(shù)=>不是運(yùn)算符，當(dāng)箭頭函數(shù)作為右值跟其他運(yùn)算符一起運(yùn)算操作時(shí)其具有特殊的解析順序

function func(callback) {
    // 一般函數(shù)方式
    callback = callback || function() {} // 沒(méi)問(wèn)題
    // 報(bào)錯(cuò)了，語(yǔ)法錯(cuò)誤：Uncaught SyntaxError: Unexpected token )
    callback = callback || () => {};
    // 這樣寫就對(duì)了
    callback = callback || (() => {});
}

總結(jié)一句話：箭頭函數(shù)雖然不是運(yùn)算符，但其寫法和解析有點(diǎn)像運(yùn)算符的操作。當(dāng)箭頭函數(shù)作為右值參與其他運(yùn)算符的運(yùn)算時(shí)記得加上括號(hào)。

4.3 需要使用自己this的函數(shù)

箭頭函數(shù)"沒(méi)有自己的this"，所以它不適用那些需要使用自己this的場(chǎng)景（如成員方法，事件回調(diào)函數(shù)等）

// 成員方法
var outer = {
    name: "outer",
    say: () => { 
        // 這里的this不是outer，但是我們期望在成員方法的this應(yīng)該指向?qū)ο蟊旧?        console.log(this.name);  
    }
}

// 事件處理函數(shù)
document.getElementById("test").onclick = function() {
  console.log(this); // 這里的this不是觸發(fā)事件的DOM對(duì)象
}

總結(jié)一句話：箭頭函數(shù)雖然寫起了比較爽，但不能濫用，它是有特殊應(yīng)用場(chǎng)景的。要懂得什么時(shí)候不該用。

參考

MDN 箭頭函數(shù)

w3cPlus ES6學(xué)習(xí)筆記：箭頭函數(shù)

JavaScript 語(yǔ)句后應(yīng)該加分號(hào)么？

云服務(wù)器 GPU云服務(wù)器箭頭函數(shù) ES6 es6-系列 ES6入門

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96284.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wapeyang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

mnist

閱讀 2840·2023-04-25 20:06
極光KVM：2核/2G/50G/1T流量/100Mbps/洛杉磯三網(wǎng)GIA/年付249元，普通套餐5

閱讀 1455·2021-08-26 14:15
#七夕促銷#VoLLcloud：香港CMI三網(wǎng)直連VPS七折優(yōu)惠，100Mbps起，月付低至$2.8

閱讀 2248·2021-08-12 13:27
前端基本功-示例代碼（一）

閱讀 1785·2019-08-30 15:55
CSS之元素居中

閱讀 3483·2019-08-30 13:20
Tranform + Transitions + Animation

閱讀 2839·2019-08-29 15:12
深入理解-CSS內(nèi)聯(lián)元素之line-height

閱讀 3344·2019-08-29 15:06
CSS漸變之背景、邊框、字體漸變

閱讀 2871·2019-08-29 14:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

ES6-箭頭函數(shù)

相關(guān)文章