箭头函数与普通函数(function)的区别

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 Tair(兼容Redis),内存型 2GB
简介: 箭头函数是ES6引入的新特性,与传统函数相比,它有更简洁的语法,且没有自己的this、arguments、super或new.target绑定,而是继承自外层作用域。箭头函数不适用于构造函数,不能使用new关键字调用。
  1. 语法形式
    • 普通函数:使用function关键字来定义。例如:
      function add(a, b) {
             
        return a + b;
      }
      
    • 箭头函数:使用箭头=>来定义。例如:
      const add = (a, b) => {
             
        return a + b;
      };
      
    • 对于只有一个参数的箭头函数,括号可以省略。如果函数体只有一条语句且是返回值,花括号和return关键字也可以省略。例如:
      const square = x => x * x;
      
  2. this指向
    • 普通函数this的值在函数被调用时确定,它取决于函数的调用方式。在全局环境中调用函数,this指向全局对象(在浏览器中是window,在Node.js中是global);当作为对象的方法调用时,this指向该对象。例如:
      const obj = {
             
        name: 'John',
        sayName() {
             
          console.log(this.name);
        }
      };
      obj.sayName();//'John',这里this指向obj
      const sayNameFn = obj.sayName;
      sayNameFn();//在非严格模式下,这里this指向全局对象,会输出undefined(如果是浏览器环境可能是window)
      
    • 箭头函数:没有自己的this,它的this是在定义时确定的,与它所在的上下文的this相同。例如:
      const obj = {
             
        name: 'John',
        sayName: () => {
             
          console.log(this.name);
        }
      };
      obj.sayName();//这里this指向全局对象,会输出undefined(如果是浏览器环境可能是window)
      const outerThis = this;
      const newObj = {
             
        name: 'Alice',
        sayName: function() {
             
          const arrowFn = () => {
             
            console.log(this.name);
          };
          arrowFn();
        }
      };
      newObj.sayName();//'Alice',箭头函数的this继承自外层函数的this,这里外层函数的this指向newObj
      
  3. arguments对象
    • 普通函数:可以访问arguments对象,它是一个包含函数调用时传入的所有参数的类数组对象。例如:
      function sum() {
             
        let result = 0;
        for (let i = 0; i < arguments.length; i++) {
             
          result += arguments[i];
        }
        return result;
      }
      console.log(sum(1, 2, 3));//6
      
    • 箭头函数:没有自己的arguments对象。不过,它可以访问外层函数的arguments(如果存在)。例如:
      function outerFn() {
             
        const arrowFn = () => {
             
          console.log(arguments);
        };
        arrowFn();
      }
      outerFn(1, 2, 3);
      
  4. 构造函数使用
    • 普通函数:可以作为构造函数使用,通过new关键字创建对象实例。在构造函数内部,this会被绑定到新创建的对象上。例如:
      function Person(name) {
             
        this.name = name;
      }
      const person = new Person('Alice');
      console.log(person.name);
      
    • 箭头函数:不能作为构造函数使用。如果尝试使用new来调用箭头函数,会抛出错误。例如:
      const ArrowPerson = (name) => {
             
        this.name = name;
      };
      const arrowPerson = new ArrowPerson('Bob');//会抛出错误
      
  5. 适用场景
    • 普通函数
      • 当需要使用this指向调用对象、访问arguments对象、作为构造函数创建对象等场景时,使用普通函数。
      • 适合用于定义对象的方法,特别是需要改变this指向的情况。
    • 箭头函数
      • 当需要简洁的语法来定义简单的函数,特别是在回调函数中不需要自己的this(例如在Array.prototype.mapArray.prototype.filter等数组方法的回调函数中),箭头函数是很好的选择。
      • 适合在函数内部创建函数,并且希望内部函数的this与外层函数保持一致的场景。
相关文章
|
14天前
|
中间件 Docker Python
【Azure Function】FTP上传了Python Function文件后,无法在门户页面加载函数的问题
通过FTP上传Python Function至Azure云后,出现函数列表无法加载的问题。经排查,发现是由于`requirements.txt`中的依赖包未被正确安装。解决方法为:在本地安装依赖包到`.python_packages/lib/site-packages`目录,再将该目录内容上传至云上的`wwwroot`目录,并重启应用。最终成功加载函数列表。
|
2月前
|
数据可视化 开发者 索引
详解Wireshark LUA插件函数:function p_myproto.dissector(buffer, pinfo, tree)
在 Wireshark 中,LUA 插件通过 `function p_myproto.dissector(buffer, pinfo, tree)` 扩展协议解析能力,解析自定义应用层协议。参数 `buffer` 是 `PacketBuffer` 类型,表示原始数据包内容;`pinfo` 是 `ProtoInfo` 类型,包含数据包元信息(如 IP 地址、协议类型等);`tree` 是
79 1
|
2月前
|
JavaScript
箭头函数与普通函数(function)的区别
箭头函数是ES6引入的新语法,相比传统函数表达式更简洁,且没有自己的this、arguments、super或new.target绑定,而是继承自外层作用域。这使得箭头函数在处理回调和闭包时更加灵活方便。
|
2月前
|
C++ 容器
函数对象包装器function和bind机制
函数对象包装器function和bind机制
21 0
|
4月前
【Azure Durable Function】PowerShell Activity 函数遇见 Newtonsoft.Json.JsonReaderException: The reader's MaxDepth of 64 has been exceeded.
【Azure Durable Function】PowerShell Activity 函数遇见 Newtonsoft.Json.JsonReaderException: The reader's MaxDepth of 64 has been exceeded.
|
4月前
|
安全 JavaScript 应用服务中间件
【Azure Function App】如何修改Azure函数应用的默认页面呢?
【Azure Function App】如何修改Azure函数应用的默认页面呢?
|
4月前
|
C# C++ Python
【Azure 应用服务】Azure Durable Function(持久函数)在执行Activity Function时候,因为调用函数名称错误而导致长时间无响应问题
【Azure 应用服务】Azure Durable Function(持久函数)在执行Activity Function时候,因为调用函数名称错误而导致长时间无响应问题
|
4月前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
|
4月前
|
JSON 数据格式 Python
【Azure 应用服务】Azure Function Python函数中,如何获取Event Hub Trigger的消息Event所属于的PartitionID呢?
【Azure 应用服务】Azure Function Python函数中,如何获取Event Hub Trigger的消息Event所属于的PartitionID呢?
|
4月前
|
C++ Python
【Azure 应用服务】Azure Function Python函数部署到Azure后遇见 Value cannot be null. (Parameter 'receiverConnectionString') 错误
【Azure 应用服务】Azure Function Python函数部署到Azure后遇见 Value cannot be null. (Parameter 'receiverConnectionString') 错误