首页 >> 大全

= 箭头函数 · 方便、快捷,也要小心坑

2023-09-16 大全 24 作者:考证青年

箭头函数是必须要掌握的,今天我们一起来学习一下,它给开发者带来方便的同时,也要留意它的「无能」。先看一个例子

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 参数将被忽略。

总结

本文主要说明了箭头函数的能与不能。关于 的内容已经快两个月了,不知道还有多少小伙伴还在坚持学习。打卡露个脸,我看看还有多少同学再坚持。大家加油!

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了