箭头函数（Arrow Function）与普通函数的四大区别：为什么它没有自己的 this？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位同学，大家好！欢迎来到今天的编程研讨会。今天我们要探讨的是JavaScript中一个既基础又常常引发困惑的话题：函数。具体来说，我们将深入剖析ES6引入的箭头函数（Arrow Function）与我们传统使用的普通函数（Regular Function）之间的核心差异。理解这些差异，尤其是它们在this绑定机制上的不同，是掌握现代JavaScript编程的关键。

我们将以编程专家的视角，为大家抽丝剥茧，层层深入，确保大家不仅知其然，更知其所以然。请大家准备好，我们将从最基础的概念开始，逐步构建我们的知识体系。

一、普通函数：JavaScript的基石与`this`的动态之舞

在ES6之前，或者说在箭头函数出现之前，我们编写函数的方式就是“普通函数”。它们可以是函数声明、函数表达式，甚至是立即执行函数表达式（IIFE）。

1.1 普通函数的语法回顾

函数声明 (Function Declaration):

function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Hello, Alice!

函数表达式 (Function Expression):

const sayHello = function(name) {
    return `Greetings, ${name}!`;
};
console.log(sayHello("Bob")); // Greetings, Bob!

// 命名函数表达式 (Named Function Expression)
const factorial = function fact(n) {
    if (n <= 1) return 1;
    return n * fact(n - 1);
};
console.log(factorial(5)); // 120

1.2 普通函数的核心特性：`this`的动态绑定

普通函数最让人津津乐道（也最让人头疼）的特性之一就是其this关键字的动态绑定机制。这意味着，一个普通函数中的this的值，不是由函数定义的位置决定的，而是由函数被调用时的上下文（context）决定的。这种动态性是JavaScript设计哲学的一部分，它赋予了函数极大的灵活性，但也带来了不少理解上的挑战。

为了彻底搞清楚这一点，我们需要逐一审视this的四种主要绑定规则。

1.2.1 默认绑定 (Default Binding)

当函数以独立的方式被调用，没有明确的上下文对象时，this会被绑定到全局对象。在浏览器环境中，全局对象是window；在Node.js环境中，全局对象是global。然而，在严格模式（'use strict'）下，this会被绑定到undefined。

非严格模式下：

function showThisDefault() {
    console.log("Default binding (non-strict):", this);
}

showThisDefault(); // 在浏览器中输出: window 对象; 在Node.js中输出: global 对象

严格模式下：

function showThisDefaultStrict() {
    'use strict';
    console.log("Default binding (strict):", this);
}

showThisDefaultStrict(); // 输出: undefined

思考： 为什么会有这种差异？因为在严格模式下，JavaScript引擎希望减少全局污染，避免不经意的全局变量创建。将this绑定到undefined，可以帮助开发者更容易地发现并修正可能的问题。

1.2.2 隐式绑定 (Implicit Binding)

当函数作为对象的方法被调用时，this会被隐式地绑定到那个调用该方法的对象。这是我们最常看到的情况。

const person = {
    name: "Alice",
    greet: function() {
        console.log("Implicit binding:", this.name);
    }
};

person.greet(); // 输出: Implicit binding: Alice

这里，greet函数是person对象的一个方法。当通过person.greet()调用时，this被绑定到person对象，因此this.name就是person.name。

隐式丢失 (Implicit Loss): 这是隐式绑定常常引发困惑的地方。当我们将一个对象方法赋值给一个独立的变量，然后通过这个变量调用函数时，this的绑定会丢失，退化为默认绑定。

const anotherPerson = {
    name: "Bob",
    greet: function() {
        console.log("Implicit binding (lost):", this.name);
    }
};

const standAloneGreet = anotherPerson.greet; // 方法被提取出来
standAloneGreet(); // 在浏览器中输出: Implicit binding (lost): undefined (因为this指向window，window.name通常是空字符串或undefined)
                    // 在Node.js中输出: Implicit binding (lost): undefined (this指向global，global.name是undefined)

// 如果是严格模式，this会是undefined，访问this.name会报错
function testStrict() {
    'use strict';
    const obj = {
        name: 'Strict Bob',
        sayName: function() {
            console.log(this.name);
        }
    };
    const func = obj.sayName;
    try {
        func(); // TypeError: Cannot read properties of undefined (reading 'name')
    } catch (e) {
        console.error("Error in strict mode implicit loss:", e.message);
    }
}
testStrict();

