广告
返回顶部
首页 > 资讯 > 前端开发 > html >JavaScript中的箭头函数是什么
  • 767
分享到

JavaScript中的箭头函数是什么

2024-04-02 19:04:59 767人浏览 安东尼
摘要

这篇文章主要讲解了“javascript中的箭头函数是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的箭头函数是什么”吧!一、箭头

这篇文章主要讲解了“javascript中的箭头函数是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的箭头函数是什么”吧!

一、箭头函数没有 “this”

正如我们在 对象方法,"this" 一章中所学到的,箭头函数没有 this。如果访问 this,则会从外部获取。

例如,我们可以使用它在对象方法内部进行迭代:

let group = {   title: "Our Group",   students: ["John", "Pete", "Alice"],    showList() {     this.students.forEach(       student => alert(this.title + ': ' + student)     );   } };  group.showList();

这里 forEach 中使用了箭头函数,所以其中的 this.title 其实和外部方法 showList  的完全一样。那就是:group.title。

如果我们使用正常的函数,则会出现错误:

let group = {   title: "Our Group",   students: ["John", "Pete", "Alice"],    showList() {     this.students.forEach(function(student) {       // Error: Cannot read property 'title' of undefined       alert(this.title + ': ' + student)     });   } };  group.showList();

报错是因为 forEach 运行它里面的这个函数,但是这个函数的 this 为默认值 this=undefined,因此就出现了尝试访问  undefined.title 的情况。

但箭头函数就没事,因为它们没有 this。

不能对箭头函数进行 new 操作

不具有 this 自然也就意味着另一个限制:箭头函数不能用作构造器(constructor)。不能用 new 调用它们。

箭头函数 VS bind

箭头函数 => 和使用 .bind(this) 调用的常规函数之间有细微的差别:

  • .bind(this) 创建了一个该函数的“绑定版本”。

  • 箭头函数 => 没有创建任何绑定。箭头函数只是没有 this。this 的查找与常规变量的搜索方式完全相同:在外部词法环境中查找。

二、箭头函数没有 “arguments”

箭头函数也没有 arguments 变量。

当我们需要使用当前的 this 和 arguments 转发一个调用时,这对装饰器(decorators)来说非常有用。

例如,defer(f, ms) 获得了一个函数,并返回一个包装器,该包装器将调用延迟 ms 毫秒:

function defer(f, ms) {   return function() {     setTimeout(() => f.apply(this, arguments), ms)   }; }  function sayHi(who) {   alert('Hello, ' + who); }  let sayHiDeferred = defer(sayHi, 2000); sayHiDeferred("John"); // 2 秒后显示:Hello, John

不用箭头函数的话,可以这么写:

function defer(f, ms) {   return function(...args) {     let ctx = this;     setTimeout(function() {       return f.apply(ctx, args);     }, ms);   }; }

在这里,我们必须创建额外的变量 args 和 ctx,以便 setTimeout 内部的函数可以获取它们。

三、总结

箭头函数:

  • 没有 this

  • 没有 arguments

  • 不能使用 new 进行调用

  • 它们也没有 super,但目前我们还没有学到它。我们将在 类继承 一章中学习它。

这是因为,箭头函数是针对那些没有自己的“上下文”,但在当前上下文中起作用的短代码的。并且箭头函数确实在这种使用场景中大放异彩。

感谢各位的阅读,以上就是“JavaScript中的箭头函数是什么”的内容了,经过本文的学习后,相信大家对JavaScript中的箭头函数是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: JavaScript中的箭头函数是什么

本文链接: https://www.lsjlt.com/news/81867.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中的箭头函数是什么
    这篇文章主要讲解了“JavaScript中的箭头函数是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的箭头函数是什么”吧!一、箭头...
    99+
    2022-10-19
  • ES5中箭头函数是什么
    这篇文章主要介绍了ES5中箭头函数是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。什么是箭头函数?箭头函数表达式的语法比函数表达式更简洁...
    99+
    2022-10-19
  • ES6中箭头函数是什么
    这篇文章主要介绍ES6中箭头函数是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!箭头函数ES6新增了使用箭头语法定义语法函数表达式的能力。很大程度上,箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是...
    99+
    2023-06-14
  • 最新版JavaScript中的箭头函数
    目录前言箭头函数语法无圆括号语法隐式返回注意隐式返回错误无法命名箭头函数如何处理this关键字匿名箭头函数不正常工作的情况箭头函数作为对象方法箭头函数与第三方库箭头函数没有argum...
    99+
    2022-11-13
    js箭头函数 JavaScript中的箭头函数
  • es6箭头函数的概念是什么
    这篇文章主要介绍“es6箭头函数的概念是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es6箭头函数的概念是什么”文章能帮助大家解决问题。 ...
    99+
    2022-10-19
  • JavaScript中箭头函数的简写方法
    这篇文章将为大家详细讲解有关JavaScript中箭头函数的简写方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。箭头函数简写传统函数编写方法很容易让人理解和编写,但是当嵌套在另一个函数中,则这些优势就荡...
    99+
    2023-06-27
  • JavaScript箭头函数的this怎么使用
    这篇文章主要介绍“JavaScript箭头函数的this怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript箭头函数的this怎么使用”文章能...
    99+
    2022-10-19
  • 详解JavaScript中的箭头函数的使用
    目录前言箭头函数语法无圆括号语法隐式返回注意隐式返回错误无法命名箭头函数如何处理this关键字匿名箭头函数不正常工作的情况箭头函数作为对象方法箭头函数与第三方库箭头函数没有argum...
    99+
    2022-11-13
    JavaScript箭头函数使用 JavaScript 箭头函数 JS 箭头函数
  • Javascript箭头函数中this的示例分析
    小编给大家分享一下Javascript箭头函数中this的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!首先我们先看一段...
    99+
    2022-10-19
  • JavaScript中箭头函数与普通函数的区别详解
    本文为大家讲解了JavaScript中箭头函数与普通函数的区别,供大家参考,具体内容如下 箭头函数: let fun = () => { console.log('...
    99+
    2022-11-12
  • 一文带你掌握JavaScript中的箭头函数
    在JavaScript中,箭头函数是一种简化的函数语法,它在ES6(ECMAScript 2015)引入。箭头函数的语法比传统的function表达式更简洁,同时还有一些特性,例如继...
    99+
    2023-05-19
    JavaScript箭头函数 JavaScript箭头函数使用 JS箭头函数
  • es6箭头函数有什么特性
    这篇文章主要介绍“es6箭头函数有什么特性”,在日常操作中,相信很多人在es6箭头函数有什么特性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6箭头函数有什么特性”的疑惑...
    99+
    2022-10-19
  • js中不能使用箭头函数的情况是什么
    这篇文章主要介绍“js中不能使用箭头函数的情况是什么”,在日常操作中,相信很多人在js中不能使用箭头函数的情况是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js中不能使用箭头函数的情况是什么”的疑惑有所...
    99+
    2023-07-02
  • 关于JS中的箭头函数
    更简短的函数并且不绑定this。 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。 箭头函数表达式更适用于那些本...
    99+
    2023-05-19
    JS 函数 箭头函数
  • 一文带你玩转JavaScript的箭头函数
    目录箭头函数语法规则简写规则常见应用mapfilterreduce箭头函数中的this使用concatthis的查找规则箭头函数 在ES6中新增了函数的简写方式----箭头函数,箭头...
    99+
    2022-11-13
  • JavaScript 箭头函数的特点、与普通函数的区别
    目录1. 箭头函数的使用1. 普通函数到箭头函数2. 省略大括号和 return3. 省略小括号2. 箭头函数与普通函数的区别1. 箭头函数的 this 是父级作用域的 this2....
    99+
    2022-11-12
  • JS箭头函数的语法是什么及怎么使用
    本篇内容介绍了“JS箭头函数的语法是什么及怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!JavaScript的箭头函数随着ECMAS...
    99+
    2023-07-04
  • JavaScript箭头函数与剩余参数怎么使用
    本篇内容主要讲解“JavaScript箭头函数与剩余参数怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript...
    99+
    2022-10-19
  • 箭头函数是不是es6的新功能
    小编给大家分享一下箭头函数是不是es6的新功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 箭头函数是es6的新功能;箭头函数是es6中新增的一个函数,允许使...
    99+
    2022-10-19
  • javascript ES6中箭头函数注意细节有哪些
    小编给大家分享一下javascript ES6中箭头函数注意细节有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言ES6标...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作