经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
关于ES6中的箭头函数超详细梳理
来源:jb51  时间:2022/8/1 15:09:02  对本文有异议

一、箭头函数的介绍

1.1 什么是箭头函数

ES6中允许使用=>来定义函数。箭头函数相当于匿名函数,并简化了函数定义。

1.2 基本语法

  1. // 箭头函数
  2. let fn = (name) => {
  3. // 函数体
  4. return `Hello ${name} !`;
  5. };
  6.  
  7. // 等同于
  8. let fn = function (name) {
  9. // 函数体
  10. return `Hello ${name} !`;
  11. };

箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=>来定义函数,省去关键字function。

函数的参数放在=>前面的括号中,函数体跟在=>后的花括号中

1.3 箭头函数的参数

①如果箭头函数没有参数,写空括号

  1. //没有参数,写空括号
  2. let fn = () => {
  3. console.log('hello');
  4. };

②如果箭头函数有一个参数,也可以省去包裹参数的括号

  1. //只有一个参数,可以省去参数括号
  2. let fn = name => {
  3. console.log(`hello ${name}!`)
  4. };

③如果箭头函数有多个参数,将参数依次用逗号(,)分隔,包裹在括号中。

  1. let fn = (val1, val2, val3, val4) => {
  2. return [val1, val2, val3, val4];
  3. }

1.4 箭头函数的函数体

①如果箭头函数的函数体只有一句执行代码,简单返回某个变量或者返回一个简单的js表达式,可以省去函数体花括号{ }

  1. //返回某个简单变量val
  2. let f = val => val;
  3. // 等同于
  4. let f = function (val) { return val };
  5.  
  6.  
  7. //返回一个简单的js表达式num1+num2
  8. let sum = (num1, num2) => num1 + num2;
  9. // 等同于
  10. let sum = function(num1, num2) {
  11. return num1 + num2;
  12. };

②如果箭头函数的函数体只有一句代码,返回的不是变量和简单的js表达式,而是一个对象。

  1. //错误写法—花括号会被解释为函数体
  2. let getItem = id => {
  3. id: id,
  4. name: 'gaby'
  5. };
  6. //正确写法
  7. let getItem = id => ({
  8. id: id,
  9. name: 'gaby'
  10. });

③如果箭头函数的函数体只有一条语句且不需要返回值(最常用于回调函数),加上void关键字

  1. let fn = () => void doesNotReturn();

箭头函数用于回调函数,常见简洁

  1. //栗子1
  2. //普通函数
  3. [1, 2, 3].map(function (x) {
  4. return x + x;
  5. });
  6. //ES6箭头函数
  7. [1, 2, 3].map(x => x + x);
  1. //栗子2
  2. //普通函数
  3. var result = [2, 4, 5, 1, 6].sort(function (a, b) {
  4. return a - b;
  5. });
  6. //ES6箭头函数
  7. var result = [2, 4, 5, 1, 6].sort((a, b) => a - b);

二、箭头函数的this指向规则

2.1 箭头函数没有原型prototype,因此箭头函数没有this指向

  1. let fn = () => {
  2. console.log('Hello World !')
  3. };
  4. console.log(fn.prototype); // undefined

2.2 箭头函数不会创建自己的this,如果存在外层第一个普通函数,在定义的时候会继承它的this

箭头函数没有自己的this指向,它会捕获自己定义所处的外层执行环境,并且继承这个this值。箭头函数的this指向在被定义的时候就确定了,之后永远都不会改变。(!永远)

(1)栗子1

  1. var id = 'Global';
  2. //普通函数
  3. function fn1() {
  4. setTimeout(function () {
  5. console.log(this.id)
  6.  
  7. }, 1000);
  8. }
  9. //箭头函数
  10. function fn2() {
  11. setTimeout(() => {
  12. console.log(this.id)
  13. }, 1000);
  14. }
  15.  
  16. fn1.call({
  17. id: 'obj'
  18. });//Global
  19.  
  20. fn2.call({
  21. id: 'obj'
  22. });//obj

解析:普通函数的setTimeout 一秒后执行是在全局作用域,所有this指向window对象,this.id指向了全局变量id,输出Golbal。箭头函数的this在定义的时候就确定了,继承fn2的执行环境中的this,fn2的this指向被call方法改变绑定到obj这个对象

