ES6中的箭头函数(arrow function)与普通函数的不同之处

news2024/12/25 9:45:53

聚沙成塔·每天进步一点点

  • ⭐ 专栏简介
  • ⭐ 语法简洁
  • ⭐ 没有自己的this
  • ⭐ 写在最后


⭐ 专栏简介

前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中,我们将以问答形式每天更新,为大家呈现精选的前端知识点和常见问题解答。通过问答形式,我们希望能够更直接地回应读者们对于前端技术方面的疑问,并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具,我们将深入浅出地解释概念,并提供实际案例和练习来巩固所学内容。同时,我们也会分享一些实用技巧和最佳实践,帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此,我们还会定期推出一些项目实战教程,让你能够将所学知识应用到实际开发中。通过实际项目的练习,你将能够更好地理解前端开发的工作流程和方法论,并培养自己解决问题和独立开发的能力。我们相信,只有不断积累和实践,才能真正掌握前端开发技术。因此,请准备好迎接挑战,勇敢地踏上这段前端入门之旅!无论你是寻找职业转型、提升技能还是满足个人兴趣,我们都将全力以赴,为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧!加入前端入门之旅,成为一名出色的前端开发者! 让我们启航前端之旅

ES6中的箭头函数(Arrow Function)与普通函数有以下不同之处:


⭐ 语法简洁

箭头函数的语法更加简洁,通常可以在更少的代码行中完成相同的任务。

普通函数的写法:

function add(a, b) {
  return a + b;
}

箭头函数的写法:

const add = (a, b) => a + b;

⭐ 没有自己的this

箭头函数没有自己的 this 上下文,它会捕获所在上下文的 this 值。这意味着在箭头函数内部,this 的值与定义箭头函数的外部函数或上下文相同,不会发生隐式绑定的变化。

示例:

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    // 这里的this指向了全局对象window,而不是Person实例
    this.age++;
    console.log(this.age);
  }, 1000);
}

const person = new Person();

上述代码中,普通函数内部的 this 指向了全局对象 window,而不是 Person 实例。为了解决这个问题,需要使用 bind 方法或存储 this 到一个变量中。

箭头函数的写法:

function Person() {
  this.age = 0;

  setInterval(() => {
    // 箭头函数内部的this与Person实例相同
    this.age++;
    console.log(this.age);
  }, 1000);
}

const person = new Person();

箭头函数内部的 this 与外部函数 Person 相同,因此不需要额外的处理。

  1. 不能用作构造函数:箭头函数不能被用作构造函数来创建对象实例,无法使用 new 关键字来调用箭头函数。

    示例:

    const Person = (name) => {
      this.name = name; // 错误:箭头函数不能用作构造函数
    };
    
  2. 没有 arguments 对象:箭头函数没有自己的 arguments 对象,如果需要访问函数参数,可以使用剩余参数语法(...args)来获取参数。

    示例:

    const sum = (...args) => {
      let total = 0;
      for (let arg of args) {
        total += arg;
      }
      return total;
    };
    
    console.log(sum(1, 2, 3)); // 输出:6
    

总的来说,箭头函数适用于那些不依赖于自身 this 值的简单函数,以及需要更简洁语法的情况。但是,在需要访问自身 this 值或用作构造函数的情况下,应该使用传统的函数声明。


⭐ 写在最后

本专栏适用读者比较广泛,适用于前端初学者;或者没有学过前端对前端有兴趣的伙伴,亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点,所以如果你具备了前端的基础跟着本专栏学习,也是可以很大程度帮助你查漏补缺,由于博主本人是自己再做内容输出,如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我,我们一起进步,与此同时也推荐大家几份专栏,有兴趣的伙伴可以订阅一下:除了下方的专栏外大家也可以到我的主页能看到其他的专栏;

