【JavaScript源代码】JavaScript中箭头函数与普通函数的区别详解.docx

JavaScript中箭头函数与普通函数的区别详解 　　本文为大家讲解了JavaScript中箭头函数与普通函数的区别，供大家参考，具体内容如下　　let fun = () => {　　    console.log('lalalala');　　}　　function fun() {　　    console.log('lalla');　　}　　箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return。　　箭头函数是匿名函数，不能作为构造函数，不能使用n JavaScript中的箭头函数和普通函数在使用上有显著的差异，这些差异主要体现在以下几个方面： 1. **函数定义的简洁性**： - 箭头函数的语法更紧凑，可以视为匿名函数的一种简写形式。如果函数体只包含一个表达式，那么可以省略大括号和return关键字。例如： ```javascript let fun = () => console.log('lalalala'); ``` - 普通函数则需要使用`function`关键字，以及完整的函数体结构： ```javascript function fun() { console.log('lalla'); } ``` 2. **构造函数行为**： - 箭头函数不能作为构造函数，不能使用`new`关键字来实例化对象。尝试这样做会导致错误或非预期的结果。 - 示例： ```javascript let FunConstructor = () => { console.log('lll'); } let fc = new FunConstructor(); // 运行时错误 ``` 3. **arguments对象**： - 箭头函数不绑定`arguments`对象，这意味着在箭头函数内部，`arguments`是未定义的。要获取函数的所有参数，可以使用剩余参数(`...`)： ```javascript function A(a) { console.log(arguments); } let B = (b) => { console.log(arguments); // Uncaught ReferenceError: arguments is not defined } let C = (...c) => { console.log(c); } ``` 4. **this的绑定**： - 箭头函数不会创建自己的`this`值，它会捕获其所在上下文的`this`值。这意味着在对象的方法中，箭头函数的`this`将指向该对象，而不是函数本身。 ```javascript var obj = { a: 10, b: () => { console.log(this.a); // undefined console.log(this); // Window }, c: function() { console.log(this.a); // 10 console.log(this); } }; obj.b(); obj.c(); ``` 5. **call()和apply()的影响**： - 对于普通函数，`call()`和`apply()`可以用来设置`this`值，但箭头函数不会受到这些方法的影响，`this`始终指向其所在上下文： ```javascript 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); // 输出仍为11，不受影响 } }; console.log(obj2.b(1)); // 11 console.log(obj2.c(1)); // 11 ``` 6. **原型属性**： - 箭头函数没有`prototype`属性，因此不能用于继承链。而普通函数具有`prototype`属性，可以作为其他对象的原型。 ```javascript var a = () => { return 1; } function b() { return 2; } console.log(a.prototype); // undefined console.log(b.prototype); // {constructor: ƒ} ``` 7. **Generator函数**： - 箭头函数不能用作Generator函数，因此它们不能包含`yield`关键字。如果需要定义Generator，必须使用`function*`关键字。 了解这些区别对于编写高效、可维护的JavaScript代码至关重要，尤其是在处理`this`、构造函数、继承和异步操作时。在选择使用箭头函数还是普通函数时，应根据实际需求和功能来决定。