(2)栗子2

  1. var id = 'Global';
  2. var obj = {
  3. id: 'OBJ',
  4. a: function () {
  5. console.log(this.id)
  6. },//方法a普通函数定义
  7. b: () => {
  8. console.log(this.id)
  9. }//方法b用箭头函数定义
  10. };
  11. obj.a();//OBJ
  12. obj.b();//Global

解析:普通函数作为对象的方法调用,this指向所属的对象(谁调用它就指向谁),this.id 就是obj.id;箭头函数继承定义它的执行环境的this,指向window对象,指向全局变量,输出Global。花括号{}无法形成一个单独的执行环境,所有它依然在全局中。

2.3 箭头函数的this是继承而来的永远不会变,call/apply/bind也无法改变

.call()/.apply()/.bind()方法可以用来动态修改函数执行时this的指向,但由于箭头函数的this定义时就已经确定且永远不会改变

  1. var name = 'gaby'
  2. var person = {
  3. name: 'gabrielle',
  4. say: function () {
  5. console.log('say hello', this.name)
  6. }, //普通函数
  7. say2: () => {
  8. console.log('say2 hello', this.name)
  9. } //箭头函数
  10. }
  11. person.say.call({
  12. name: 'Mike'
  13. })
  14. person.say2.call({
  15. name: 'Amy'
  16. })

解析:say的普通函数通过call调用已经改变this指向。say2箭头函数调用call绑定尝试改变this指向,但是仍然打印出外一层普通函数的this指向,window对象的全局变量name。

2.4 箭头函数this指向只能间接修改

间接修改:修改被继承的普通函数的this指向,箭头函数的this指向也会跟着改变。

箭头函数的this指向定义时所在的外层第一个普通函数,跟使用的位置没有关系。

  1. let al
  2. let aObj = {
  3. msg: 'a的this指向'
  4. };
  5. bObj = {
  6. msg: 'b的this指向'
  7. };
  8. a.call(aObj); //将a的this指向aObj
  9. b.call(bObj); //将b普通函数的this指向bObj 箭头函数内部的this指向也会指向bObj
  10.  
  11. function b() {
  12. al();
  13. }
  14.  
  15. function a() {
  16. al = () => {
  17. console.log(this, 'this指向定义时外层第一个普通函数 ')
  18. };
  19. }

2.5 箭头函数外层没有函数,严格模式和非严格模式下它的this都会指向window全局对象

箭头函数的this指向继承自外层第一个普通函数的this,那么如果没有外层函数,它的this指向哪里?

this的绑定规则:非严格模式下,默认绑定的this指向全局对象,严格模式下this指向undefined。

如果箭头函数外层没有普通函数继承,箭头函数在全局作用域下,严格模式和非严格模式下它的this都会指向window(全局对象)

2.6 多层嵌套函数this指向

箭头函数中的this引用的是最近作用域中的this,是向外层作用域中,一层层查找this,直到有this的定义。

2.7 箭头函数不能作为构造函数使用new

构造函数做了什么?

①JS内部首先会先生成一个对象

②再把函数中的this指向该对象

③然后执行构造函数中的语句

④最终返回该对象实例

箭头函数没有自己的this,this继承外层执行环境中的this,且this永远不会改变。new会报错

  1. let fn = (name, age) => {
  2. this.name = name;
  3. this.age = age;
  4. };
  5.  
  6. let person = new fn('gaby', 20)

2.8 箭头函数不支持new.target

ES6新引入的属性,普通函数可以通过new调用,new.target返回该函数的引用。用于确定构造函数是否为new调用。箭头函数并不能作为构造函数使用new,自然也不支持new.targer。

(1)箭头函数的this指向全局对象,在箭头函数中使用箭头函数会报错

  1. let fn = () => {
  2. console.log(new.target)
  3. };
  4. fn()

(2)箭头函数的this指向普通函数,它的new.target就是指向该普通函数的引用

  1. new fn2();
  2.  
  3. function fn2() {
  4. let fn = () => {
  5. console.log(new.target)
  6. };
  7. fn();
  8. }

三、箭头函数的arguments规则

3.1 箭头函数没有自己的arguments

(1)箭头函数处于全局作用域中