在这里，standAloneGreet的调用不再通过anotherPerson对象，因此this不再指向anotherPerson，而是回到了默认绑定。

1.2.3 显式绑定 (Explicit Binding)

为了解决隐式丢失的问题，或者在需要强制指定this值时，我们可以使用函数的call(), apply(), 和 bind()方法来显式地绑定this。

call() 和 apply(): 它们允许我们立即调用函数，并传入一个对象作为this的值。call()接受参数列表，而apply()接受一个参数数组。

function introduce(city, occupation) {
    console.log(`Explicit binding (call/apply): My name is ${this.name}, I live in ${city} and I'm a ${occupation}.`);
}

const user = { name: "Charlie" };

introduce.call(user, "New York", "Engineer"); // 输出: Explicit binding (call/apply): My name is Charlie, I live in New York and I'm a Engineer.
introduce.apply(user, ["London", "Doctor"]); // 输出: Explicit binding (call/apply): My name is Charlie, I live in London and I'm a Doctor.

bind(): 与call()和apply()不同，bind()不会立即执行函数。它会返回一个新函数，这个新函数的this值已经被永久地绑定到你传入的对象上。

const anotherUser = { name: "Diana" };

const introduceDiana = introduce.bind(anotherUser, "Paris"); // 绑定this和第一个参数
introduceDiana("Artist"); // 输出: Explicit binding (bind): My name is Diana, I live in Paris and I'm an Artist.

const introduceDianaFull = introduce.bind(anotherUser); // 只绑定this
introduceDianaFull("Rome", "Chef"); // 输出: Explicit binding (bind): My name is Diana, I live in Rome and I'm a Chef.

bind()在事件处理、回调函数等场景中非常有用，因为它能确保this在将来函数被调用时保持不变。

1.2.4 `new`绑定 (New Binding)

当一个函数作为构造函数，使用new关键字调用时，会发生new绑定。new操作符会执行以下四个步骤：

创建一个全新的空对象。
将这个新对象的[[Prototype]]链接到构造函数的prototype属性。
将这个新对象绑定为函数调用中的this。
如果函数没有显式返回一个对象，则new表达式会隐式返回这个新对象。

function Person(name, age) {
    this.name = name;
    this.age = age;
    console.log("New binding: this inside constructor is", this);
}

const person1 = new Person("Eve", 30);
// 输出: New binding: this inside constructor is Person { name: 'Eve', age: 30 }
console.log(person1.name); // Eve

在这里，new Person(...)创建了一个新对象，并将this绑定到这个新对象上。

1.2.5 `this`绑定规则的优先级

当多个规则可能同时适用时，this的绑定遵循一定的优先级：

new绑定（最高）
显式绑定（call, apply, bind）
隐式绑定
默认绑定（最低）

表格：普通函数的this绑定规则

绑定类型	描述	示例调用方式	`this`指向
默认绑定	函数独立调用，没有明确上下文。	`func();`	非严格模式下：全局对象（`window`/`global`）；严格模式下：`undefined`
隐式绑定	函数作为对象的方法被调用。	`obj.func();`	调用该方法的对象（`obj`）
显式绑定	使用`call()`, `apply()`, `bind()`强制指定`this`。	`func.call(obj, ...);`	传入`call`/`apply`/`bind`的第一个参数（`obj`）
`new`绑定	函数作为构造函数，使用`new`关键字调用。	`new Func(...);`	新创建的对象

1.3 普通函数的其他特性

除了this的动态绑定，普通函数还拥有以下特性：

拥有自己的arguments对象： 每个普通函数都有一个局部变量arguments，它是一个类数组对象，包含了函数被调用时传入的所有参数。

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

可以作为构造函数： 能够配合new关键字创建新的实例对象，并拥有prototype属性。

function Car(make) {
    this.make = make;
}
console.log(Car.prototype); // { constructor: f Car(make) }
const myCar = new Car("Honda");
console.log(myCar instanceof Car); // true

拥有prototype属性： 这是实现基于原型的继承的关键。

拥有自己的super绑定（在对象方法和类方法中）： 当作为对象的方法或类方法时，super指向父类的原型或父类本身。

const parent = {
    value: 10,
    getValue() {
        return this.value;
    }
};
const child = {
    value: 20,
    getValue() {
        return super.getValue() + this.value; // 在这里super指向parent
    }
};
Object.setPrototypeOf(child, parent);
console.log(child.getValue()); // 30 (10 + 20)

