ES(ECMAScript)之箭頭函數

IntMain 發(fā)布于2019-08-23 18:27 / 566人閱讀

摘要：箭頭函數是中最具影響力的變化之一，它們現在被廣泛使用。自引入箭頭函數以來，它徹底改變了代碼的編寫方式。與常規(guī)函數相比，箭頭函數的指向不同。箭頭函數也不能用作構造函數，當實例化對象時會引發(fā)。處理事件時也是同樣的問題。

箭頭函數是ES6 / ES2015中最具影響力的變化之一，它們現在被廣泛使用。

自引入箭頭函數以來，它徹底改變了JavaScript代碼的編寫方式。

這是一個簡單而受歡迎的變化，它允許您使用更短的語法編寫函數，比如：

const myFunction = function foo() {
    //...
}

const myFunction = () => {
    //...
}

如果函數體只包含一行語句，則可以省略花括號：

const myFunction = () => doSomething()

傳遞參數：

const myFunction = (param1, param2) => doSomething(param1, param2)

如果只有一個參數，則可以省略括號：

const myFunction = param => doSomething(param)

隱式返回

箭頭函數具有隱式返回：返回值不必使用return關鍵字。

函數體中只有一行語句時有效：

const myFunction = () => "test"
//返回"test"
myFunction()

另一個例子，返回一個對象（記得在花括號外加一對大括號，避免它被認為是函數體的括號）：

const myFunction = () => ({value: "test"})
//返回{value: "test"}
myFunction()

this在箭頭函數中是如何使用的

this根據上下文環(huán)境而不同，也取決于JavaScript的模式（是否是嚴格模式）。

與常規(guī)函數相比，箭頭函數的this指向不同。

當定義為對象的方法時，在常規(guī)函數中，它指的是對象，可以這樣做：

const car = {
    model: "Fiesta",
    manufacturer: "Ford",
    fullName: function() {
        return `${this.manufacturer} {this.model}`
 }
}

返回字符串 "Ford Fiesta"

箭頭函數的作用域繼承自運行環(huán)境，所以代碼car.fullName()將不起作用，將返回字符串“undefined undefined”：

const car = {
    model: "Fiesta",
    manufacturer: "Ford",
    fullName: () => {
        return `${this.manufacturer} $  {this.model}`
    }
}

因此，箭頭函數不適合作為對象方法。

箭頭函數也不能用作構造函數，當實例化對象時會引發(fā)TypeError。

處理事件時也是同樣的問題。 DOM事件偵聽器將this設置為目標元素，如果您在事件處理程序中依賴this，則需要常規(guī)函數：

const link = document.querySelector("#link")
link.addEventListener("click", () => {
    // this === window
})

const link = document.querySelector("#link")
link.addEventListener("click", function() {
    // this === link
})

云服務器 GPU云服務器箭頭函數 ECMAScript ECMAScript 6 ECMAScript6

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

轉載請注明本文地址：http://systransis.cn/yun/105255.html

ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發(fā)布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發(fā)。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0
ECMAScript 6新特性印象之一：新語法

摘要：下例實現了一個數組的迭代器在中，可迭代數據結構比如數組都必須實現一個名為的方法，該方法返回一個該結構元素的迭代器。原話是還可以傳遞返回值。前記按照規(guī)劃，明年年中，ECMAScript 6(ES6)就要正式發(fā)布了。最近抽空看了Dr. Axel Rauschmayer的幾篇文章和演講PPT，對新特性有了些了解。趁沒忘，抓緊記錄下，夾雜自己的感受。計劃分三部分：新語法...

馬忠志 2019-08-21 12:28 評論0 收藏0
重讀《學習JavaScript數據結構與算法-第三版》-第2章 ECMAScript與TypeScr

摘要：第二種接口的概念和面向對象編程相關接口視為一份合約，在合約里可以定義這份合約的類或接口的行為接口告訴類，它需要實現一個叫做的方法，并且該方法接收一個參數。定場詩八月中秋白露，路上行人凄涼；小橋流水桂花香，日夜千思萬想。心中不得寧靜，清早覽罷文章，十年寒苦在書房，方顯才高志廣。前言洛伊安妮·格羅納女士所著的《學習JavaScript數據結構與算法》第三版于2019年的5月份...

TZLLOG 2019-08-26 10:44 評論0 收藏0
React類，方法綁定（第三部分）

摘要：使用箭頭函數和構造函數當方法被調用時，會保留上下文。我們能使用這個特征用下面的方法在構造函數中重定義函數。在調用方法的方使用函數綁定語法你也可以直接在非構造函數里面的里面直接使用函數綁定。這是React和ECMAScript6／ECMAScript7結合使用系列文章的第三篇。下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始...

livem 2019-08-20 17:59 評論0 收藏0
常用ECMAScript6語法歸納

摘要：對象的解構賦值函數執(zhí)行后，返回的是一個對象。分別取出對象中屬性為和的值，根據解構賦值的規(guī)則，在左側聲明變量，放在大括號中，變量名要和屬性名保持一致。箭頭函數在中，箭頭函數就是函數的一種簡寫形式允許使用箭頭定義函數。原文博客地址，歡迎學習交流:點擊預覽聲明變量可以使用let、const關鍵字聲明變量，而不推薦使用var聲明變量 var聲明變量的問題：可以多次重復聲明同一個變量...

raledong 2019-08-22 15:14 評論0 收藏0