箭头函数的this指向全局对象,会报arguments未声明的错。

  1. let fn = name => {
  2. console.log(arguments)
  3. }
  4. let fn2 = function (name) {
  5. console.log(arguments)
  6. }
  7. //fn()
  8. fn2()

  1. let fn = name => {
  2. console.log(arguments)
  3. }
  4. let fn2 = function (name) {
  5. console.log(arguments)
  6. }
  7. fn()
  8. fn2()

解析:普通函数可以打印arguments,箭头函数报错。因为箭头函数处于全局作用域中,在全局作用域没有arguments的定义,箭头函数本身没有arguments,所以报错。

(2)箭头函数的this如果指向普通函数,它的argumens继承于该普通函数

  1. let fn2 = function (name) {
  2. console.log('fn2:', arguments)
  3. let fn = name => {
  4. console.log('fn:', arguments)
  5. }
  6. fn()
  7. }
  8. fn2('gaby')

解析:两个函数打印的argument相同,都是fn2函数的arguments。

总结

箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部(函数)执行环境中的值。

3.2 可以用rest替代,rest参数获取函数的多余参数

rest是ES6的API,用于获取函数不定数量的参数数组。这个API可以用来替代arguments。

(1)基本用法

  1. //形式是...变量名
  2. let fn = (first, ...arr) => {
  3. console.log(first, arr);
  4. }
  5. fn(1, 2, 3, 4);

解析:rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。获取函数的第一个确定的参数,以及用一个变量接收其他剩余函数的实例。

(2)使用注意事项

①rest必须是函数的最后一位参数

  1. let a = (first, ...rest, three) => {
  2. console.log(first, rest, three);
  3. };
  4. a(1, 2, 3, 4);

②函数的length属性不包括rest

(3)rest和arguments函数比较

①箭头函数和普通函数都可以使用rest参数,而arguments只能普通函数用。

②接收参数rest比arguments更加灵活,完全可以自定义。

③rest是一个真正的数组可以使用数组API,arguments只是一个类数组。

3.3 箭头函数不支持重复函数参数的名称

  1. function fn(name, name) {
  2. console.log('fn2:', name)
  3. }
  4. let fn2 = (name, name) => {
  5. console.log('fn:', name)
  6. }
  7. fn('wang', 'gaby')
  8. fn2('wang', 'gaby')

3.4 箭头函数不能用作Generator,不能使用yeild关键字 四、箭头函数的注意事项

①函数箭头一条语句返回对象字面量,需要加括号。

②箭头函数在参数和箭头之间不能换行

③箭头函数的解析顺序相对||靠前

五、箭头函数不适用场景

(1)对象方法,且方法使用了this

对象无法构造单独的作用域

  1. var name = 'gaby'
  2. var person = {
  3. name: 'gabrielle',
  4. say: function () {
  5. console.log('say hello', this.name)
  6. }, //普通函数
  7. say2: () => {
  8. console.log('say2 hello', this.name)
  9. } //箭头函数
  10. }
  11. person.say()
  12. person.say2()

解析:person.say2()方法是一个箭头函数,调用person.say2()的时候this指向全局对象,达不到预期。对象无法构成单独的作用域,定义say2()箭头函数的时候作用域在全局作用域。

(2)回调函数的动态this

  1. var button = document.querySelector('.btn');
  2. button.addEventListener('click', () => {
  3. this.classList.toggle('on');
  4. });

解析:报错。按钮点击是一个回调函数,而箭头函数内部的this指向外一层普通函数的this,在这里就是window,所以报错。改成普通函数就不会报错

六、箭头函数与普通函数简单区别总结

(1)箭头函数语法更简洁清晰,快捷。

(2)箭头函数没有原型prototype,并不会自己创建this,并且this不能被修改,call等都不能修改到。只能间接修改被继承的this

(3)箭头函数的this在定义时就定了,继承外一层的普通函数

(4)如果箭头函数外一层再外一层都不能找到普通函数,在严格和非严格情况下都会指向window对象

(5)箭头函数的this指向全局,使用arguments会报未声明的错误

(6)箭头函数的this指向外一层的普通函数,使用argument继承该普通函数

(7)箭头函数不能构造函数,不能new.target,不能new,没有constructor

(8)箭头函数不支持重复命名参数,普通函数可以重复命名参数

到此这篇关于ES6中箭头函数的文章就介绍到这了,更多相关ES6箭头函数内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号