拥有自己的new.target绑定： 在构造函数内部，new.target引用的是new操作符直接调用的构造函数。

function Parent() {
    if (new.target === Parent) {
        console.log("Parent called directly with new");
    } else {
        console.log("Parent called via Child constructor");
    }
}
function Child() {
    Parent.call(this); // 普通函数调用，new.target是undefined
    // 实际上这里应该用 super() 或 new Parent()，以配合new.target
    // 简单示例：
    new Parent(); // new.target是Parent
}
new Parent(); // Parent called directly with new
new Child(); // Parent called directly with new (如果 Child 内部是 new Parent())
// 更准确的new.target示例应该在类的继承中使用
class MyBase {
    constructor() {
        console.log("MyBase constructor, new.target:", new.target.name);
    }
}
class MyDerived extends MyBase {
    constructor() {
        super();
        console.log("MyDerived constructor, new.target:", new.target.name);
    }
}
new MyBase();    // MyBase constructor, new.target: MyBase
new MyDerived(); // MyBase constructor, new.target: MyDerived (在MyBase中，new.target指向最底层的构造函数MyDerived)

二、箭头函数：简洁语法与`this`的词法绑定

ES6（ECMAScript 2015）引入了箭头函数，它提供了一种更简洁的函数写法，并且最重要的是，它改变了this的绑定行为，解决了普通函数在回调和异步编程中this上下文丢失的常见痛点。

2.1 箭头函数的语法

箭头函数的语法非常简洁：([param1, param2, ...]) => { statements }

无参数： () => { ... }
一个参数： param => { ... } (括号可以省略)
多个参数： (param1, param2) => { ... }
单表达式函数体 (Implicit Return): 如果函数体只有一条return语句，可以省略花括号和return关键字。
```
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
```

多语句函数体 (Explicit Return): 如果函数体包含多条语句，或者需要显式return，则必须使用花括号。

const multiplyAndLog = (a, b) => {
    const result = a * b;
    console.log(`Multiplying ${a} and ${b}, result is ${result}`);
    return result;
};
console.log(multiplyAndLog(4, 5)); // Multiplying 4 and 5, result is 20, 20

返回对象字面量： 如果要返回一个对象字面量，需要用括号将其括起来，以避免与函数体的花括号混淆。

const createObject = (name, value) => ({ name: name, value: value });
console.log(createObject("key", "val")); // { name: 'key', value: 'val' }

2.2 箭头函数的核心特性：`this`的词法绑定

这是箭头函数与普通函数最根本的区别。箭头函数没有自己的this绑定。 它的this值不是动态决定的，而是从它定义时的外层（enclosing）词法作用域继承而来的。换句话说，箭头函数的this和它周围的普通代码的this是相同的。

理解“词法作用域”：词法作用域是指作用域在函数定义时就已经确定了，而不是在函数运行时确定。对于this，这意味着箭头函数会向上查找最近的非箭头函数（或全局作用域）的this值，并将其作为自己的this。

示例：在普通函数内部使用箭头函数

const userProfile = {
    name: "Frank",
    age: 40,
    sayHelloRegular: function() {
        console.log("Regular function 'this.name':", this.name); // this指向userProfile

        // 内部的普通函数，this会丢失
        setTimeout(function() {
            console.log("Nested regular function 'this.name':", this.name); // this指向window/global，所以是undefined
        }, 100);

        // 内部的箭头函数，this会继承自sayHelloRegular的this
        setTimeout(() => {
            console.log("Nested arrow function 'this.name':", this.name); // this指向userProfile，所以是Frank
        }, 200);
    },
    sayHelloArrow: () => {
        // 这里的箭头函数定义在全局作用域的`userProfile`对象字面量中，
        // 而对象字面量本身不创建作用域，所以它的外层词法作用域是全局作用域。
        console.log("Outer arrow function 'this.name':", this.name); // this指向window/global，所以是undefined
    }
};

userProfile.sayHelloRegular();
// 预期输出（顺序可能因setTimeout而异）：
// Regular function 'this.name': Frank
// Nested regular function 'this.name': undefined
// Nested arrow function 'this.name': Frank

userProfile.sayHelloArrow();
// 预期输出：
// Outer arrow function 'this.name': undefined

在这个例子中：

