ES6：了解箭头函数

Posted 2021-06-27 QIANDXX

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的 this。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

基础语法：

通常函数的定义方法:

var fn1 = function(a, b) {
    return a + b
}

function fn2(a, b) {
    return a + b
}

使用ES6箭头函数语法定义函数，将原函数的 function 关键字和函数名都删掉，并使用 => 连接参数列表和函数体。

var fn1 = (a, b) => {
    return a + b
}

(a, b) => {
    return a + b
}

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

// 无参
var fn1 = function() {}
var fn1 = () => {}

// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}

// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}

// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

箭头函数相当于匿名函数，并且简化了函数定义。

箭头函数有两种格式:

• 只包含一个表达式，省略掉了{ … }和return。
• 可以包含多条语句，这时候就不能省略{ … }和return

() => return 'hello'

(a, b) => a + b
(a) => {
    a = a + 1
    return a
}

如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，不写括号会报错，因为和函数体的{ … }有语法冲突。

注意，用小括号包含大括号则是对象的定义，而非函数主体

x => {key: x} // 报错
x => ({key: x}) // 正确

---

箭头函数的基本特征

• 箭头函数this为父作用域的this，不是调用时的this
  箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。

• 箭头函数不能作为构造函数，不能使用new

• 箭头函数没有arguments，caller，callee
  箭头函数本身没有arguments，如果箭头函数在一个 function 内部，它会将外部函数的 arguments 拿过来使用。

• 箭头函数通过 call 和 apply 调用，不会改变 this 指向，只会传入参数

let obj2 = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m,n);
    }
};
console.log(obj2.b(1));  // 11
console.log(obj2.c(1)); // 11

• 箭头函数不能作为 Generator 函数，不能使用 yield 关键字

• 箭头函数没有原型属性

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

• 多重箭头函数就是一个高阶函数，相当于内嵌函数

const add = x => y => y + x;
//相当于
function add(x){
  return function(y){
    return y + x;
  };
}

---

注意事项

参数列表与返回值的语法

• 1个参数时，左边直接写参数名，0个或者多个参数时，参数列表要用()包裹起来

• 函数体只有1条语句时，右边值自动成为函数返回值，函数体不止1条语句时，函数体需要用 {} 包裹起来，并且需要手动 return

有歧义的字符

{是唯一1个有歧义的字符，所以返回对象字面量时需要用()包裹，否则会被当作块语句解析
例：

var f1 = () => {};
f1();   // 返回undefined
// 等价于
// var f1 = function() {};

var f2 = () => ({});
f2();   // 返回空对象{}
// 等价于
// var f2 = function() {return {};};

关于this

箭头函数会从外围作用域继承 this，为了避免 that = this，需要遵守：除了对象上的直接函数属性值用 function 语法外，其它函数都用箭头函数。

// 场景1
function MyType() {}
MyType.prototype.fn = function() {/*定义箭头函数*/};  // 箭头函数中this指向MyType类型实例

// 场景2
var obj = {};
obj.fn = function() {/*定义箭头函数*/};   // 箭头函数中this指向obj

function能定义一个新this，而箭头函数不能，它只能从外层借一个this。所以，需要新this出现的时候用function定义函数，想沿用外层的this时就用箭头函数

关于arguments对象

箭头函数没有arguments对象，因为标准鼓励使用默认参数、可变参数参数解构

// 一般函数
(function(a) {console.log(`a = ${a}, arguments[0] = ${arguments[0]}`)})(1);
// log print: a = 1, arguments[0] = 1

// 与上面等价的箭头函数
(a => console.log(`a = ${a}, arguments[0] = ${arguments[0]}`))(1);
// log print: Uncaught ReferenceError: arguments is not defined