给我举一个箭头函数和普通函数的区别
时间: 2023-08-08 19:10:39 浏览: 62
下面是一个箭头函数和普通函数的区别的示例:
```javascript
// 普通函数
function multiply(a, b) {
return a * b;
}
// 箭头函数
const multiplyArrow = (a, b) => a * b;
```
在上面的示例中,`multiply`是一个普通函数,而`multiplyArrow`是一个箭头函数。它们的功能相同,都是用于计算两个数的乘积。
主要的区别在于语法和`this`的指向:
1. 语法:箭头函数使用箭头(=>)来替代传统的function关键字。可以看到,箭头函数的语法更为简洁,省略了`function`关键字以及大括号和`return`关键字(当函数体只有一条表达式时)。
2. `this`指向:箭头函数没有自己的`this`值,它会继承定义时所在的父级作用域的`this`值。而普通函数的`this`值是在运行时动态绑定的,根据函数的调用方式可以有不同的指向。
```javascript
const obj = {
num: 10,
multiply: function(a) {
return a * this.num;
},
multiplyArrow: (a) => a * this.num
};
console.log(obj.multiply(5)); // 输出:50 (普通函数中的this指向obj)
console.log(obj.multiplyArrow(5)); // 输出:NaN (箭头函数中的this指向全局对象,无法获取num属性)
```
在上面的示例中,`obj`对象包含了一个普通函数`multiply`和一个箭头函数`multiplyArrow`。当调用`multiply`时,普通函数内部的`this`指向`obj`,可以获取到`obj`对象中的`num`属性。而当调用`multiplyArrow`时,箭头函数内部的`this`指向全局对象(在浏览器环境下是`window`),无法获取到`obj`对象中的`num`属性,因此返回的是`NaN`。
综上所述,箭头函数和普通函数在语法和`this`的指向上有一些区别,需要根据具体情况选择使用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)