首页  >  文章  >  web前端  >  js中箭头函数的格式&this以及与普通函数的区别讲解

js中箭头函数的格式&this以及与普通函数的区别讲解

不言
不言原创
2018-09-10 17:24:482834浏览

本篇文章给大家带来的内容是关于js中箭头函数的格式&this以及与普通函数的区别讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

箭头函数的格式

// ES5
var selected = allJobs.filter(function (job) {
  return job.isSelected();
});

// ES6 箭头函数
var selected = allJobs.filter(job => job.isSelected());

// ES6
$("#confetti-btn").click(event => {
  playTrumpet();
  fireConfettiCannon();
});

1、要编写具有多个参数(或没有参数或默认值或解构参数)的函数,在参数列表周围添加括号。
2、带有块体的箭头函数不会自动返回值。请使用return声明。
3、使用箭头函数创建普通对象时有一点需要注意。始终将对象括在括号中:

this指向

箭头函数没有自己的this值。this箭头函数内部的值始终从封闭范围继承。

对于将使用object.method()语法调用的方法,请使用非箭头函数。这些函数将从调用者那里获得有意义的 this值。其他所有内容都使用箭头功能。

{
  ...
  addAll: function addAll(pieces) {
    var self = this;
    _.each(pieces, function (piece) {
      self.add(piece);
    });
  },
  ...
}

// ES6
{
  ...
  addAll: function addAll(pieces) {
    _.each(pieces, piece => this.add(piece));
  },
  ...
}

箭头函数与普通函数得区别

箭头和非箭头函数之间还有一个小的区别:箭头函数也没有自己的arguments对象。

普通函数:
1、函数作为全局函数被调用时,this指向全局对象
2、函数作为对象中的方法被调用时,this指向该对象
3、函数作为构造函数的时候,this指向构造函数new出来的新对象
4、还可以通过call,apply,bind改变this的指向

1、箭头函数没有this,函数内部的this来自于父级最近的非箭头函数,并且不能改变this的指向。
2、箭头函数没有super
3、箭头函数没有arguments
4、箭头函数没有new.target绑定。
5、不能使用new
6、没有原型
7、不支持重复的命名参数。

相关推荐:

ES6箭头函数中的this问题解答

JavaScript箭头arrow函数详解

以上是js中箭头函数的格式&this以及与普通函数的区别讲解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn