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