sayHelloRegular是一个普通函数，当作为userProfile的方法调用时，this指向userProfile。
sayHelloRegular内部的普通setTimeout回调函数，其this丢失，指向全局对象。
sayHelloRegular内部的箭头setTimeout回调函数，它继承了sayHelloRegular的this，因此this仍然指向userProfile。
sayHelloArrow本身是一个箭头函数，它定义在全局作用域的userProfile对象字面量中。对象字面量本身不提供词法this上下文，所以它的this继承自全局作用域，即window/global。

关键点：call(), apply(), bind()对箭头函数无效

由于箭头函数没有自己的this，所以你尝试用call(), apply(), bind()来改变它的this是无效的。它们会被完全忽略。

const obj1 = {
    name: "Obj1",
    greet: () => {
        console.log("Arrow function 'this.name':", this.name);
    }
};

const obj2 = { name: "Obj2" };

// 即使使用call，箭头函数的this仍然是它定义时的外层作用域的this（这里是全局对象）
obj1.greet.call(obj2); // 输出: Arrow function 'this.name': undefined (假设在全局作用域，全局没有name)

为什么它没有自己的this？

这是箭头函数设计的核心目的。在ES6之前，当我们需要在回调函数中访问外部作用域的this时，常常需要使用var self = this;或bind(this)这样的技巧。

传统解决方案：

function Timer() {
    this.seconds = 0;
    setInterval(function() {
        // console.log(this.seconds); // 这里的this是window/global，不是Timer实例
        // 解决方案1: 捕获外部this
        // var self = this;
        // self.seconds++;
        // console.log(self.seconds);

        // 解决方案2: 使用bind
    }.bind(this), 1000); // 显式绑定this
}
// const timer = new Timer();
// setInterval(() => console.log(timer.seconds), 1000); // 辅助观察

箭头函数解决方案：

function TimerArrow() {
    this.seconds = 0;
    setInterval(() => {
        this.seconds++; // 这里的this词法继承自TimerArrow函数中的this，指向TimerArrow实例
        console.log("Arrow Timer:", this.seconds);
    }, 1000);
}
// const timerArrow = new TimerArrow();

通过箭头函数，代码变得更加简洁和直观，消除了this丢失的困扰。这正是箭头函数被引入JavaScript社区的主要原因之一。它提供了一种更可预测、更易于理解的this行为，尤其是在处理回调函数和闭包时。

三、箭头函数与普通函数的四大核心区别（及更多）

现在，我们来系统地总结一下箭头函数与普通函数之间的主要区别。

3.1 区别一：`this`的绑定方式

特性	普通函数 (Regular Function)	箭头函数 (Arrow Function)
`this`绑定	动态/上下文绑定： `this`值取决于函数被调用时的上下文。有默认、隐式、显式、`new`四种绑定规则，且有优先级。	词法绑定： `this`值在函数定义时从其外层词法作用域继承。它没有自己的`this`。
`call`/`apply`/`bind`	可以用来改变函数的`this`绑定。	对箭头函数的`this`绑定无效，它们会被忽略。

总结： 箭头函数没有自己的this。它会捕获其所在（即定义时）上下文的this值，作为自己的this。

3.2 区别二：`arguments`对象的有无

特性	普通函数 (Regular Function)	箭头函数 (Arrow Function)
`arguments`对象	拥有自己的`arguments`对象，一个类数组对象，包含所有传入参数。	没有自己的`arguments`对象。它会继承其外层词法作用域的`arguments`对象（如果存在），否则`arguments`会是全局的`undefined`或报错。
替代方案	–	可以使用剩余参数（Rest Parameters） `...args`来替代。

示例：

function showArgsRegular() {
    console.log("Regular function arguments:", arguments);
    const argsArr = Array.from(arguments); // 转换为数组
    console.log("Regular args array:", argsArr);
}
showArgsRegular(1, 2, 3); // Regular function arguments: [Arguments] { '0': 1, '1': 2, '2': 3 }, Regular args array: [1, 2, 3]

const showArgsArrow = (...args) => { // 使用剩余参数
    // console.log(arguments); // ReferenceError: arguments is not defined (或继承外层arguments)
    console.log("Arrow function args (rest params):", args);
};
showArgsArrow(4, 5, 6); // Arrow function args (rest params): [4, 5, 6]

// 继承外层arguments的例子
function outerFunc() {
    console.log("Outer func arguments:", arguments); // Outer func arguments: [Arguments] { '0': 'a', '1': 'b' }
    const innerArrow = () => {
        console.log("Inner arrow func inherited arguments:", arguments); // Inner arrow func inherited arguments: [Arguments] { '0': 'a', '1': 'b' }
    };
    innerArrow();
}
outerFunc('a', 'b');

