箭头函数替代匿名函数
- 无参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</style>
</style>
</head>
<body>
<script>
var fn = function() {
console.log('匿名函数');
}
var f = () => {
console.log('箭头函数');
}
// 匿名函数
fn();
// 箭头函数
f();
</script>
</body>
</html>
- 一个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</style>
</style>
</head>
<body>
<script>
var fn = function(name) {
console.log(name);
}
var f1 = name => {
console.log(name);
}
var f2 = (name) => {
console.log(name);
}
// 匿名函数
fn('匿名函数');
// 箭头函数1
f1('箭头函数1');
// 箭头函数2
f2('箭头函数2');
</script>
</body>
</html>
- 多个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</style>
</style>
</head>
<body>
<script>
var fn = function(name, age) {
console.log('My name is '+name+', I am '+age);
}
var f = (name, age) => {
console.log('My name is '+name+', I am '+age);
}
// My name is Tome, I am 18
fn('Tome', 18);
// My name is Perrer, I am 20
f('Perrer', 20);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</style>
</style>
</head>
<body>
<script>
var students = [1, 3, 5];
students.forEach(function(value, index) {
// 0 : 1
// 1 : 3
// 2 : 5
console.log(`${index} : ${value}`);
})
students.forEach((value, index) => {
// 0 : 1
// 1 : 3
// 2 : 5
console.log(`${index} : ${value}`);
})
</script>
</body>
</html>
箭头函数和匿名函数的区别
- 箭头函数体内的 this 由其外层函数决定；匿名函数体内的 this 由其调用方式决定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</style>
</style>
</head>
<body>
<script>
var person = {
age: 18,
// 箭头函数形式
run: ()=>{
setTimeout(()=>{
// this 指向 window 对象
// 分析：箭头函数里的 this 不再由箭头函数的调用方式决定，而是由其外层函数决定，而这里的外层 run 函数也是箭头函数，所以由其外层函数决定
console.log(this);
}, 100)
},
// 匿名函数形式
travel: function() {
setTimeout(()=>{
// this 指向 person 对象
// 分析：匿名函数里的 this 由匿名函数的调用方式决定
console.log(this);
}, 100)
},
// ES6 对象方法的简写形式（推荐使用方式）
say() {
// this 指向 person 对象
console.log(this);
setTimeout(()=>{
// this 指向 person 对象
// 分析：箭头函数里的 this 由其外层函数决定
console.log(this);
}, 100)
}
}
person.run();
person.travel();
person.say();
</script>
</body>
</html>
- 箭头函数不可以当做构造函数使用，即不可以使用 new 命令
- 箭头函数不可以使用 arguments 对象，如果要用，可以用 rest 参数代替（https://www.jianshu.com/p/ffd27c23b751）
网友评论