箭头函数和function
时间: 2023-07-14 18:12:03 浏览: 64
关键字 function 定义的函数是传统的 JavaScript 函数,而箭头函数是 ES6 引入的一种新的函数定义方式。
箭头函数相较于传统函数,有以下几个特点:
1. 箭头函数没有自己的 this,它的 this 是继承外层函数的 this 值。这意味着在箭头函数内部,无法通过 this 访问到全局对象,也无法将 this 绑定到其他对象上。
2. 箭头函数不能用作构造函数,也就是说不能通过 new 关键字实例化一个箭头函数,因为它没有 prototype 属性。
3. 箭头函数没有 arguments 对象,因此无法通过 arguments 访问函数参数。箭头函数的参数列表只能通过命名参数和默认参数来定义。
4. 箭头函数不能使用 yield 关键字,因此不能用于定义生成器函数。
下面是传统函数和箭头函数的示例:
```
// 传统函数的定义方式
function add(a, b) {
return a + b;
}
// 箭头函数的定义方式
const add = (a, b) => a + b;
```
箭头函数的语法更加简洁,尤其是当函数体只包含一条语句时。但是,由于箭头函数没有自己的 this,因此在某些情况下可能会出现意料之外的结果,需要谨慎使用。
相关问题
javascript箭头函数和function
JavaScript中的箭头函数和普通函数(function)有一些区别:
1. 箭头函数没有自己的this,它的this是继承自外层作用域的this。
2. 箭头函数没有arguments对象,可以使用rest参数(...args)代替。
3. 箭头函数不能用作构造函数,不能使用new关键字调用。
4. 箭头函数没有原型属性。
下面是一个箭头函数的例子:
```
const sum = (a, b) => a + b;
console.log(sum(1, 2)); // 输出 3
```
这是一个普通函数的例子:
```
function sum(a, b) {
return a + b;
}
console.log(sum(1, 2)); // 输出 3
```
箭头函数和普通函数区别
箭头函数和普通函数在语法和功能上有一些区别。
1. 语法简洁性:箭头函数使用箭头(=>)来定义,省略了`function`关键字和大括号。如果函数体只有一条语句,箭头函数可以省略`return`关键字,并且自动返回该语句的结果。例如:
```javascript
// 普通函数
function add(a, b) {
return a + b;
}
// 箭头函数
const add = (a, b) => a + b;
```
2. `this`的指向:箭头函数没有自己的`this`绑定,它会继承外层作用域的`this`。而普通函数的`this`指向调用它的对象或者全局对象(在严格模式下为`undefined`)。
```javascript
// 普通函数
const obj = {
name: 'Alice',
sayHello: function () {
console.log(`Hello, ${this.name}`);
}
};
obj.sayHello(); // 输出: Hello, Alice
// 箭头函数
const obj = {
name: 'Alice',
sayHello: () => {
console.log(`Hello, ${this.name}`);
}
};
obj.sayHello(); // 输出: Hello, undefined
```
3. 构造函数:箭头函数不能用作构造函数,不能使用`new`关键字创建实例。普通函数可以用作构造函数,并且可以创建实例对象。
```javascript
// 普通函数
function Person(name) {
this.name = name;
}
const alice = new Person('Alice');
console.log(alice.name); // 输出: Alice
// 箭头函数
const Person = name => {
this.name = name;
};
const alice = new Person('Alice'); // 报错: Person is not a constructor
```
总的来说,箭头函数更适合简单的、短小的函数,而普通函数则更灵活,适用于各种场景。