箭头函数与普通函数的区别 （ 6 点 ）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

箭头函数(Arrow Function)与传统的JavaScript普通函数(function declaration / function expression)之间存在一些关键的区别，下面将详细介绍并提供代码示例：

1. 语法区别：

   • 普通函数的声明形式：

     // 函数声明
     function add(a, b) {
       return a + b;
     }
     
     // 函数表达式
     const normalFunction = function(a, b) {
       return a + b;
     };
     

   • 箭头函数的声明形式更为简洁：

     // 箭头函数表达式
     const arrowAdd = (a, b) => a + b;
     
     // 当函数体只有一行且直接返回结果时，可以省略{}
     // 如果有多行语句或需要明确return，则需要加上{}
     const arrowMult = (a, b) => {
       const result = a * b;
       return result;
     };
     

2. this 关键字的绑定：

   • 普通函数在不同的调用上下文中有自己独立的 this 绑定，如作为对象的方法调用时，this 指向该对象；在全局作用域下调用时，在严格模式下 this 为 undefined，非严格模式下 this 为全局对象（浏览器环境中是 window）。

     const obj = {
       method: function() {
         console.log(this); // 输出：{method: ƒ}
       }
     };
     obj.method();
     

   • 箭头函数没有自己的 this，它会捕获其所在（即定义的位置）上下文的 this 值：

     const obj = {
       outerThis: 'global',
       method: () => {
         console.log(this); // 如果在全局作用域下定义，输出：全局对象
                           // 如果在其他函数内部定义，输出：该函数的作用域对象
       }
     };
     obj.method(); // 输出可能不是预期的obj，而是外层作用域的this
     

3. arguments 对象：

   • 普通函数可以访问 arguments 对象，它包含了函数调用时的所有参数，即使没有明确声明这些参数。

     function logArgs() {
       console.log(arguments);
     }
     logArgs(1, 2, 3); // 输出：[1, 2, 3]
     

   • 箭头函数没有 arguments 对象，但可以通过展开运算符 ... 来模拟类似行为：

     const logArgsArrow = (...args) => {
       console.log(args);
     };
     logArgsArrow(1, 2, 3); // 输出：[1, 2, 3]
     

4. 不能作为构造函数：

   • 箭头函数不能使用 new 关键字调用，因此不能用来创建对象实例。

     // 下面的代码会抛出错误，因为箭头函数不能当作构造函数
     const ArrowConstructor = () => {};
     new ArrowConstructor(); // TypeError: ArrowConstructor is not a constructor
     

   • 普通函数可以被用作构造函数：

     function Person(name) {
       this.name = name;
     }
     const person = new Person('Alice');
     console.log(person.name); // 输出：'Alice'
     

5. 没有原型(prototype)属性：

   • 普通函数有一个 prototype 属性，可用于实现基于原型的继承机制。
   • 箭头函数没有 prototype 属性，因此不能通过它创建可继承的对象。

6. call(), apply() 和 bind() 方法：

   • 普通函数可以使用 call(), apply() 或 bind() 方法更改 this 的指向。
   • 箭头函数由于其 this 是词法作用域决定的，所以这些方法对其无效，即无法通过它们改变 this 的指向。

综上所述，箭头函数在简化语法、处理 this 绑定以及面向对象编程方面有着与普通函数不同的特性，选择使用哪种函数取决于具体的应用场景和需求。