博客 / 詳情

返回

Javascript箭頭函數和lambda

() => {} 基本特點

es6中的箭頭函數,在實際開發中確實比較方便,通常來説會有幾個特點:

  • 箭頭函數中的this會綁定在外部作用域
  • 沒有arguments
  • 如果想返回一個對象記得加()包裹
  • call和apply不能傳入this
(() => {a: 1})() //返回值為undefiend,想返回對象,使用下面的方式
(() => ({a: 1})()

箭頭函數和lambda表達

lambda在計算機科學中表示匿名函數,本質上是用來簡化操作的。簡單來説,是一種表示方法,代表了一定的輸入和輸出。

step1:

實現一個平方運算表達(x * x):
數學表達式(λ代表一個表達式的輸入):

λx.x * x

用JavaScript實現:

(function (x) {
  return x * x;
})()

step2:

在平方的基礎上再加2(x * x + 2):
數學表達式:

(λx.x * x)(λx.x + 2)

用Javascript實現:

(function(x) {
  return x + x
})((function () {
  return x * x
})())

其實就是利用了匿名函數然後,再繼續嵌套。
但是有了箭頭函數,就可以更加簡便地實現上面的操作:

(x => x + 2)((x => x * x)())

step3:

更加優雅地實現,其實向上面這種方式,不是特別優雅,可讀性不好,需要一種能夠更加優雅地方式:

上面的行為抽象出來就是:前一個的輸出作為後一個函數的輸入,應該怎麼實現呢?Javascript中提供了reduce這一個方法。
const action = [
  x => x * x,
  x => x + 2
];

let res = action.reduce((res, cur) => cur(res), 2);

step4:

總結:從上面的過程可以看出來,有兩個主要的關鍵過程:

  • 1、箭頭函數是一個匿名函數,簡化書寫
  • 2、箭頭函數作為變量傳遞給reduce函數的回調

所以箭頭函數在很大程度上,簡化了函數式的操作。其實lambda表達式,在Javascript中就是匿名函數。

箭頭函數使用總結:

  • 箭頭函數適合純函數的操作,比如map、filter、reduce等操作
  • 箭頭函數內部,一般不要使用this,因為this是和外部作用域綁定的,容易產生問題

問題1:

function A() {
  this.foo = 1
}

A.prototype.bar = () => console.log(this.foo)

let a = new A()
a.bar()  //undefined

因為對象a,並沒有構成一個作用域。

如果想讓this指向A,可以這樣寫:

function A() {
  this.foo = 1;
  this.bar = () => {
    console.log('value', this.foo);
  }
}
let a = new A();
a.bar(); //1

因為bar的聲明在函數A的作用域內部。

問題2:

const A = {
  foo: 1,
  bar: () => {
    console.log('value', this.foo);
  }
}
let a = Object.create(A);
a.bar(); //undefined

如果想輸出正常的值,應該使用function定義:

const A = {
  foo: 1,
  bar: function (){
    console.log('value', this.foo);
  }
}
let a = Object.create(A);
a.bar(); // value 1

參考文檔:

lambda和箭頭函數

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.