[面試專題]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

相關文章