箭头函数与普通函数的区别

这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」。

如何定义

• es6新增了胖箭头(=>), 用来定义函数表达式。

// 与使用函数表达式定义一个函数对象很相似，在写法更简洁 
let eat = (food) => { console.log("今天想吃："+food) }

适用场景

1. 箭头函数书写更简洁，更适合嵌入函数的场景

let eatArr = ['苹果', '橘子', '迷糊桃'];
eatArr.forEach(function(i) {console.log(i)}); // 苹果 橘子 迷糊桃
eatArr.forEach((i) => {console.log(i)});// 苹果 橘子 迷糊桃

简化箭头函数

• 只有一个参数是，可以省略括号。但没有参数或有多个参数时，需要括号。

//只有一个参数 
let double = (num) => { return 2 * num; };
//等价于
let double = num => { return 2 * num; };

// 没有参数
let num = () = > { console.log('没有参数'); }

// 有两个或两个以上参数
let sum = (num1, num2) => { return num1 + num2; };

• 箭头后面只有一行代码时，可以省略大括号。

let sum = (num1, num2) => { return num1 + num2; };
//等价于
let sum = (num1, num2) => num1 + num2; //省略大括号会隐式返回这行代码的值,不需要写return

箭头函数中的参数

function fn(){
    console.log(arguments[0]);
}
let fn2 = () => {
    console.log(arguments[0]);
};
fn('普通函数'); // 普通函数
fn2('箭头函数'); // ReferenceError: arguments is not defined

箭头函数中没有arguments，参数可以使用命名参数传递，又或者把它包裹在函数内部，如下

function fn(){
    let bar = () => {
        console.log(arguments[0]);
    };
    bar();
}
fn(123); // 123

箭头函数与普通函数的区别

1. 箭头函数没有自己的this对象。
   箭头函数内部this是由上下文决定的。也就是说，箭头函数内部的this是他上层作用域的this对象。

   普通函数是谁调用this就指向谁，如果箭头函数是定义在函数内部，那么其this就指向这个函数作用域的this对象，如果不是函数作用域，就是全局作用域了（window对象）

   普通函数可以使用call, apply, bind改变其this指向，但是对于箭头函数它会忽略第一个传入的值.

2. 箭头函数中没有arguments对象

3. 箭头函数中没有prototype属性，不可以当做构造函数，也就是说不可以使用new调用函数。

4. 箭头函数不能使用yield命令，因此不能用作 Generator 函数。