当前位置: 首页 > news >正文

JavaScript 箭头函数

(许多人所谓的成熟,不过是被习俗磨去了棱角,变得世故而实际了。那不是成熟,而是精神的早衰和个性的消亡。真正的成熟,应当是独特个性的形成,真实自我的发现,精神上的结果和丰收。——周国平)

在这里插入图片描述

箭头函数

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,super。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

箭头函数特点

1. 不需要编写funtion,而是"=>"这种更简单的箭头替代

const fun = function () {console.log('普通函数');
};
const fun2 = () => {console.log('箭头函数');
};
fun();
fun2();

2. 箭头函数没有自己的this,而是向上查找

更确切的说是箭头函数的外层如果有普通函数,那么箭头函数的this就是这个外层的普通函数的this,箭头函数的外层如果没有普通函数,那么箭头函数的this就是全局变量。

const Person = function () {this.age = 0;setInterval(function () {this.age++; // 由于setInterval属于全局,此时的this属于全局console.log(this.age);}, 1000);
};
new Person();// 为了解决上面的问题,可以单独定义一个that来解决
const Person2 = function () {this.age = 0;const that = this;setInterval(function () {that.age++; // 由于使用的是that,that指向外层的this,所以正常运行console.log(that.age);}, 1000);
};
new Person2();// 有了箭头函数就更简单了,不需要定义that
const Person3 = function () {this.age = 0;setInterval(() => {this.age++; // 由于使用了箭头函数,箭头函数自身没有this,所以指向了外层函数的thisconsole.log(this.age);}, 1000);
};
new Person3();

3. 箭头函数没有arguments

arguments 是一个对应于传递给函数的参数的类数组对象。
可以看出,因为箭头函数自身没有arguments,所以它的arguments指向了外层函数的arguments。而普通函数有自己的arguments,所以能打印出4。

const func1 = function (a, b, c) {const fun2 = function (d, e, f) {console.log(arguments[0]);};fun2(4, 5, 6);
}func1(1, 2, 3);const func2 = function (a, b, c) {const fun3 = (d, e, f) => {console.log(arguments[0]);};fun3(4, 5, 6);
}func2(1, 2, 3);

那么如何解决这个问题?

  1. 使用剩余参数,一个类数组的入参结构
  2. 使用显式参数,也就是入参的参数名
const func1 = function (a, b, c) {const fun2 = function (...arg) {console.log(arg[0]);};fun2(4, 5, 6);
}func1(1, 2, 3);const func2 = function (a, b, c) {const fun3 = (...arg) => {console.log(arg[0]);};fun3(4, 5, 6);
}func2(1, 2, 3);const func3 = function (a, b, c) {const fun4 = (d, e, f) => {console.log(d);};fun4(4, 5, 6);
}func3(1, 2, 3);

4. 箭头函数不能使用new进行实例化

箭头函数除了不能new之外,它还没有prototype原型属性。
这是因为箭头函数没有this,就导致无法绑定实例。因为不能实例化成对象,所以就没有原型链了。

const Fun = () => { };
new Fun();
// TypeError: Fun is not a constructor

更高级的箭头函数

相比较传统的函数,箭头函数在部分场景下可以直接省去返回值和花括号,写法更简洁明了。

const list = [1, 2, 3];
const result = list.find((function (v) {if (v === 3) {return v;}
}))
console.log(result); // 3
const result2 = list.find((v) => v === 3);
console.log(result2); // 3
http://www.lryc.cn/news/64971.html

相关文章:

  • 简单理解Transformer注意力机制
  • Vue3面试题:20道含答案和代码示例的练习题
  • Oracle数据库创建用户
  • 互联网摸鱼日报(2023-04-30)
  • 第二章--第一节--什么是语言生成
  • HTML <!--...--> 标签
  • TinyML:使用 ChatGPT 和合成数据进行婴儿哭声检测
  • JavaScript中的Concurrency并发:异步操作下的汉堡制作示例
  • 微信小程序开发一个多少钱
  • Python基础入门(2)—— 什么是控制语句、列表、元组和序列?
  • 计算机专业大一的一些学习规划建议!
  • 万万没想到在生产环境翻车了,之前以为很熟悉 CountDownLatch
  • Springboot整合Jasypt实战
  • 计算机网络笔记:DNS域名解析过程
  • C语言函数大全-- s 开头的函数(4)
  • Linux常见指令 (2)
  • shell脚本4
  • 递归思路讲解
  • 基于R语言APSIM模型高级应用及批量模拟
  • Hyperf中的其它事项
  • 【技术选型】Elasticsearch 和Solr那个香?
  • 4面美团测试工程师,因为这个小细节,直接让我前功尽弃.....
  • 数据恢复软件EasyRecovery16下载安装步骤教程
  • Springboot 自定义缓存配置 CacheManager 及redis集成
  • JS 中七个改变原数组的方法
  • 【笔试强训选择题】Day7.习题(错题)解析
  • Vue电商项目--axios二次封装
  • 人生四维度
  • Python 调用 MessageBeep 播放系统音效
  • 废物,我TMD一个985却斗不过专科生(大厂自动化测试2年被裁)