总结： 箭头函数是设计为轻量级的，不具备arguments这个“魔法”变量。现代JavaScript推荐使用剩余参数（...args）来获取所有传入参数，这更加清晰和灵活。

3.3 区别三：能否作为构造函数 (`new`)

特性	普通函数 (Regular Function)	箭头函数 (Arrow Function)
构造函数	可以作为构造函数，使用`new`关键字创建实例。	不能作为构造函数。尝试用`new`调用箭头函数会抛出`TypeError`。
`prototype`属性	拥有`prototype`属性，用于原型链继承。	没有`prototype`属性。

示例：

function MyRegularClass(name) {
    this.name = name;
}
const instanceRegular = new MyRegularClass("Regular");
console.log(instanceRegular); // MyRegularClass { name: 'Regular' }
console.log(MyRegularClass.prototype); // { constructor: ƒ MyRegularClass(name) }

const MyArrowClass = (name) => {
    this.name = name;
};
try {
    const instanceArrow = new MyArrowClass("Arrow"); // TypeError: MyArrowClass is not a constructor
} catch (e) {
    console.error("Error creating instance with arrow function:", e.message);
}
console.log(MyArrowClass.prototype); // undefined

总结： 箭头函数天生不是为面向对象编程中的构造函数而设计的。它们缺少必要的内部机制（如prototype属性和内部的[[Construct]]方法），因此不能被new操作符调用。

3.4 区别四：`super`关键字的绑定

特性	普通函数 (Regular Function)	箭头函数 (Arrow Function)
`super`绑定	当作为对象方法或类方法时，拥有自己的`super`绑定，指向父级原型或父类。	没有自己的`super`绑定。它会继承其外层词法作用域的`super`。

示例（在类中使用）：

class ParentClass {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        return `Hello from ${this.name}`;
    }
}

class ChildClass extends ParentClass {
    constructor(name, age) {
        super(name); // 普通函数（constructor）有自己的super
        this.age = age;
    }
    // 普通方法
    introduceRegular() {
        console.log("Regular method super:", super.sayHello(), `I'm ${this.age} years old.`);
    }
    // 箭头方法 (作为类属性定义)
    introduceArrow = () => {
        // 在类中，箭头函数继承了类方法上下文的super
        // 但要注意，这里super指向的this是ParentClass.prototype
        // 在实际class fields中，箭头函数内的this会指向类的实例
        // super行为复杂，此处简化
        // 如果这里直接访问 super.sayHello()，可能会报错，因为箭头函数本身没有super的绑定
        // 它会继承其定义时所在的词法环境的super绑定。
        // 在class field中，箭头函数通常用于绑定实例方法，而非访问super。
        // 正确的类中super演示应在普通方法或getter/setter中。
        // 如下面所示，如果在一个普通方法内定义箭头函数：
        // return super.sayHello() + ` and I'm ${this.age} years old (arrow).`; // 会继承外部方法的super
    }
    // 更好的箭头函数内继承super的例子 (嵌套在普通方法内)
    getArrowSuperMessage() {
        const getMessage = () => {
            // 这里的super继承自getArrowSuperMessage方法的词法环境
            return super.sayHello() + ` and I'm ${this.age} years old (arrow nested).`;
        };
        return getMessage();
    }
}

const child = new ChildClass("Grace", 25);
console.log(child.introduceRegular()); // Regular method super: Hello from Grace I'm 25 years old.
console.log(child.getArrowSuperMessage()); // Hello from Grace and I'm 25 years old (arrow nested).

// 直接在class field中定义箭头函数，其super行为可能不直观，因为它没有“方法环境”
// 它会继承定义它的“类声明的词法环境”的super，但类声明本身没有super。
// 所以，箭头函数作为类属性时，通常不应直接使用super。

总结： 箭头函数没有自己的super。它会查找其外层词法作用域的super绑定。在类中，这意味着它会继承定义它的方法的super。

3.5 额外区别：`new.target`和`yield`关键字

new.target： 箭头函数没有自己的new.target。它会继承其外层词法作用域的new.target。
yield关键字： 箭头函数不能用作生成器函数，因此不能在其内部使用yield关键字。

四、何时使用何种函数？实践指南

理解了这些区别，我们就能更好地选择在不同场景下使用哪种函数。

4.1 优先使用箭头函数的场景

