JavaScript Functions詳解（包含ES6箭頭函數(shù)）

894974231 發(fā)布于2019-08-23 11:37 / 805人閱讀

摘要：對(duì)象方法當(dāng)用作對(duì)象屬性時(shí)，函數(shù)稱為方法箭頭函數(shù)中的當(dāng)箭頭函數(shù)與常規(guī)函數(shù)用作對(duì)象方法時(shí)，有一個(gè)重要的行為。這是因?yàn)榈奶幚碓趦蓚€(gè)函數(shù)聲明樣式中是不同的。會(huì)將函數(shù)移動(dòng)到其范圍的頂部。變量聲明被提升，但不是值，因此不是函數(shù)。

簡(jiǎn)介

JavaScript中的所有內(nèi)容都發(fā)生在函數(shù)中。

函數(shù)是一個(gè)代碼塊，可以定義一次并隨時(shí)運(yùn)行。

函數(shù)可以選擇接受參數(shù)，并返回一個(gè)值。

JavaScript中的函數(shù)是對(duì)象，一種特殊的對(duì)象：函數(shù)對(duì)象。

另外，函數(shù)被稱為第一類函數(shù)，因?yàn)樗鼈兛梢员毁x值給一個(gè)值，它們可以作為參數(shù)傳遞并用作返回值。

句法

讓我們從“舊的”，ES6 / ES2015之前的語(yǔ)法開始。這是一個(gè)函數(shù)聲明：

function dosomething(foo) {
  // do something
}

（現(xiàn)在，在ES6 / ES2015世界中，被稱為常規(guī)函數(shù)）

函數(shù)可以分配給變量（這稱為函數(shù)表達(dá)式）：

const dosomething = function(foo) {
  // do something
}

命名函數(shù)表達(dá)式類似，但在堆棧調(diào)用跟蹤中更好用，這在發(fā)生錯(cuò)誤時(shí)很有用 - 它保存函數(shù)的名稱：

const dosomething = function dosomething(foo) {
  // do something
}

ES6 / ES2015引入了箭頭函數(shù)，在使用內(nèi)聯(lián)函數(shù)時(shí)，特別適合用作參數(shù)或回調(diào)函數(shù)：

const dosomething = foo => {
  //do something
}

箭頭函數(shù)與上面的其他函數(shù)定義有很大的不同，我們稍后會(huì)解釋。

參數(shù)

一個(gè)函數(shù)可以有一個(gè)或多個(gè)參數(shù)。

const dosomething = () => {
  //do something
}

const dosomethingElse = foo => {
  //do something
}

const dosomethingElseAgain = (foo, bar) => {
  //do something
}

從ES6 / ES2015開始，函數(shù)可以具有參數(shù)的默認(rèn)值：

const dosomething = (foo = 1, bar = "hey") => {
  //do something
}

這允許您在不填充所有參數(shù)的情況下調(diào)用函數(shù)：

dosomething(3)
dosomething()

ES2018引入了參數(shù)的尾隨逗號(hào)，這個(gè)功能有助于減少因移動(dòng)參數(shù)時(shí)丟失逗號(hào)而導(dǎo)致的錯(cuò)誤（例如，移動(dòng)中間的最后一個(gè)）：

const dosomething = (foo = 1, bar = "hey") => {
  //do something
}

dosomething(2, "ho!")

您可以將所有參數(shù)包裝在一個(gè)數(shù)組中，并在調(diào)用函數(shù)時(shí)使用spread運(yùn)算符：

const dosomething = (foo = 1, bar = "hey") => {
  //do something
}
const args = [2, "ho!"]
dosomething(...args)

當(dāng)使用許多參數(shù)的時(shí)候，記住這些參數(shù)可能很困難。這里可以使用對(duì)象，解構(gòu)保留參數(shù)名稱：

const dosomething = ({ foo = 1, bar = "hey" }) => {
  //do something
  console.log(foo) // 2
  console.log(bar) // "ho!"
}
const args = { foo: 2, bar: "ho!" }
dosomething(args)

返回值

每個(gè)函數(shù)都返回一個(gè)值，默認(rèn)情況下為“undefined”。

任何函數(shù)在其代碼行結(jié)束時(shí)，或者當(dāng)執(zhí)行流找到return關(guān)鍵字時(shí)終止。

當(dāng)JavaScript遇到此關(guān)鍵字時(shí)，它退出函數(shù)執(zhí)行并將控制權(quán)交還給其調(diào)用者。

如果傳遞一個(gè)值，則該值將作為函數(shù)的結(jié)果返回：

const dosomething = () => {
  return "test"
}
const result = dosomething() // result === "test"

您只能返回一個(gè)值。

