= 箭头函数 · 方便、快捷,也要小心坑
箭头函数是必须要掌握的,今天我们一起来学习一下,它给开发者带来方便的同时,也要留意它的「无能」。先看一个例子:
const names = ['wsy','suyan','前端小课'
];
let lengths = names.map(name => name.length);
console.log('lengths = ', lengths);
结过如图:
先看下它的语法:
1、无参数
function call(callback) {callback();
}
call(() => {console.log('arrow void');
});
// 箭头函数类似于下面这个函数
call(function () {console.log('void');
});
2、只有一个参数,无返回值
function call(callback) {callback('前端小课');
}
call(name => {console.log('arrow', name);
});
// 箭头函数类似于下面这个函数
call(function (name) {console.log(name);
});
3、只有一个参数,有返回值
function call(callback) {// 返回值为 4let len = callback('前端小课');console.log(len);
}// 只有一行表达式省略大括号
call(name => name.length);
// 类似于这个
call(name => {return name.length;
});
// 箭头函数类似于下面这个函数
call(function (name) {return name.length;
});
4.有多个参数,有返回值
function call(callback) {let len = callback(1, 2, 3);console.log(len); // 6
}// 多个个参数,有返回值,只有一行表达式省略大括号
call((a, b, c) => a + b + c);
// 类似与这个
call((a, b, c) => {return a + b + c;
});
// 箭头函数类似于下面这个函数
call(function (a, b, c) {return a + b + c;
});
从上面这些例子可以知道,每个箭头函数都能写出一个与其功能相同的普通函数,那为什么还用箭头函数?
在 连接你、我、他 —— this 这节课程中使用箭头函数解决了 this 指向的问题。不知道你们有没有发现当写下面这两个函数的时候, 默认使用的是箭头函数:
setTimeout(() => {// 这里是箭头函数
}, 100);setInterval(() => {// 这个是箭头函数
}, 200);
使用箭头函数有几点需要留意:
1、让函数更简短,上面例 3 就是一个很好的例子;
2、没有自己的 this 和 ,比如有如下代码:
let person = {name: 'suyan',showName: function (age) {window.setTimeout(() => {console.log('this = ', this);console.log('arguments = ', arguments);console.log(this.name, age);}, 100);}
};
person.showName(20);
打印结果为:
3、不能作为构造函数;
let Dog = name => {this.name = name;
};
// 错误 Uncaught TypeError: Dog is not a constructor
let aDog = new Dog('fe');let Dog2 = function (name) {this.name = name;
};
// 正确
let aDog2 = new Dog2('fe');
4.箭头函数没有 属性:
let Dog = name => {this.name = name;
};
Dog.prototype; // undefined
5.不能通过 call、apply 绑定 this
var name = 'I am widow';let animal = {name: 'animal',showName: age => {console.log('this = ', this);console.log('name | age = ', this.name, age);}
};
let dog = {name: 'dog'
};animal.showName.call(dog, 20);
animal.showName.apply(dog, [21]);
let bindName = animal.showName.bind(dog, 22);
bindName();
运行代码,结果如下:
由于箭头函数没有 this 指针,不能通过 call、apply、bind 的方式来修改 this。只能传递参数,this 参数将被忽略。
总结
本文主要说明了箭头函数的能与不能。关于 的内容已经快两个月了,不知道还有多少小伙伴还在坚持学习。打卡露个脸,我看看还有多少同学再坚持。大家加油!