JavaScirpt基础 之 箭头函数

简介: 箭头函数

JavaScirpt基础 之 箭头函数

箭头函数

箭头函数表达式的语法比普通函数表达式更简洁。

 (参数1, 参数2, …, 参数N) => { 函数声明 }

 (参数1, 参数2, …, 参数N) => 表达式(单一)
 // 相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时,圆括号是可选的:

 (单一参数) => {函数声明}
 单一参数 => {函数声明}

没有参数的函数应该写成一对圆括号:

 () => {函数声明}

举例

 // ES5
 var x = function(x, y) {
      return x * y;
 }
  
 // ES6
 const x = (x, y) => x * y;

有的箭头函数都没有自己的 this。 不适合定义一个 对象的方法。

当我们使用箭头函数的时候,箭头函数会默认帮我们绑定外层 this 的值,

所以在箭头函数中 this 的值和外层的 this 是一样的。

箭头函数是不能提升的,所以需要在使用之前定义。

使用 const 比使用 var 更安全,因为函数表达式始终是一个常量。

如果函数部分只是一个语句,则可以省略 return 关键字和大括号 {},这样做是一个比较好的习惯:

举例

 const x = (x, y) => { return x * y };

注意:IE11 及更早 IE 版本不支持箭头函数。

目录
相关文章
|
2月前
|
自然语言处理
箭头函数和普通函数的区别是什么?
箭头函数和普通函数的区别是什么?
107 63
|
7天前
|
存储 自然语言处理 JavaScript
优化箭头函数中的 this 绑定
【10月更文挑战第27天】通过合理地使用箭头函数的词法 `this` 绑定特性,结合其他 ES6 特性,并注意避免一些常见的陷阱和误区,可以更好地优化箭头函数中的 `this` 绑定,提高代码的质量和性能。
10 2
|
5月前
箭头函数和普通函数的区别
箭头函数和普通函数的区别
23 0
|
6月前
|
自然语言处理
解释一下箭头函数的this绑定行为。
箭头函数的`this`绑定遵循词法作用域,不同于普通函数的动态绑定。它在定义时即确定,不受调用方式影响。这解决了`this`丢失问题,提供了更简洁的语法。例如,当在一个对象中,箭头函数的`this`将指向全局对象或父级作用域,而不是对象本身,与普通函数表现不同,使用时需谨慎。
38 8
|
6月前
箭头函数需要注意的地方
箭头函数需要注意的地方
29 1
普通函数中的this指向问题解决方案箭头函数
普通函数中的this指向问题解决方案箭头函数
41 0
|
6月前
|
JavaScript 前端开发
请解释JavaScript中的箭头函数,并给出一个使用箭头函数的例子。
请解释JavaScript中的箭头函数,并给出一个使用箭头函数的例子。
55 0
|
JavaScript 前端开发
箭头函数和普通函数有什么区别
箭头函数和普通函数有什么区别
67 1
|
JavaScript 前端开发
|
JavaScript 前端开发