要_模擬_返回多個(gè)值，您可以返回對(duì)象文字或數(shù)組，并在調(diào)用時(shí)使用解構(gòu)賦值功能。

使用數(shù)組：

使用對(duì)象：

嵌套函數(shù)

可以在其他函數(shù)中定義函數(shù)：

const dosomething = () => {
  const dosomethingelse = () => {}
  dosomethingelse()
  return "test"
}

嵌套函數(shù)的作用域是外部函數(shù)，不能從外部調(diào)用。

對(duì)象方法

當(dāng)用作對(duì)象屬性時(shí)，函數(shù)稱為方法：

const car = {
  brand: "Ford",
  model: "Fiesta",
  start: function() {
    console.log(Started)
  }
}

car.start()

箭頭函數(shù)中的this

當(dāng)箭頭函數(shù)與常規(guī)函數(shù)用作對(duì)象方法時(shí)，有一個(gè)重要的行為?？紤]這個(gè)例子：

const car = {
  brand: "Ford",
  model: "Fiesta",
  start: function() {
    console.log(Started ${this.brand} ${this.model})
  },
  stop: () => {
    console.log(Stopped ${this.brand} ${this.model})
  }
}

stop（）方法不能像你期望的那樣工作。

這是因?yàn)閠his的處理在兩個(gè)函數(shù)聲明樣式中是不同的。箭頭函數(shù)中的this指的是封閉函數(shù)上下文，在本例中是window對(duì)象

this，使用function（）引用宿主對(duì)象

這意味著箭頭函數(shù)不適合用于對(duì)象方法和構(gòu)造函數(shù)（箭頭函數(shù)構(gòu)造函數(shù)實(shí)際上會(huì)在調(diào)用時(shí)引發(fā)TypeError）。

IIFE，立即調(diào)用函數(shù)表達(dá)式

IIFE是一個(gè)在聲明后立即執(zhí)行的功能：

;(function dosomething() {
  console.log("executed")
})()

您可以將結(jié)果分配給變量：

const something = (function dosomething() {
  return "something"
})()

它們非常方便，因?yàn)槟鸁o(wú)需在定義后多帶帶調(diào)用該函數(shù)。

Function 掛載

執(zhí)行代碼之前的JavaScript會(huì)根據(jù)某些規(guī)則對(duì)其進(jìn)行重新排序。

會(huì)將函數(shù)移動(dòng)到其范圍的頂部。這就是下面例子不會(huì)報(bào)錯(cuò)的原因;

dosomething()
function dosomething() {
  console.log("did something")
}

在內(nèi)部，JavaScript在調(diào)用之前移動(dòng)函數(shù)，以及在同一范圍內(nèi)找到的所有其他函數(shù)：

function dosomething() {
  console.log("did something")
}
dosomething()

現(xiàn)在，如果你使用命名函數(shù)表達(dá)式，因?yàn)槟阏谑褂米兞?，?huì)發(fā)生不同的事情。變量聲明被提升，但不是值，因此不是函數(shù)。

dosomething()
const dosomething = function dosomething() {
  console.log("did something")
}

不會(huì)工作：

這是因?yàn)閮?nèi)部發(fā)生的事情是：

const dosomething
dosomething()
dosomething = function dosomething() {
  console.log("did something")
}

“l(fā)et”聲明也是如此。var聲明也不起作用，但是報(bào)的不是同樣的錯(cuò)誤：

這是因?yàn)?b>var聲明被提升并用undefined作為值初始化，而const和let被提升但未初始化。

GPU云服務(wù)器云服務(wù)器箭頭函數(shù) 包含文件函數(shù) javascript包含 javascript包含哪些

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

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

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

登陸后可評(píng)論

0條評(píng)論

894974231

男|高級(jí)講師

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

TA的文章

智能防疫解決方案：UAILAB推出以“數(shù)字哨兵”為首的智能防疫解決方案

閱讀 1130·2022-07-19 10:19
C++list類模擬實(shí)現(xiàn)

閱讀 1985·2021-09-02 15:15
搭建移動(dòng)端布局框架:重拾flex

閱讀 1092·2019-08-30 15:53
CSS基礎(chǔ)篇--CSS3 calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)

閱讀 2743·2019-08-30 13:45
項(xiàng)目中JavaScript 中最大的安全整數(shù)

閱讀 2727·2019-08-26 13:57
使用 js 修飾器封裝 axios

閱讀 2084·2019-08-26 12:13
你真的了解Object.defineProperty嗎？

閱讀 1080·2019-08-26 10:55
側(cè)滑展開筆記

閱讀 633·2019-08-26 10:46

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

JavaScript Functions詳解（包含ES6箭頭函數(shù)）

相關(guān)文章