ES6 箭头函数：高级特性剖析

2024-02-12 06:01:39

默认参数
ES6 箭头函数支持默认参数，允许您为函数参数指定一个默认值。默认值在函数被调用时没有传入参数的情况下使用。

const sum = (a, b = 10) => a + b;

console.log(sum(5)); // 15
console.log(sum(5, 20)); // 25

请注意，默认参数只能用于函数末尾的参数，且必须是恒值。

2. 参数表达式

ES6 箭头函数的参数表达式只有在函数被调用且没有传入参数时才会执行。

const generateId = () => Date.now();

console.log(generateId()); // 1658479341607

在该示例中，Date.now() 表达式只有在 generateId() 函数被调用时才会执行。

3. 暂时性死区

ES6 箭头函数存在一个称为“暂时性死区”的概念。在函数体之前，任何对函数参数的访问都会报错。

const multiply = (a, b) => {
  // a 和 b 都不能在这一行访问
  console.log(a + b);
};

// TypeError: Cannot access 'a' before initialization
multiply(5, 10);

这是因为箭头函数的参数在函数体内部被提升，但不能在函数体之前访问。

4. 非严格模式下的参数映射

在非严格模式下，ES6 箭头函数的命名参数会映射到 arguments 对象。

const sum = (a, b) => {
  console.log(arguments[0]); // a
  console.log(arguments[1]); // b
};

sum(5, 10);

这意味着，在非严格模式下，箭头函数的参数可以像传统函数的参数一样通过 arguments 对象访问。

5. 箭头函数与 `this`

ES6 箭头函数没有自己的 this 关键字。箭头函数的 this 关键字总是指向其外层函数的 this 关键字。

const person = {
  name: 'John Doe',
  greet: () => {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // Hello, my name is undefined.

在该示例中，greet() 函数是一个箭头函数，没有自己的 this 关键字。因此，this.name 表达式尝试访问 person 对象的 name 属性，但由于箭头函数的 this 关键字指向的是全局对象，因此 this.name 等于 undefined。

为了解决这个问题，可以使用传统的函数语法来定义 greet() 函数。

const person = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // Hello, my name is John Doe.

或者，也可以使用显式的 bind() 方法来将 greet() 函数绑定到 person 对象。

const person = {
  name: 'John Doe',
  greet: () => {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

const boundGreet = person.greet.bind(person);
boundGreet(); // Hello, my name is John Doe.