箭头函数 - JavaScript的新宠儿

📢?鸿蒙专栏：想学鸿蒙的，冲

📢 C语言专栏：想学C语言的，冲

📢?VUE专栏：想学VUE的，冲这里

📢?CSS专栏：想学CSS的，冲这里

📢 Krpano专栏：想学VUE的，冲这里

?📢 JavaScript专栏：想学JavaScript的，冲这里

🔔 上述专栏，都在不定期持续更新中！！！！！！！

目录

? 前言

箭头函数的基本语法:

this绑定

调用限制

其他特点

? 结语

---

?

? 前言

????????自ECMAScript 6起,JavaScript中引入了箭头函数,这是ES6最让人兴奋的特性之一。它极大地简化了函数的定义方式,让代码更加简洁。你是否也想立即掌握这个强大的新功能,但又不知道该如何使用?本文将全面解析箭头函数的用法、优缺点和场景运用,带你完全领会箭头函数的强大魅力。准备好你的JavaScript大脑,我们开始吧!

箭头函数的基本语法:

const func = (arg1, arg2) => expression;

?这样简洁的语法适用于只有一个表达式的函数:

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

如果函数体有多条语句,需要用花括号 {} 括起来:

const sum = (a, b) => {
  let result = a + b;
  return result;
}

这里有几个关键点:

• 使用=>定义函数,左侧为参数,右侧为函数体
• 当只有一个参数,可以省略括号
• 函数体如果只有一个表达式,可以省略大括号{},表达式结果会默认返回

举个例子:

// 两个参数
const add = (a, b) => a + b; 

// 无参数
const showMsg = () => console.log('Hello');

// 多行函数体需要加{}
const sum = (a, b) => {
  let result = a + b;
  return result;
}

?这就定义了三个箭头函数。语法简洁许多。

this绑定

箭头函数不绑定this,this的值继承自外围作用域。例如:

const obj = {
  name: 'Jack',
  print: () => {
    console.log(this.name); // this为全局对象 
  }
}

?print()里的this不是绑定到obj对象,而是继承自全局作用域。

调用限制

箭头函数不能用作构造函数,不能使用new命令,也就不能绑定prototype。

同样也不能用call、apply、bind来改变this的绑定对象。

其他特点

箭头函数不能作为Generator函数,不能使用yield关键字。

也不支持arguments变量。

箭头函数还有一些特别的地方需要注意:

• 函数体只有一条语句,return?可以省略
• 没有自己的this,this的值继承自外围作用域
• 无法通过new关键字调用,所以也就没有了prototype
• 不可以改变this的绑定,所以不适用于定义对象方法
• 不能作为 Generator 函数,不能使用yield关键字

????????尽管有一些限制,但箭头函数作为一种更简洁的函数表达式语法,适用于许多常见的函数场景,可以让我们的代码更加简洁。它很好地满足了函数式编程的需求。

????????所以,在适当的场景下使用箭头函数,可以让我们的代码更加简介易读。它是JavaScript中一个非常棒的新特性,快去尝试使用箭头函数吧!

? 结语

????????通过今天的学习,我们已经全面了解了JavaScript ES6中的箭头函数,包括语法定义、this绑定、省略return、调用限制等特性。合理使用箭头函数可以让我们的代码更加简洁优雅。但也要注意它的限制,不可滥用。总之,箭头函数是一个非常nice的ES6新特性,它将极大地推动函数式编程在JavaScript中的发展。如果你喜欢这篇博客,欢迎分享给你的编程伙伴一起get新知!

? ? ? ? 我们改日再会