箭头函数跟普通函数的区别

2024-09-08 00:44
文章标签 函数 区别 普通 箭头

本文主要是介绍箭头函数跟普通函数的区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

箭头函数(Arrow Function)和普通函数(Function Declaration/Expression)在 JavaScript 中有一些重要的区别,主要体现在以下几个方面:

1. 语法

  • 箭头函数

    • 语法更简洁,没有 function 关键字。

    • 对于单一表达式函数,结果会隐式返回,不需要 return 关键字。

    • 不需要使用大括号 {},但如果使用,必须显式返回值。

    • 示例:

      // 单行表达式(隐式返回)
      const add = (a, b) => a + b;// 多行表达式(显式返回)
      const add = (a, b) => {return a + b;
      };// 如果只有一个参数,可以省略括号
      const square = x => x * x;
      
  • 普通函数

    • 使用 function 关键字声明。

    • 函数体内的返回值需要使用 return 关键字。

    • 示例:

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

2. this 绑定

  • 箭头函数

    • 词法作用域:箭头函数没有自己的 this,它会继承外部函数的 this 值。this 的值在定义时就固定了,因此不随调用环境的变化而改变。
    • 适用于回调函数或事件处理程序中,尤其是当 this 需要保持一致时。
    function Counter() {this.count = 0;setInterval(() => {this.count++; // `this` 指向 Counter 实例console.log(this.count);}, 1000);
    }new Counter();
    
  • 普通函数

    • 动态作用域:普通函数有自己的 this,它的 this 值由调用时的上下文决定(即函数如何被调用)。
    • 使用 .bind().call().apply() 可以显式设置 this
    function Counter() {this.count = 0;setInterval(function() {this.count++; // `this` 指向全局对象或 undefined(在严格模式下)console.log(this.count);}.bind(this), 1000); // 通过 .bind() 修正 `this`
    }new Counter();
    

3. 构造函数

  • 箭头函数

    • 不能作为构造函数,不能使用 new 操作符调用它们。尝试使用 new 调用箭头函数会导致错误。
    const Foo = () => {};
    const foo = new Foo(); // TypeError: Foo is not a constructor
    
  • 普通函数

    • 可以作为构造函数,使用 new 操作符调用时会创建一个新的实例。
    function Foo() {}
    const foo = new Foo(); // 成功创建一个 Foo 实例
    

4. arguments 对象

  • 箭头函数

    • 没有 arguments 对象。如果需要访问参数,可以使用 rest 参数语法(...args)。
    const func = () => {console.log(arguments); // ReferenceError: arguments is not defined
    };
    
  • 普通函数

    • 拥有 arguments 对象,包含了所有传递给函数的参数。
    function func() {console.log(arguments); // 输出所有传递的参数
    }
    

5. super 关键字

  • 箭头函数

    • 不支持 super 关键字,因为它们没有自己的 this,也没有自己的 super 作用域。
  • 普通函数

    • 可以使用 super 关键字来调用父类的方法。
    class Parent {method() {console.log('parent method');}
    }class Child extends Parent {method() {super.method(); // 调用父类的方法console.log('child method');}
    }const child = new Child();
    child.method();
    

总结

  • 箭头函数 提供了更简洁的语法,并且在 this 绑定、构造函数以及 arguments 对象方面有不同的行为。它们适用于需要词法作用域的场景,如回调函数和事件处理程序。
  • 普通函数 提供了传统的函数功能,能够动态绑定 this,作为构造函数使用,并且支持 arguments 对象。适用于需要这些功能的场景。

这篇关于箭头函数跟普通函数的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1146632

相关文章

go 指针接收者和值接收者的区别小结

《go指针接收者和值接收者的区别小结》在Go语言中,值接收者和指针接收者是方法定义中的两种接收者类型,本文主要介绍了go指针接收者和值接收者的区别小结,文中通过示例代码介绍的非常详细,需要的朋友们下... 目录go 指针接收者和值接收者的区别易错点辨析go 指针接收者和值接收者的区别指针接收者和值接收者的

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布,有朋友留言问华为路由X1和X1Pro怎么选择,关于这个问题,本期图文将对这二款路由器做了期参数对比,大家看... 华为路由 X1 系列已经正式发布并开启预售,将在 4 月 25 日 10:08 正式开售,两款产品分别为华

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》:本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的

MySQL高级查询之JOIN、子查询、窗口函数实际案例

《MySQL高级查询之JOIN、子查询、窗口函数实际案例》:本文主要介绍MySQL高级查询之JOIN、子查询、窗口函数实际案例的相关资料,JOIN用于多表关联查询,子查询用于数据筛选和过滤,窗口函... 目录前言1. JOIN(连接查询)1.1 内连接(INNER JOIN)1.2 左连接(LEFT JOI

MySQL中FIND_IN_SET函数与INSTR函数用法解析

《MySQL中FIND_IN_SET函数与INSTR函数用法解析》:本文主要介绍MySQL中FIND_IN_SET函数与INSTR函数用法解析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一... 目录一、功能定义与语法1、FIND_IN_SET函数2、INSTR函数二、本质区别对比三、实际场景案例分

C++ Sort函数使用场景分析

《C++Sort函数使用场景分析》sort函数是algorithm库下的一个函数,sort函数是不稳定的,即大小相同的元素在排序后相对顺序可能发生改变,如果某些场景需要保持相同元素间的相对顺序,可使... 目录C++ Sort函数详解一、sort函数调用的两种方式二、sort函数使用场景三、sort函数排序

C语言函数递归实际应用举例详解

《C语言函数递归实际应用举例详解》程序调用自身的编程技巧称为递归,递归做为一种算法在程序设计语言中广泛应用,:本文主要介绍C语言函数递归实际应用举例的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录前言一、递归的概念与思想二、递归的限制条件 三、递归的实际应用举例(一)求 n 的阶乘(二)顺序打印

C/C++错误信息处理的常见方法及函数

《C/C++错误信息处理的常见方法及函数》C/C++是两种广泛使用的编程语言,特别是在系统编程、嵌入式开发以及高性能计算领域,:本文主要介绍C/C++错误信息处理的常见方法及函数,文中通过代码介绍... 目录前言1. errno 和 perror()示例:2. strerror()示例:3. perror(

kotlin中const 和val的区别及使用场景分析

《kotlin中const和val的区别及使用场景分析》在Kotlin中,const和val都是用来声明常量的,但它们的使用场景和功能有所不同,下面给大家介绍kotlin中const和val的区别,... 目录kotlin中const 和val的区别1. val:2. const:二 代码示例1 Java

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd