JavaScript Functions詳解（包含ES6箭頭函數）

ConardLi 發布于2019-08-02 11:24 / 323人閱讀

摘要：對象方法當用作對象屬性時，函數稱為方法箭頭函數中的當箭頭函數與常規函數用作對象方法時，有一個重要的行為。這是因為的處理在兩個函數聲明樣式中是不同的。會將函數移動到其范圍的頂部。變量聲明被提升，但不是值，因此不是函數。

簡介

JavaScript中的所有內容都發生在函數中。

函數是一個代碼塊，可以定義一次并隨時運行。

函數可以選擇接受參數，并返回一個值。

JavaScript中的函數是對象，一種特殊的對象：函數對象。

另外，函數被稱為第一類函數，因為它們可以被賦值給一個值，它們可以作為參數傳遞并用作返回值。

句法

讓我們從“舊的”，ES6 / ES2015之前的語法開始。這是一個函數聲明：

function dosomething(foo) {
  // do something
}

（現在，在ES6 / ES2015世界中，被稱為常規函數）

函數可以分配給變量（這稱為函數表達式）：

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

命名函數表達式類似，但在堆棧調用跟蹤中更好用，這在發生錯誤時很有用 - 它保存函數的名稱：

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

ES6 / ES2015引入了箭頭函數，在使用內聯函數時，特別適合用作參數或回調函數：

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

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

參數

一個函數可以有一個或多個參數。

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

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

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

從ES6 / ES2015開始，函數可以具有參數的默認值：

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

這允許您在不填充所有參數的情況下調用函數：

dosomething(3)
dosomething()

ES2018引入了參數的尾隨逗號，這個功能有助于減少因移動參數時丟失逗號而導致的錯誤（例如，移動中間的最后一個）：

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

dosomething(2, "ho!")

您可以將所有參數包裝在一個數組中，并在調用函數時使用spread運算符：

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

當使用許多參數的時候，記住這些參數可能很困難。這里可以使用對象，解構保留參數名稱：

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

返回值

每個函數都返回一個值，默認情況下為“undefined”。

任何函數在其代碼行結束時，或者當執行流找到return關鍵字時終止。

當JavaScript遇到此關鍵字時，它退出函數執行并將控制權交還給其調用者。

如果傳遞一個值，則該值將作為函數的結果返回：

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

您只能返回一個值。

要_模擬_返回多個值，您可以返回對象文字或數組，并在調用時使用解構賦值功能。

使用數組：

使用對象：

嵌套函數

可以在其他函數中定義函數：

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

嵌套函數的作用域是外部函數，不能從外部調用。

對象方法

當用作對象屬性時，函數稱為方法：

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

car.start()

箭頭函數中的this

當箭頭函數與常規函數用作對象方法時，有一個重要的行為。考慮這個例子：

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

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

這是因為this的處理在兩個函數聲明樣式中是不同的。箭頭函數中的this指的是封閉函數上下文，在本例中是window對象

this，使用function（）引用宿主對象

這意味著箭頭函數不適合用于對象方法和構造函數（箭頭函數構造函數實際上會在調用時引發TypeError）。

IIFE，立即調用函數表達式

IIFE是一個在聲明后立即執行的功能：

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

您可以將結果分配給變量：

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

它們非常方便，因為您無需在定義后多帶帶調用該函數。

Function 掛載

執行代碼之前的JavaScript會根據某些規則對其進行重新排序。

會將函數移動到其范圍的頂部。這就是下面例子不會報錯的原因;

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

在內部，JavaScript在調用之前移動函數，以及在同一范圍內找到的所有其他函數：

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

現在，如果你使用命名函數表達式，因為你正在使用變量，會發生不同的事情。變量聲明被提升，但不是值，因此不是函數。

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

不會工作：

這是因為內部發生的事情是：

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

“let”聲明也是如此。var聲明也不起作用，但是報的不是同樣的錯誤：

這是因為var聲明被提升并用undefined作為值初始化，而const和let被提升但未初始化。

GPU云服務器云服務器箭頭函數包含文件函數 javascript包含 javascript包含哪些

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52970.html

JavaScript Functions詳解（包含ES6箭頭函數）

摘要：對象方法當用作對象屬性時，函數稱為方法箭頭函數中的當箭頭函數與常規函數用作對象方法時，有一個重要的行為。這是因為的處理在兩個函數聲明樣式中是不同的。會將函數移動到其范圍的頂部。變量聲明被提升，但不是值，因此不是函數。簡介 JavaScript中的所有內容都發生在函數中。函數是一個代碼塊，可以定義一次并隨時運行。函數可以選擇接受參數，并返回一個值。 JavaScript中的函數是對...

894974231 2019-08-23 11:37 評論0 收藏0
[譯]JavaScript ES6箭頭函數指南

摘要：以下例子的目的是使用來展示一個每秒都會更新的時鐘當嘗試在的回調中使用來引用元素時，很不幸，我們得到的只是一個屬于回調函數自身上下文的。前言胖箭頭函數（Fat arrow functions），又稱箭頭函數，是一個來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞說，箭頭函數的語法=>，是受到了CoffeeScript 的影響，并且它與CoffeeScript中的=>...

makeFoxPlay 2019-08-14 12:35 評論0 收藏0
ES6 系列之箭頭函數

摘要：回顧我們先來回顧下箭頭函數的基本語法。主要區別包括沒有箭頭函數沒有，所以需要通過查找作用域鏈來確定的值。箭頭函數并沒有方法，不能被用作構造函數，如果通過的方式調用，會報錯。回顧我們先來回顧下箭頭函數的基本語法。 ES6 增加了箭頭函數： let func = value => value; 相當于： let func = function (value) { return ...

hsluoyz 2019-08-26 11:58 評論0 收藏0
探索ES2015：箭頭函數（Arrow Functions）

摘要：注意箭頭函數有幾個使用注意點不可以使用對象，該對象在函數體內不存在。不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。不可以使用命令，因此箭頭函數不能用作函數。前言在JavaScript的世界中函數被譽為一等公民，每當我們需要在JS定義一個新的函數，我們都會毫不猶豫的function() {}，也許我們可以開始換一種方式來定義一個函數，也就是本文的主角箭頭函數，一個...

pkwenda 2019-08-19 18:02 評論0 收藏0
ES6對函數的改動

摘要：改動函數的改變不算太大，都是一些其他語言早就有的功能，而一直比較欠缺的，比如函數參數默認值，任意參數的表示法，最大的變化應該是支持箭頭函數其他語言稱之為表達式，一種對匿名函數的一種簡寫方式，以下來探討一下函數在中的一些改變默認參數任意參數操 ES6 functions改動 ????ES6函數的改變不算太大，都是一些其他語言早就有的功能，而Javascript一直比較欠缺的，比如函數參數...

kk_miles 2019-08-22 10:38 評論0 收藏0