js中箭头函数解析

**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.