ES 6 中的箭頭函式及用法

清和時光發表於2021-05-20
函式

ES6標準新增了一種新的函式：Arrow Function（箭頭函式）。
主要的幾種寫法如下：

組成: 引數 => 語句,
引數不是1個: (引數,引數2)=>語句
語句不止一條: 引數 =>{語句1;語句2;return 返回值}
返回的物件格式: 引數=>({物件})

通常函式的定義方法

var fn1 = function(a, b) {
    return a + b
}
 
function fn2(a, b) {
    return a + b
}

使用ES6箭頭函式語法定義函式，將原函式的“function”關鍵字和函式名都刪掉，並使用“=>”連線引數列表和函式體。

var fn1 = (a, b) => {
    return a + b
}
 
(a, b) => {
    return a + b
}

當函式引數只有一個，括號可以省略；但是沒有引數時，括號不可以省略。

// 無參
var fn1 = function() {}
var fn1 = () => {}
 
// 單個引數
var fn2 = function(a) {}
var fn2 = a => {}
 
// 多個引數
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
 
// 可變引數
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

箭頭函式相當於匿名函式，並且簡化了函式定義。箭頭函式有兩種格式，一種只包含一個表示式，省略掉了{ ... }和return。還有一種可以包含多條語句，這時候就不能省略{ ... }和return

() => return 'hello'
(a, b) => a + b
(a) => {
  a = a + 1
  return a
}

如果返回一個物件，需要特別注意，如果是單表示式要返回自定義物件，不寫括號會報錯，因為和函式體的{ ... }有語法衝突。注意，用小括號包含大括號則是物件的定義，而非函式主體

x => {key: x} // 報錯
x => ({key: x}) // 正確

箭頭函式中的this 與 普通函式中的 this 指向性問題

箭頭函式中，this指向的固定化，並不是因為箭頭函式內部有繫結this的機制，實際原因是箭頭函式根本沒有自己的this，導致內部的this就是外層程式碼塊的this。正是因為它沒有this，所以也就不能用作建構函式。所以在定義物件的時候，定義物件屬性，裡面的this指向的一般是全域性，或者這個物件所在的那個環境中的this。
一個簡單的例子，你就能明白了

var name = 'window'; 

var A = {
   name: 'A',
   sayHello1: () => {
      console.log(this.name)
   },
	sayHello2(){
	 console.log(this.name)
	}
}

A.sayHello1();// 輸出的是 window
A.sayHello2();// 輸出的是 A

相關文章