[面試專題]ES6之箭頭函式詳解

逺方小鎭發表於2019-02-16
面試函式

ES6之箭頭函式

標籤（空格分隔）： 未分類

返回值

  • 單行函式體預設返回改行計算結果, 多行需要指定返回值

let c = (a,b)=>a+b;
console.log(c(1,12));

ES5
"use strict";
var c = function c(a, b) {
  return a + b;
};
console.log(c(1, 12));
let c = (a,b)=>{a = a+b;a--}
console.log(c(1,12));//undefined

let c = (a,b)=>{a = a+b;return a--};

  • 返回物件時寫法(否則報錯)

let c = (a,b)=>({a:a});
or
let d = (a,b)=>{return {a:a}}

this指向

  • 繫結外層函式this(簡化一個常見用法,_this = this)

在箭頭函式出現之前，每個新定義的函式都有其自己的 this 值（例如，建構函式的 this 指向了一個新的物件；嚴格模式下的函式的 this 值為 undefined；如果函式是作為物件的方法被呼叫的，則其 this 指向了那個呼叫它的物件）。//MDN

ES5

function Person(age) {
    var _this = this;
    this.age = age;
    setTimeout(function growUp() {
        console.log(this);
        _this.age++;
    }, 1000);
}
var p = new Person(26);

ES6

function Person(age) {
    this.age = age;
    setTimeout(()=> {
        console.log(this);
        this.age++;
    }, 1000);
    console.log(this.age);
}
var p = new Person(26);

  • 使用 call 或 apply 呼叫

由於 this 已經在詞法層面完成了繫結，通過 call() 或 apply() 方法呼叫一個函式時，只是傳入了引數而已，對 this 並沒有什麼影響.

arguments

箭頭函式不會在其內部暴露出引數（arguments )： arguments.length, arguments[0], 等等，都不會指向箭頭函式的 arguments，而是指向了箭頭函式所在作用域的一個名為 arguments 的值（如果有的話，否則，就是 undefined。——譯者注）。

這種情況下,ES6 rest引數可以替代

function foo(n) { 
  var f = (...args) =>  args[0]+args.length; 
  return f(n); 
}

foo(1); // 1

相關文章