探秘 JavaScript 箭头函数与普通函数的差异

在 JavaScript 的函数类型世界里，箭头函数和普通函数是两个重要成员。它们各有特点，下面咱们就来详细说说它们的不同之处。

语法形式大不同

普通函数的语法结构大家应该比较熟悉。可以用函数声明的方式定义，像这样：

function greet(name) {
    return 'Hello, ' + name;
}

也可以用函数表达式，比如：

const greet = function(name) {
    return 'Hello, ' + name;
};

而箭头函数的语法就简洁多了。如果只有一个参数，甚至可以省略括号；如果函数体只有一条语句，还能省略大括号和 return 关键字。比如上面的 greet 函数用箭头函数来写就是：

const greet = name => 'Hello, ' + name;

这简洁程度，在处理简单逻辑的时候优势明显。

作用域和 this 指向有别

普通函数的 this 指向会根据调用方式的不同而改变。它的指向在函数定义时是不确定的，只有在调用时才能确定。比如在全局作用域中，函数内部的 this 指向全局对象（在浏览器环境中就是 window 对象）；如果函数作为对象的方法调用，this 就指向调用该方法的对象。

const person = {
    name: 'John',
    sayHello: function() {
        console.log('Hello, my name is ' + this.name);
    }
};
person.sayHello(); // 这里 this 指向 person 对象

箭头函数就不一样了，它没有自己的 this，它的 this 继承自外层函数。也就是说，箭头函数的 this 指向在定义时就确定了，不会因为调用方式的改变而改变。

const person = {
    name: 'John',
    sayHello: () => {
        console.log('Hello, my name is ' + this.name);
    }
};
person.sayHello(); // 这里 this 指向全局对象，输出可能不是预期结果

构造函数使用限制

普通函数可以作为构造函数使用，通过 new 关键字创建对象实例。在构造函数内部，this 指向新创建的对象。

function Person(name) {
    this.name = name;
}
const john = new Person('John');
console.log(john.name); // 输出 'John'

但箭头函数不能作为构造函数，因为它没有自己的 this，也没有 prototype 属性，使用 new 关键字调用箭头函数会报错。

arguments 对象有无

普通函数内部有一个 arguments 对象，它是一个类数组对象，包含了函数调用时传递的所有参数。

function sum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}
console.log(sum(1, 2, 3)); // 输出 6

而箭头函数没有自己的 arguments 对象，如果在箭头函数中使用 arguments，它会引用外层函数的 arguments 对象。

综上所述，箭头函数和普通函数在语法、this 指向、构造函数使用和 arguments 对象等方面都存在明显差异。在实际开发中，我们要根据具体的需求来选择合适的函数类型，这样才能让代码更加简洁、高效。