深入理解JavaScript中的箭头
2024-08-24 05:04:04
箭头函数可以使我们的代码更加简洁,如下:
var sum = (a,b) => a+b;
JavaScript 充满了我们需要编写在其他地方执行的小函数的情况。
例如:
- arr.forEach(func) —— forEach 对每个数组元素都执行 func 。
- setTimeout(func) —— func 由内建调度器执行。
……还有更多。
JavaScript 的精髓在于创建一个函数并将其传递到某个地方。 在这样的函数中,我们通常不想离开当前上下文。这就是箭头函数的主战场啦。
箭头函数没有 this 。如果访问 this ,则会从外 部获取。
const group = {
title: "Our Group",
students: ["John", "Pete", "Alice"], showList() {
this.students.forEach((student) => console.log(`${this.title}:${student}`));
},
}; group.showList();
如何使用普通函数则会出现错误,原因如下:
this指向错误,因为函数调用的上下文并非是group
不能对箭头函数进行 new 操作 不具有 this 自然也就意味着另一个限制:箭头函数不能用作构造器(constructor)。不能用 new 调用它们。
—《现代JavaScript教程》
箭头函数没有 “arguments”
当我们需要使用当前的 this 和 arguments 转发一个调用时,这对装饰器(decorators)来说 非常有用
function defer(f,ms) {
return function () {
setTimeout(()=>f.apply(this,arguments),ms);
}
}
function sayHi(who) {
console.log(`Hello ${who}`);
} const sayHiDeferred = defer(sayHi,2000);
sayHiDeferred('Peng');
如何使用普通函数的话,则需要如下这样:
function defer (f,ms) {
return function(...args) {
const ctx = this;
setTimeout(function() {
return f.apply(ctx,args);
},ms);
}
}
箭头函数总结:
- 没有 this
- 没有 arguments
- 不能使用 new 进行调用
- 它们也没有 super (在下一篇类继承中说明)
最新文章
- Python-os
- 常见linux命令释义(第三天)
- MyBatis环境搭建配置文件+入门视频下载
- 安装elasticsearch
- centos 普通用户添加sudo权限
- Stage3D学习笔记(五):通过矩阵操作纹理
- HDU-2521 反素数
- 重新看php数组
- SQL 常用基础语句
- ipa制作
- 记一次 Newtonsoft.Json 巧妙的用法(C#)
- c——闰年
- SVN迁移到GitLab,保留提交记录
- 把本人基于Dubbo的毕业设计分享粗来~
- oracle数据库导出与导入
- numpy 中的 broadcasting 理解
- Win10 快捷命令收集
- Hexo之部署github
- 关于 qtchooser
- jmeter函数助手之time函数实操
热门文章
- Mybatis plus 报错Invalid bound statement (not found) 终极解决办法
- socket 的使用
- java.lang.IllegalStateException Unable to find a @SpringBootConfiguration错误解决方案
- 20201103gryz模拟赛解题报告
- 题解 UVA11694 【Gokigen Naname谜题 Gokigen Naname】
- 在nodejs中创建cluster
- HTML5 学习表格应用
- 跨边界传输之反弹shell
- Spring Cloud与Docker——微服务架构概述
- java HashMap and HashMultimap 区别