js中普通函数和箭头函数的区别
时间: 2024-05-25 19:12:50 浏览: 15
在JavaScript中,普通函数和箭头函数之间有几个重要的区别:
1. 语法结构不同:箭头函数使用箭头(=>)而不是关键字function来定义函数。
2. this指向不同:箭头函数中的this指向的是其定义时所在的对象,而不是调用时的对象。而普通函数中的this指向的是调用该函数的对象。
3. arguments对象不同:箭头函数没有自己的arguments对象,它们使用外围函数的arguments对象。
4. 返回值不同:箭头函数可以省略return关键字,直接将表达式写在箭头函数内部,而普通函数需要使用return关键字来返回值。
5. 无法作为构造函数:箭头函数不能使用new关键字来调用,因为它们没有自己的this值,也没有prototype属性,所以无法作为构造函数使用。
需要注意的是,在使用箭头函数时需要注意this指向的问题,如果不理解this的绑定规则,可能会导致一些意料之外的错误。
相关问题
普通函数和箭头函数的区别
JavaScript 中的普通函数和箭头函数有以下区别:
1. 语法:箭头函数使用箭头符号(=>)来代替 function 关键字,语法更加简洁。
```javascript
// 普通函数
function sayHello(name) {
console.log("Hello, " + name);
}
// 箭头函数
let sayHello = (name) => {
console.log("Hello, " + name);
};
```
2. this 的指向:普通函数中的 this 指向的是调用该函数的对象,而箭头函数中的 this 指向的是定义该函数时的上下文对象。
```javascript
let obj = {
name: "John",
sayHello: function() {
console.log("Hello, " + this.name);
},
sayHelloArrow: () => {
console.log("Hello, " + this.name);
}
};
obj.sayHello(); // 输出:Hello, John
obj.sayHelloArrow(); // 输出:Hello, undefined
```
3. arguments 对象:普通函数中可以使用 arguments 对象获取函数的参数列表,而箭头函数中没有 arguments 对象,需要使用 rest 参数来获取函数的参数列表。
```javascript
// 普通函数
function sum() {
let result = 0;
for (let i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
// 箭头函数
let sum = (...args) => {
let result = 0;
for (let i = 0; i < args.length; i++) {
result += args[i];
}
return result;
};
```
总之,箭头函数是一种更加简洁、更加易读的函数表达式,但是它的特性和普通函数有所不同,需要根据具体的情况来选择使用。
JavaScript中箭头函数和普通函数的区别和示例代码
箭头函数和普通函数的区别主要体现在以下几个方面:
1. 箭头函数没有自己的this,它的this指向定义它时所处的作用域的this值。
2. 箭头函数不能作为构造函数使用。
3. 箭头函数没有arguments对象。
下面是示例代码:
普通函数:
```javascript
function sum(a, b) {
return a + b;
}
console.log(sum(1, 2)); // 输出 3
```
箭头函数:
```javascript
const sum = (a, b) => a + b;
console.log(sum(1, 2)); // 输出 3
```
普通函数中的this指向调用该函数的对象:
```javascript
const person = {
name: '张三',
sayName: function() {
console.log(this.name);
}
};
person.sayName(); // 输出 '张三'
```
箭头函数中的this指向定义它时的作用域:
```javascript
const person = {
name: '张三',
sayName: () => console.log(this.name)
};
person.sayName(); // 输出 undefined
```
普通函数中的arguments对象可以获取所有传递给函数的参数:
```javascript
function getSum() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(getSum(1, 2, 3, 4)); // 输出 10
```
箭头函数中没有arguments对象,但可以使用rest参数获取所有传递给函数的参数:
```javascript
const getSum = (...args) => args.reduce((sum, num) => sum + num, 0);
console.log(getSum(1, 2, 3, 4)); // 输出 10
```
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)