回调函数： 这是箭头函数最常见的用途。在setTimeout, setInterval, 数组方法（map, filter, forEach等），事件监听器中，箭头函数能简洁地保留外部this上下文。

document.getElementById('myButton').addEventListener('click', (event) => {
    console.log('Button clicked!', this); // this指向外层作用域的this，而非button元素
});

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // 简洁的单表达式

需要保持this上下文的内部函数/闭包： 当你在一个方法内部定义另一个函数，并且希望该内部函数能访问到外部方法的this时。

class MyComponent {
    constructor() {
        this.value = 100;
        document.getElementById('myInput').addEventListener('input', (event) => {
            // 这里的this指向MyComponent实例
            this.value = event.target.value;
            console.log('New value:', this.value);
        });
    }
}

简洁的单行函数或表达式： 当函数体非常简单，只有一两行代码时，箭头函数的简洁语法能让代码更易读。
```
const square = x => x * x;
const greetUser = name => `Hello, ${name}!`;
```

4.2 优先使用普通函数的场景

对象方法： 当函数是一个对象的方法，并且需要this指向该对象本身时。

const car = {
    brand: 'Toyota',
    getBrand: function() {
        return this.brand; // this指向car对象
    },
    // getBrandArrow: () => {
    //     return this.brand; // this会指向全局对象（undefined），而不是car
    // }
};
console.log(car.getBrand()); // Toyota
// console.log(car.getBrandArrow()); // undefined

构造函数： 当你需要创建一个能够使用new关键字生成实例的函数时。
```
function Animal(type) {
    this.type = type;
}
const dog = new Animal('Dog');
```
需要arguments对象的函数： 尽管剩余参数是更现代的替代方案，但在某些遗留代码或特定场景下，你可能仍需要arguments对象。

事件处理函数： 如果你需要this指向触发事件的DOM元素，那么普通函数是首选。

document.getElementById('myButton').addEventListener('click', function() {
    console.log('Clicked element:', this); // this指向myButton元素
    this.textContent = 'Clicked!';
});

生成器函数： 包含yield关键字的生成器函数必须是普通函数。

function* idMaker() {
    let index = 0;
    while (true)
        yield index++;
}
const gen = idMaker();
console.log(gen.next().value); // 0

五、深入理解：`this`绑定的设计哲学

箭头函数没有自己的this，其核心设计理念是为了解决JavaScript在处理异步操作和回调函数时this上下文丢失的常见问题。在ES6之前，开发者不得不频繁使用var self = this;或bind(this)来“固定”this的上下文，这增加了代码的冗余和复杂性。

箭头函数通过采用词法this，使得this的行为变得更加可预测和直观。它不再需要开发者去追踪函数是如何被调用的，而只需要关注函数是在哪里被定义的。这种设计简化了代码，减少了bug的可能性，特别是在函数式编程风格日益流行的今天，它让高阶函数和闭包的使用更加自然。

然而，这种简化也带来了限制，比如不能作为构造函数，不能拥有自己的arguments。这些限制并非缺陷，而是有意为之的设计选择，旨在使箭头函数专注于其核心优势：提供一个简洁且this行为明确的函数形式。

理解并选择合适的工具

今天我们深入探讨了JavaScript普通函数和箭头函数在this绑定机制、arguments对象、构造函数能力以及super绑定等方面的四大核心区别。理解这些差异，尤其是箭头函数“没有自己的this”这一根本特性，是编写健壮、可维护的现代JavaScript代码的关键。掌握它们各自的适用场景，将使你在日常开发中能够更加自信和高效地做出技术选择。

一、普通函数：JavaScript的基石与this的动态之舞

1.1 普通函数的语法回顾

1.2 普通函数的核心特性：this的动态绑定

1.2.1 默认绑定 (Default Binding)

1.2.2 隐式绑定 (Implicit Binding)

1.2.3 显式绑定 (Explicit Binding)

1.2.4 new绑定 (New Binding)

1.2.5 this绑定规则的优先级

1.3 普通函数的其他特性

二、箭头函数：简洁语法与this的词法绑定

2.1 箭头函数的语法

2.2 箭头函数的核心特性：this的词法绑定

三、箭头函数与普通函数的四大核心区别（及更多）

3.1 区别一：this的绑定方式

3.2 区别二：arguments对象的有无

3.3 区别三：能否作为构造函数 (new)

3.4 区别四：super关键字的绑定

3.5 额外区别：new.target和yield关键字