ES6:箭头函数(Arrow Function)
程序员文章站
2023-12-21 13:07:34
...
1.语法
通常书写匿名函数是这样的:
function (){
//...
}
改写为箭头函数:
() => {
//...
}
带参数的改写:
//单个参数
(x) => {
//...
}
//单个参数可省略()
x => {
//...
}
//多个参数
(x, y, z) => {
//...
}
总结起来就是:
function去掉,()后加=>,一个参数可省略(),多个参数用逗号隔开
2.隐式返回
什么是隐式返回?
先看一下什么是显式返回:
function (x){
return x*2;
}
其中的return语句就是显式返回
而隐式返回是箭头函数对显式返回的改写,上面的代码就可以改写为:
x => x*2
隐式返回极大简化了只要简单返回某些值的函数写法
3.this
有以下的代码:
const people = {
name: 'Tom',
say: function() {
const sayHello = function() {
console.log('hello ' + this.name);
}
sayHello();
}
}
people.say();//打印:“hello ”
添加两个 console.log(this) 来观察一下
const people = {
name: 'Tom',
say: function() {
console.log(this);//people
const sayHello = function() {
console.log(this);//Window
console.log('hello ' + this.name);
}
sayHello();
}
}
people.say();//打印:“hello ”
第一个this为people这个对象,第二个则是Window,因为this是在运行时绑定, people.say() 调用了say方法,所以第一个this应该指向people,第二个console是在sayHello方法中,sayHello是一个独立的函数,它不是被people对象调用,所以this会指向Window。
通常的解决方法是添加一个self = this语句,将下面的this改为self:
const people = {
name: 'Tom',
say: function() {
const self = this;
const sayHello = function() {
console.log('hello ' + self.name);
}
sayHello();
}
}
people.say();//打印:“hello Tom”
而使用箭头函数可以直接解决这个问题:
const people = {
name: 'Tom',
say: function() {
const sayHello = () => {
console.log('hello ' + this.name);
}
sayHello();
}
}
people.say();//打印:“hello Tom”
箭头函数没有自己的this值,其this值是继承父作用域。
4.不适用场景
1️⃣定义函数的方法,且直接使用this
const p1 = {
name: 'Tom',
showName: function() {
console.log(this.name);
}
}
p1.showName(); //Tom
const p2 = {
name: 'Tom',
showName: () => {
console.log(this.name);
}
}
p2.showName(); //空
因为箭头函数的this值继承父作用域,所以上面代码直接定义使用this的函数时,this实际指向的是Window
2️⃣需要动态this时,如addEventListener
<button id="helloBtn">click</button>
const button = document.getElementById('helloBtn');
button.addEventListener('click', () => {
this.innerText = 'hello!';
}); //无法实现
3️⃣使用new 操作符或prototype 属性
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor
var Foo = () => {};
console.log(Foo.prototype); // undefined
4️⃣使用Arguments 对象