图片.png
『ES6脚丫系列』箭头函数
本文字符数4300+，阅读时间约8分钟左右。
【01】箭头函数
等于说，只保留了函数的参数和返回。省略function和return。
写法：
(形参) => {statement;}
=> 等同于return。
01、参数：
01、当只有一个参数时，可以省略参数外面的圆括号()。可以省略结尾的分号。
简化为 Identifier => Expression
02、当有多个参数，或没有参数，或 Rest 参数和参数默认值，或解构参数的函数，都需要用圆括号将参数括起来。(记住第一个情况就好了)
03、可以使用 rest 参数和参数默认值。
02、statement：语句。
语句只有一个时，可以省略外层的花括号{}。
03、可以链式写箭头函数。
比如(x)=>(y)=>(x+y)
04、注意，(形参)和箭头=>必须写在同一行，否则报错。
const fn = x
=> x * 2 // SyntaxError
const fn = (x, y) //SyntaxError
=> {
return x * y
}
正确的写法应该像这样：
const fn = (x, y) => {
return x * y
}
【02】一定要关注箭头函数的 this 问题。
01、箭头函数不绑定this，除了不绑定this之外，还不会绑定arguments、super或new.target。
02、箭头函数体内的 this，继承的是外层代码块的 this。
03、如果对象的方法是箭头函数，那么箭头函数中的this是window，因为对象中不存在this，只能往上找，就找到了全局的 this，指向的是 window。即使这个对象在某一个函数内，也是如此。
相同的规则也适用于在 prototype 对象上定义方法。
所以，不用用箭头函数声明对象的方法。
let o = {
// 不要这么做。
notThis: () => {
console.log(this) // Window
this.objectThis() // Uncaught TypeError: this.objectThis is not a function
},
// 可以这么写
objectThis: function () {
console.log(this) // o
}
// 简化版
objectThis2 () {
console.log(this) // o
}
}
04、不能使用箭头函数来创建事件监听器，因为 this 不再绑定到附加到事件监听器的元素。
可以使用 event.currentTarget 获得正确的 this 上下文。
button.addEventListener('click', function () {
console.log(this) // button
})
button.addEventListener('click', e => {
console.log(this) // Window
console.log(event.currentTarget) // button
})
05、适用于定时器，定时器中的箭头函数中的this，继承外层代码块的this。
let o = {
// Old way
oldDoSthAfterThree: function () {
let that = this
setTimeout(function () {
console.log(this) // Window
console.log(that) // o
})
},
// Arrow function way
doSthAfterThree: function () {
setTimeout(() => {
console.log(this) // o
}, 3000)
}
}
06、箭头函数没有自己的 this，所以不能用 call()、apply()、bind() 这些方法去改变 this 的指向。
【03】不可以当作构造函数
也就是说，不可以使用 new 命令，否则会抛出一个错误。
var Person = (name, age) => {
this.name = name
this.age = age
}
var p = new Func('John', 33) // error
【04】不可以使用 yield 命令
因此箭头函数不能用作 Generator 函数。
【05】箭头函数的typeof运算符和普通的function一样：
var func = a => a
console.log(typeof func); // "function"
instanceof也返回true，表明也是Function的实例：
console.log(func instanceof Function); // true
【06】如果返回值是对象
不能直接使用花括号作为返回值，那会导致错误。
JS引擎在遇到对象的花括号时会把它当作代码块，所以它不认识里面的变量标识、冒号和逗号等。
想直接返回一个对象，你只需要用小括号把整个对象包裹起来就好。
例子：
const getInitialData = () => {
id: 1,
name: 'Jane Doe'
};
// 这里会抛出错误
let initialData = getInitialData();
例子：
// 这就完全有效
const getInitialData = () => ({
id: 1,
name: 'Jane Doe'
});
let initialData = getInitialData();
【07】箭头函数中不能使用 arguments 对象。
它里面的arguments指向它被包裹的外层函数的arguments。
var arguments = 42;
var arr = () => arguments;
arr(); // 42
function foo() {
var f = (i) => arguments[0]+i;
// foo函数的间接参数绑定
return f(2);
}
foo(1); // 3
【08】可以使用rest参数来访问不定数量的参数。
function foo() {
var f = (...args) => args[0];
return f(2);
}
foo(1); // 2
【09】可以在立即执行函数里使用箭头函数。
例子：
( x => x * 2 )( 3 ); // 6
【10】不要在全局作用域定义箭头函数
因为在函数内部操作this会很容易污染全局作用域。最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；
【11】一些常见例子：
例子：
// click.js
const btn = document.querySelector('button');
btn.addEventListener('click', (event) => {
console.log('clicked');
});
例子：
// map.js
let numbers = [1,2,3,4];
let multipliedBy2 = numbers.map((number) => {
return number * 2;
});
console.log(multipliedBy2); // [2, 4, 6, 8]
例子：
const numbers = [1, 2, 3, 4];
const multipliedBy2 = numbers.map((n) => n * 2);
// 或者不需要为参数加上括号
const multipliedBy2WithShorterCallback = numbers.map(n => n * 2);
例子：
const todos = (state = [], action) => {
switch(action.type) {
case ADD_TODO:
return [..state, action.text];
default:
return state;
}
}
例子：
const multiply = (x) => {
return (y) => {
return x * y;
}
};
const multiplyBy3 = multiply(3);
multiplyBy3(2); // 6
multiplyBy3(3); // 9
例子：
const multiply = (x) => (y) => x * y;
const multiplyBy3 = multiply(3);
multiplyBy3(2); // 6
multiplyBy3(3); // 9
下面是箭头函数的使用模式:
// 一个参数对应一个表达式
param => expression;// 例如 x => x+2;
// 多个参数对应一个表达式
(param [, param]) => expression; //例如 (x,y) => (x + y);
// 一个参数对应多个表示式
param => {statements;} //例如 x = > { x++; return x;};
// 多个参数对应多个表达式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};
//表达式里没有参数
() => expression; //例如var flag = (() => 2)(); flag等于2
() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1
//传入一个表达式，返回一个对象
([param]) => ({ key: value });
//例如 var fuc = (x) => ({key:x})
var object = fuc(1);
alert(object);//{key:1}
【】例子：一些写法
// 有效的常规语法
(function(x, y){
x= x * 2;
return x + y;
} (3, "B") );
// 无效的箭头函数语法
( (x, y) => {
x= x * 2;
return x + y;
} ( 3, "A" ) );
// 但是可以这样写就是有效的了:
( (x,y) => {
x= x * 2;return x + y;
} )( 3,"A" );//立即执行函数
网友评论