js中箭头函数解析
Author: 图恩Category: 编程开发Views: 596Published: 2022-04-12 **Article Class: _2rhmJa**
---
### 1. Characteristics
- **No `this`, `super`, `arguments` or `new.target` binding**
- **Cannot modify `this`**
- **Cannot be called with `new`**
- **No prototype**
- **No `arguments` object**
- **No duplicate named parameters allowed**
Arrow functions cannot have duplicate named parameters, regardless of whether they are in strict mode.
---
### 2. Syntax
Arrow functions have multiple syntax variations. When there is only one parameter, the arrow follows the parameter and directly returns the value, without needing `return` keyword. Example:
```javascript
var arrFn = value => value;
console.log(arrFn(1)); // 1
```
This is equivalent to:
```javascript
var arrFn = function(value) {
return value;
}
console.log(arrFn(2)); // 2
```
For functions with two parameters, parentheses must be added:
```javascript
var arrFn = (value, value2) => value + value2;
console.log(arrFn(1, 2)); // 3
```
Equivalent to:
```javascript
var arrFn = function(value, value2) {
return value + value2;
}
console.log(arrFn(2, 2)); // 4
```
When there are no parameters, empty parentheses must be used:
```javascript
var arrFn = () => '返回值';
console.log(arrFn()); // 返回值
```
Equivalent to:
```javascript
var arrFn = function() {
return '返回值2';
}
console.log(arrFn()); // 返回值2
```
To create an empty arrow function or handle multiple statements, use `{}` after the arrow:
```javascript
var arrFn = () => {};
console.log(arrFn()); // undefined
```
Equivalent to:
```javascript
var arrFn = function() {}
console.log(arrFn()); // undefined
```
For functions with multiple statements:
```javascript
var arrFn = (value, value2) => {
console.log(1111);
return value + value2;
}
console.log(arrFn(1, 2)); // 3
```
Equivalent to:
```javascript
var arrFn = function(value, value2) {
console.log(222);
return value + value2;
}
console.log(arrFn(2, 2)); // 4
```
---
### 3. No Own `this`
Arrow functions do not have their own `this`. Their `this` depends on the context object they are in. Example:
```javascript
let obj = {name: 1};
function add(sum1){
return () => {
console.log(this);
}
}
var fn = add();
fn(); // window
var fn = add.call(obj);
fn(); // obj
```
Initially, `add()` points to `window`. Inside the arrow function, `this` refers to `window`. After using `call()`, `add()`'s `this` is set to `obj`, so `this` inside the arrow function refers to `obj`.
---
### 4. Cannot Modify `this`
Since arrow functions do not have their own `this`, their `this` depends on their parent context. Therefore, `this` cannot be modified throughout the function's lifetime. Example:
```javascript
let obj = {name: 1};
let arrFn = () => {
console.log(this);
}
arrFn.call(obj); // window
```
Even when using `call()`, `this` remains `window`.
---
### 5. Cannot Be Called with `new`
Arrow functions do not have the `[[Construct]]` method, so they cannot be used as constructors. Calling them with `new` will throw an error. Example:
```javascript
let arrFn = () => {
console.log(this);
}
new arrFn(); // 报错: arrFn is not a constructor
```
---
### 6. No Prototype
Since arrow functions cannot be constructed, they do not require a prototype. Example:
```javascript
let arrFn = () => {
console.log(this);
}
console.log(arrFn.prototype); // undefined
```
---
### 7. No `arguments` Object
Arrow functions do not have their own `arguments` object. They access parameters via named parameters or rest parameters. Example:
```javascript
let arrFn = () => {
console.log(arguments);
}
arrFn(); // 报错: arguments is not defined
function add(sum1) {
return () => {
console.log(arguments);
}
}
var fn = add(1, 2, 3);
fn(); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
```
Even though the arrow function does not have its own `arguments` object, it can access the `arguments` object of the function it is part of. Example:
```javascript
let arrFn = () => {
console.log(arguments);
}
arrFn(); // 报错: arguments is not defined
```
---
### Summary
Arrow functions are a concise syntax for writing functions in JavaScript, but they have specific limitations:
- **No `this`, `super`, `arguments`, or `new.target` binding**
- **Cannot modify `this`**
- **Cannot be called with `new`**
- **No prototype**
- **No `arguments` object**
- **No duplicate named parameters**
- **No own `this`**
- **Cannot be used as constructors**
- **No prototype**
- **No `arguments` object**
These features make arrow functions useful in certain scenarios but limit their use in others.