首頁  >  文章  >  web前端  >  ES6中箭頭函數的解析(附範例)

ES6中箭頭函數的解析(附範例)

不言
不言轉載
2018-11-14 15:24:402375瀏覽

這篇文章帶給大家的內容是關於ES6中箭頭函數的解析(附範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

概述

箭頭函數有兩個作用:

  1. 更簡短的寫法

  2. 不綁定this

語法一表覽

()=>{}
()=>{console.log('arrow');return null}
()=>'hello'
(num1, num2)=>num1+num2
num=>++num
()=>({name:'arrow'})

寫法

正規一點

let add = (num1, num2)=>{
   return num1 + num2
}
add(1, 2)

聲明了一個add變量,該變數是一個加法函數,該函數有兩個形參:num1、num2,返回值為這兩個參數相加的結果

單參數

let  increment = num=>{
    return num + 1
}

上面聲明了一個increment變量,該變數為自增函數,該參數只有一個形參num,傳回值為為此參數自增1,因為只有一個參數,所以可以省略箭頭函數參數列表的()

無參數

let now = () => {
    return Date.now()
}
let now==>{} // Uncaught SyntaxError: Unexpected token ==

上面聲明了一個now變量,該變量是一個函數,可以獲取當前時間戳,因為不需要參數,所以參數列表置空,但是這種情況下不能將()省略,否則將導致語法錯誤

單一傳回值

let now = () =>  Date.now()

上面函數也可以簡寫為以下方式,因為函數體只有一句話,所以可以省略{}return

單一回傳值:傳回物件字面量
雖然箭頭函數可以省略{}和return,但是在回傳一個物件字面量的時候要格外注意,如果是像下面的寫法,雖然在語法檢查的時候不會報錯,但是和你所期望的可能不太一樣,比如這裡,你希望得到的數據是{name:'hello'},但是結果卻是undefined。

let data=()=>{name:'hello'} // 不会报错 
console.log(data()) // undefined

為什麼呢?用babel解析一下

ES6中箭頭函數的解析(附範例)

可以發現,被解析成了

var data = function data() {
  name: 'hello';
};

並沒有return,對比4的例子

ES6中箭頭函數的解析(附範例)

所以,其實{name:'hello'}被解析成了函數體,{}是函數的{},而不是物件的{},而name:'hello'被解析成了語句,這種語句不常用,卻是滿足js語法的,叫做標籤,案例:

var str = "";

loop1:
for (var i = 0; i <p>所以如果箭頭函數需要傳回單一的物件字面量,需要加對<code>()</code></p><pre class="brush:php;toolbar:false">let data=()=>({name:'hello'})

不綁定this

看下面一種情況

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    console.log(this.age)
  }, 1000);
}

var p = new Person();

通常,我們希望在setInterval的回呼函數中訪問Person的變量,例如age,但是每個新定義的函數都有自己的this,所以這裡的this是growUp的this,並不是Person的this,這將導致this.age將會得到undefined,為了解決這種問題,我們通常會使用折衷的解決方案:

function Person() {
  this.age = 0;
  var that=this
  setInterval(function growUp() {
    console.log(that.age)
  }, 1000);
}

var p = new Person();

用一個臨時變數that來持有this,避免使用growUp的this,這個時候就輪到箭頭函數上場了:

function Person() {
  this.age = 0;
  setInterval(()=> {
    console.log(this.age)
  }, 1000);
}

var p = new Person();

在箭頭函數中,是不會綁定this的,也就是他沒有自己的this,所以這時候,他的this,就是Person的this。這就是所謂的箭頭函數並沒有綁定this,而在我看來,回呼函數就是箭頭函數最好的歸宿。
babel解析之後的結果其實還是老方法:

"use strict";

function Person() {
  var _this = this;

  this.age = 0;
  setInterval(function () {
    console.log(_this.age);
  }, 1000);
}

var p = new Person();

注意

箭頭函數支援預設參數

let add = (num1 = 0, num2) => num1 + num2

箭頭函數支援剩餘參數

let add = (...numList) => numList.reduce((n1, n2) => n1 + n2)

箭頭函數支援參數列表解構

let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;

箭頭函數不支援arguments,如果要使用arguments,推薦上面的剩餘參數的寫法

// 栗子1
var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1
// 栗子2
function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
  return f();
}

foo(1); // 2
// 栗子3
function foo() { 
  var f = (...args) => args[0]; 
  return f(2); 
}

foo(1); 
// 2

Object.defineProperty()會出現意料之外的影響

'use strict';
var obj = {
  a: 10
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10; 
   // 代表全局对象 'Window', 因此 'this.a' 返回 'undefined'
  }
});

無法和new一起使用

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

沒有prototype

var Foo = () => {};
console.log(Foo.prototype); // undefined

解析順序有影響##

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

以上是ES6中箭頭函數的解析(附範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除