前端小游戏(免费)这份专栏将带你进入一个充满创意和乐趣的世界,通过利用HTML、CSS和JavaScript的基础知识,我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验,这个专栏都适合你。我们会从最基础的知识开始,循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习,你将学会如何运用HTML来构建页面结构,使用CSS来美化游戏界面,并利用JavaScript为游戏添加交互和动态效果。在这个专栏中,我们将涵盖各种类型的小游戏,包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程,并提供详细解释和代码示例。同时,我们也会分享一些优化技巧和最佳实践,帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能,还是对页面游戏开发感兴趣,前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】(付费) 欢迎来到Vue3通透教程!这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南(免费) 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码,我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者,都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成,我们将全面覆盖各个方面。通过阅读本专栏,您将能够提升JavaScript代码的可靠性和可维护性,并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧!点击订阅TypeScript入门指南专栏

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/947845.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

可以翻页的电子画册制作指南

​电子画册是一种创新的方式,可以将传统的纸质画册转化为数字化的形式,并且具备翻页的功能。它不仅可以提供更好的阅读体验,还可以方便地分享给他人。 1.选择制作工具: 有许多在线平台和软件可以帮助你制作电子画册,比…

小程序数据导出文件

小程序josn数据生成excel文件 先从下载传送门将xlsx.mini.min.js拷贝下来,新建xlsx.js文件放入小程序项目文件夹下。 const XLSX require(./xlsx)//在需要用的页面中引入// 定义导出 Excel 报表的方法exportData() {const that thislet newData [{time:2021,val…

全球领先、柔性低功耗?京东方独家供应OPPO折叠屏,首发值得一试

京东方作为全球领先的显示技术创新企业,为OPPO提供的折叠屏手机和智能手表屏幕,拥有先进的技术和优质的显示效果。京东方的柔性折叠低功耗解决方案不仅能够实现屏幕的弯折,还能在折叠状态下保持低功耗,使设备的续航时间得到极大增…

windows10上搭建caffe以及踩到的坑

对动作捕捉的几篇论文感兴趣,想复现一下,需要caffe环境就折腾了下!转模型需要python 2.7环境,我顺便也弄了!!! 1. 环境 Windows10 RTX2080TI 11G Anaconda Python2.7 visual studio 2013 cuda…

第三方软件检测机构有哪些资质,2023年软件测评公司推荐

软件第三方测试报告 伴随着软件行业的蓬勃发展,软件测试也迎来了热潮,但是国内的软件测试行业存在着测试入行门槛低、测试投入少、测试人员专业性不足等问题,这些问题不但会阻碍软件测试行业的良性发展,而且难以保证软件产品的质…

魏副业而战:开学季,闲鱼卖什么好?

我是魏哥,与其躺平,不如魏副业而战! 现在八月底了,意味着暑假结束,新的学期将要开始。 作为闲鱼卖家,可顺势布局一下。 那卖什么好呢? 开学季嘛,卖学习相关的,例如&a…

1.docker打包前后端项目 2.将虚拟机设置为固定ip 3.WARNING: IPv4 forwarding is disabled. Networking will not work

打包后端项目 1.查看防火墙状态 netsh advfirewall show allprofiles 显示防火墙的当前状态和配置信息。您将在输出中看到每个配置文件(公用、专用和域)的状态。 2.关闭防火墙 netsh advfirewall set allprofiles state off 将关闭所有配置文件&#…

胜券汇:底部显现 三大因素有望助推股市短期内探底回升

胜券汇以为,权益商场的底部特征现已开始闪现,估值触底、危险偏好反弹、盈余逐渐修正三大要素有望助推股市短期内探底上升。不过,中长期而言,A股的核心矛盾在于经济复苏的斜率,从当时经济形势看,方针仍有必要…

【C++进阶(三)】STL大法--vector迭代器失效深浅拷贝问题剖析

💓博主CSDN主页:杭电码农-NEO💓   ⏩专栏分类:C从入门到精通⏪   🚚代码仓库:NEO的学习日记🚚   🌹关注我🫵带你学习C   🔝🔝 vector-下 1. 前言2. 什么是迭代器失效?3. 迭代…

【Linux】Linux线程的同步与互斥

