ES(ECMAScript)之箭头函数

IntMain 发布于2019-08-23 18:27 / 540人阅读

摘要：箭头函数是中最具影响力的变化之一，它们现在被广泛使用。自引入箭头函数以来，它彻底改变了代码的编写方式。与常规函数相比，箭头函数的指向不同。箭头函数也不能用作构造函数，当实例化对象时会引发。处理事件时也是同样的问题。

箭头函数是ES6 / ES2015中最具影响力的变化之一，它们现在被广泛使用。

自引入箭头函数以来，它彻底改变了JavaScript代码的编写方式。

这是一个简单而受欢迎的变化，它允许您使用更短的语法编写函数，比如：

const myFunction = function foo() {
    //...
}

const myFunction = () => {
    //...
}

如果函数体只包含一行语句，则可以省略花括号：

const myFunction = () => doSomething()

传递参数：

const myFunction = (param1, param2) => doSomething(param1, param2)

如果只有一个参数，则可以省略括号：

const myFunction = param => doSomething(param)

隐式返回

箭头函数具有隐式返回：返回值不必使用return关键字。

函数体中只有一行语句时有效：

const myFunction = () => "test"
//返回"test"
myFunction()

另一个例子，返回一个对象（记得在花括号外加一对大括号，避免它被认为是函数体的括号）：

const myFunction = () => ({value: "test"})
//返回{value: "test"}
myFunction()

this在箭头函数中是如何使用的

this根据上下文环境而不同，也取决于JavaScript的模式（是否是严格模式）。

与常规函数相比，箭头函数的this指向不同。

当定义为对象的方法时，在常规函数中，它指的是对象，可以这样做：

const car = {
    model: "Fiesta",
    manufacturer: "Ford",
    fullName: function() {
        return `${this.manufacturer} {this.model}`
 }
}

返回字符串 "Ford Fiesta"

箭头函数的作用域继承自运行环境，所以代码car.fullName()将不起作用，将返回字符串“undefined undefined”：

const car = {
    model: "Fiesta",
    manufacturer: "Ford",
    fullName: () => {
        return `${this.manufacturer} $  {this.model}`
    }
}

因此，箭头函数不适合作为对象方法。

箭头函数也不能用作构造函数，当实例化对象时会引发TypeError。

处理事件时也是同样的问题。 DOM事件侦听器将this设置为目标元素，如果您在事件处理程序中依赖this，则需要常规函数：

const link = document.querySelector("#link")
link.addEventListener("click", () => {
    // this === window
})

const link = document.querySelector("#link")
link.addEventListener("click", function() {
    // this === link
})

云服务器 GPU云服务器箭头函数 ECMAScript ECMAScript 6 ECMAScript6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105255.html

ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
ECMAScript 6新特性印象之一：新语法

摘要：下例实现了一个数组的迭代器在中，可迭代数据结构比如数组都必须实现一个名为的方法，该方法返回一个该结构元素的迭代器。原话是还可以传递返回值。前记按照规划，明年年中，ECMAScript 6(ES6)就要正式发布了。最近抽空看了Dr. Axel Rauschmayer的几篇文章和演讲PPT，对新特性有了些了解。趁没忘，抓紧记录下，夹杂自己的感受。计划分三部分：新语法...

马忠志 2019-08-21 12:28 评论0 收藏0
重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScr

摘要：第二种接口的概念和面向对象编程相关接口视为一份合约，在合约里可以定义这份合约的类或接口的行为接口告诉类，它需要实现一个叫做的方法，并且该方法接收一个参数。定场诗八月中秋白露，路上行人凄凉；小桥流水桂花香，日夜千思万想。心中不得宁静，清早览罢文章，十年寒苦在书房，方显才高志广。前言洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份...

TZLLOG 2019-08-26 10:44 评论0 收藏0
React类，方法绑定（第三部分）

摘要：使用箭头函数和构造函数当方法被调用时，会保留上下文。我们能使用这个特征用下面的方法在构造函数中重定义函数。在调用方法的方使用函数绑定语法你也可以直接在非构造函数里面的里面直接使用函数绑定。这是React和ECMAScript6／ECMAScript7结合使用系列文章的第三篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始...

livem 2019-08-20 17:59 评论0 收藏0
常用ECMAScript6语法归纳

摘要：对象的解构赋值函数执行后，返回的是一个对象。分别取出对象中属性为和的值，根据解构赋值的规则，在左侧声明变量，放在大括号中，变量名要和属性名保持一致。箭头函数在中，箭头函数就是函数的一种简写形式允许使用箭头定义函数。原文博客地址，欢迎学习交流:点击预览声明变量可以使用let、const关键字声明变量，而不推荐使用var声明变量 var声明变量的问题：可以多次重复声明同一个变量...

raledong 2019-08-22 15:14 评论0 收藏0