📢 鸿蒙专栏：想学鸿蒙的，冲
📢 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新知!
我们改日再会
