ES之箭头函数

来源:http://www.chinese-glasses.com 作者:Web前端 人气:193 发布时间:2020-04-22
摘要:greetEveryone没有任何参数。保留参数括号()。 toconst myFunction = () = { const greetConcise = who = `${who}, Welcome!`;greetConcise('Friends'); // = "Friends, Welcome!" }) 时间: 2019-09-22阅读: 137标签: 技巧 this在箭头

greetEveryone没有任何参数。保留参数括号()。

toconst myFunction = () => {

const greetConcise = who = `${who}, Welcome!`;greetConcise('Friends'); // = "Friends, Welcome!"

})

时间: 2019-09-22阅读: 137标签: 技巧

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

类字段提案(截至2019年8月,第3阶段)向类中引入了粗箭头方法语法。这种方法中的this总是绑定到类实例上。

当定义为对象的方法时,在常规函数中,它指的是对象,因此您可以这样做:const car = {

当使用最短的箭头函数语法并返回对象文字时,可能会遇到意外的结果。

函数体中只有一行语句时隐式返回有效:const myFunction = () => 'test'

原文:-arrow-functions-shortening-recipes/

calling car.fullName() will return "Ford Fiesta" .

无论如何,你都可能会进行尝试。但我建议你将可读性放在简洁性之前。

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

const greetObject = who = { message: `${who}, Welcome!` };greetObject('Klingons'); // = undefined

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

尽管需要尽可能的使用短语法,但是必须明智地使用它。否则你可能会遇到可读性问题,尤其是在多个嵌套的简洁箭头函数的情况下。

this概念可能很难掌握,因为它根据上下文环境而变化,也取决于JavaScript的模式。

2.2 注意参数解构

箭头函数是ES6 / ES2015中最具影响力的变化之一,它们现在被广泛使用。它们与常规函数略有不同。

class Greet { constructor(what) { this.what = what; } getMessage = who = `${who}, ${this.what}!`}const welcome = new Greet('Welcome');welcome.getMessage('Romulans'); // = 'Romulans, Welcome!'

这是一个简单而受欢迎的变化,它允许您使用更短的语法编写函数,比如:const myFunction = function foo() {

我喜欢简洁的箭头函数,可以立即展示该函数的功能。

澄清这个概念很重要,因为与常规函数相比,箭头函数的this指向非常不同。

这时我会避免使用最短的语法,并使函数定义更长一些:

fullName: () => {

简洁是好的,只要它能够增加可读性即可。如果你有许多嵌套的箭头函数,最好避免使用最短的形式。

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

const greetObject = who = ({ message: `${who}, Welcome!` });greetObject('Klingons'); // = { message: `Klingons, Welcome!` }

// this === window

参数括号(param1, param2)return关键字甚至大括号{ }。

model: 'Fiesta',

虽然multiplyFactory很短,但是乍一看可能很难理解它的作用。

manufacturer: 'Ford',

({ message: `${who}, Welcome!` })是一个表达式。现在 JavaScript 将其视为包含对象文字的表达式。

// this === link

期望greetObject返回一个对象,它实际上返回undefined。

link.addEventListener('click', function() {

const multiplyFactory = m = { return x = x * m;};const double = multiplyFactory(2);double(5); // = 10

在我看来,这种变化发展迅速,你现在很少在现代javascript代码库中看到function关键字的用法。

不必担心会忽略return,因为箭头函数会隐式返回表达式评估结果。这是我最喜欢的箭头函数语法的简化形式。

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

如果箭头函数有一个带有默认值的参数,则必须保留括号。

}

当箭头函数只有一个参数时,可以省略参数括号。

link.addEventListener('click', () => {

x = x *10bet, 2很容易暗示一个将数字乘以2的函数。

在括号中传递参数:const myFunction = (param1, param2) => doSomething(param1, param2)

尽管这种简化很容易掌握,但是在必须保留括号的情况下也有一些例外。让我们看看这些例外。

另一个例子,返回一个对象(记得在花括号外加一对大括号,避免它被认为是函数体的括号):const myFunction = () => ({value: 'test'})

const greet = (who) = { return `${who}, Welcome!`};greet('Aliens'); // = "Aliens, Welcome!"

带有箭头函数的作用域继承自执行体的上下文。所以在此代码car.fullName()将不起作用,并将返回字符串“undefined undefined”:const car = {

  1. 简洁并不总是意味着可读性好

//...

你可以将这些诀窍与粗箭头方法放在一起使用。

fullName: function() {

该函数的唯一参数使用解构{who}来访问对象的属性who。这时必须将解构式用括号括起来:({who {}})。

//...

当箭头函数主体内仅包含一个表达式时,可以去掉花括号{}和return关键字。

隐式的返回

接下来我们看看如何缩短箭头函数,在处理回调时,使它更易于阅读。

}

参数who的默认值为Martians。在这种情况下,必须将一对括号放在单个参数(who ='Martians')周围。

}

const sayMessage = (what, who) = { return `${what}, ${who}!`;};sayMessage('Hello', 'World'); // = 'Hello, World!'

manufacturer: 'Ford',

使用上面介绍的诀窍,可以通过删除参数括号、花括号或return关键字来缩短箭头函数。

}

典型的箭头函数如下所示:

})

让我们看看这时下会发生些什么事:

10bet 1

greetConcise是箭头函数语法的最短版本。即使没有return,也会隐式返回$ {who},Welcome!表达式。

model: 'Fiesta',

const multiplyFactory = m = x = x * m;const double = multiplyFactory(2);double(5); // = 10

const link = document.querySelector

本文由10bet发布于Web前端,转载请注明出处:ES之箭头函数

关键词:

最火资讯