前言 如果你对进程/线程中通信的相关概念不太了解的话可以先看这里《进程间通信的基础概念》 Linux线程的同步与互斥 一、Linux线程的互斥1、互斥的相关背景2、互斥量的接口3、互斥量实现原理探究 二、可重入与线程安全1、概念2、常见的线程不安全的情况3、常见的线程安全的情况…

【前端】 Layui点击图片实现放大、关闭效果

实现效果&#xff1a;点击图片实现放大&#xff0c;点击空白处关闭效果。下图。 实现逻辑&#xff1a;二维码是使用JQ插件生成的&#xff0c;点击二维码&#xff0c;获取图片路径&#xff0c;通过Layui的弹窗显示放大后的图片。 Html <div id"qrcode" class&quo…

【JAVA基础】数据类型,逻辑控制

❤️ Author&#xff1a; 老九 ☕️ 个人博客&#xff1a;老九的CSDN博客 &#x1f64f; 个人名言&#xff1a;不可控之事 乐观面对 &#x1f60d; 系列专栏&#xff1a; 文章目录 数据类型整型变量 int长整型变量 long单精度浮点数 float双精度浮点数 double字符类型 char字节…

Mybatis执行getById报错Parameter index out of range

博主使用的Springboot3.0&#xff0c;jdk17&#xff0c;MybatisMybatisFlex的环境 报错&#xff1a; org.mybatis.spring.MyBatisSystemException: null java.lang.RuntimeException: java.sql.SQLException: Parameter index out of range (1 > number of parameters, w…

Android DataBinding 基础入门(学习记录)

目录 一、DataBinding简介二、findViewById 和 DataBinding 原理及优缺点1. findViewById的优缺点2. DataBinding的优缺点 三、Android mvvm 之 databinding 原理1. 简介和三个主要的实体DataViewViewDataBinding 2.三个功能2.1. rebind 行为2.2 observe data 行为2.3 observe …

基于MQTT协议的物联网网关实现远程数据采集及监控

在数字化时代的浪潮中&#xff0c;工业界正面临着前所未有的变革与机遇。而在这场变革中&#xff0c;基于MQTT协议的物联网网关崭露头角&#xff0c;成为连接工业设备、实现远程数据采集与监控的利器。其中&#xff0c;HiWoo Box作为一款出色的工业边缘网关&#xff0c;引领着这…

搜索算法之内容质量评估:如何对作者和文章进行质量评价

paperClubIP属地: 江苏 编辑文章 对于搜索引擎而言&#xff0c;用户算法的核心价值是用户体验&#xff0c;包括搜索内容的相关性、内容质量及时效性等&#xff0c;其中内容质量是前置步骤&#xff0c;既可以用于优质内容源筛选&#xff0c;又可以作为搜索召回结果排序因素&am…

Leetcode.100 相同的树

给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 代码如下&#xff1a;…

【STM32】串口初步使用

本文只作为学习笔记&#xff0c;对串口进行一个简单的介绍&#xff0c;正确的使用方式还需要进行实际的调试 通信的类型&#xff1a; 同步 异步 单工 双工 串行 并行 STM32的串口通信&#xff1a; 配置片上外设的控制寄存器&#xff0c;通信双方进行相同的配置&#xff0c;…

【Vue】集成高德地图

Vue 集成高德地图 步骤 注册成为高德开发者 获取申请的安全密钥、申请好的Web端开发者Key 创建Vue 工程 创建地图组件 引入地图组件 高德地图开发平台地址 https://lbs.amap.com/官方示例地址 https://lbs.amap.com/demo/list/js-api-v2示例 首先创建一个vue工程 安装 npm …

jvm与锁

今天是《面霸的自我修养》的第二弹&#xff0c;内容是Java并发编程中关于Java内存模型&#xff08;Java Memory Model&#xff09;和锁的基础理论相关的问题。这两块内容的八股文倒是不多&#xff0c;但是难度较大&#xff0c;接下来我们就一起一探究竟吧。 数据来源&#xff…