JavaScript 箭头函数(Lambda 表达式)

简介

JavaScript 中,函数可以用箭头语法(”=>”)定义,有时候也叫“lambda表达式”。这种语法主要意图是定义轻量级的内联回调函数。例如:

// Arrow function:
[5, 8, 9].map(item => item + 1); // -> [6, 9, 10]

// Classic function equivalent:
[5, 8, 9].map(function(item) {
  return item + 1;
}); // -> [6, 9, 10]

当箭头函数有一个参数时,参数两边的括号可有可无的,但是还是有括号看起来看得清楚。

const foo = bar => bar + 1;
const bar = (baz) => baz + 1;

箭头函数不带参数时,必须要用括号,比如:

const foo = () => "foo";

如果函数体不是只一行,应该用花括号,并显示地返回(如果需要返回值)。

const foo = bar => {
  const baz = 5;
  return bar + baz;
};
foo(1); // -> 6
arguments object

箭头函数不会暴露 argument 对象,所以 argument 将简单地指向当前 scope 内的一个变量。

arguments 是一个对应于传递给函数的参数的类数组对象。

function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);
> 1
> 2
> 3
绑定 this 的值

箭头函数是 lexically scoped,这意味着其 this 绑定到了附近scope的上下文。也就是说,不管this指向什么,都可以用一个箭头函数保存。

看下面的例子, Cow 类有一个方法在1秒后输出sound。

class Cow {
  constructor() {
    this.sound = "moo";
  }
  makeSoundLater() {
    setTimeout(() => {
       console.log(this.sound);
    }, 1000);
  }
}

var myCow = new Cow();
var yourCow = new Cow();

yourCow.sound = "moooooo";

myCow.makeSoundLater();
yourCow.makeSoundLater();

makeSoundLater() 方法中,this 指向当前 Cow 对象的实例。所以在这个例子中当我们调用 myCow.makeSoundLater()this 指向 myCow。然后,通过使用箭头函数,我们保存了 this,这样我们就可以在需要时引用 this.sound了。将会输出 “moo”,而不是yourCow.makeSoundLater()输出的“moooooo”。

隐式返回值

箭头函数可以通过省略掉小括号做到隐式返回值。

const foo = x => x + 1;
foo(1); // -> 2

当使用隐式返回时,Object Literal 必须用花括号括起来。

Object Literal 是用花括号括起来的,分号隔开的 k-v 对象列表。

const foo = () => { bar: 1 } // foo() returns undefined
const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}
显示返回值
const foo = x => {
  return x + 1;
}

foo(1); // -> 2
语法
x => y // Implicit return


x => { return y } // Explicit return


(x, y, z) => { ... } // Multiple arguments


(() => { ... })() // Immediately-invoked function expression

你可能感兴趣的:(JavaScript 箭头函数(Lambda 表达式))