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

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

相关文章

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

Kotlin 作用域函数apply、let、run、with、also使用指南

《Kotlin作用域函数apply、let、run、with、also使用指南》在Kotlin开发中,作用域函数(ScopeFunctions)是一组能让代码更简洁、更函数式的高阶函数,本文将... 目录一、引言:为什么需要作用域函数?二、作用域函China编程数详解1. apply:对象配置的 “流式构建器”最

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

分辨率三兄弟LPI、DPI 和 PPI有什么区别? 搞清分辨率的那些事儿

《分辨率三兄弟LPI、DPI和PPI有什么区别?搞清分辨率的那些事儿》分辨率这个东西,真的是让人又爱又恨,为了搞清楚它,我可是翻阅了不少资料,最后发现“小7的背包”的解释最让我茅塞顿开,于是,我... 在谈到分辨率时,我们经常会遇到三个相似的缩写:PPI、DPI 和 LPI。虽然它们看起来差不多,但实际应用

GORM中Model和Table的区别及使用

《GORM中Model和Table的区别及使用》Model和Table是两种与数据库表交互的核心方法,但它们的用途和行为存在著差异,本文主要介绍了GORM中Model和Table的区别及使用,具有一... 目录1. Model 的作用与特点1.1 核心用途1.2 行为特点1.3 示例China编程代码2. Tab

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Nginx指令add_header和proxy_set_header的区别及说明

《Nginx指令add_header和proxy_set_header的区别及说明》:本文主要介绍Nginx指令add_header和proxy_set_header的区别及说明,具有很好的参考价... 目录Nginx指令add_header和proxy_set_header区别如何理解反向代理?proxy

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》:本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使

C++中::SHCreateDirectoryEx函数使用方法

《C++中::SHCreateDirectoryEx函数使用方法》::SHCreateDirectoryEx用于创建多级目录,类似于mkdir-p命令,本文主要介绍了C++中::SHCreateDir... 目录1. 函数原型与依赖项2. 基本使用示例示例 1:创建单层目录示例 2:创建多级目录3. 关键注

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程