es6 箭头函数的使用总结,带你深入理解js中的箭头函数

时间: 2017-11-07阅读: 1365标签: es6

箭头函数是ES6中非常重要的性特性。它最显著的作用就是:更简短的函数,并且不绑定this,arguments等属性。它最适合用于非方法函数,并且它们不能用作构造函数。

1.箭头函数的短语法,当单条语句返回时,可省略{}和return
var f = v => v;
// 等同于
var f = function(v) {
    return v;
}

var f = () => 5;
// 等同于
var f = function() {
    return 5;
}

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
    return num1 + num2;
}

​注意的是:上面的写法都是匿名函数来使用的,因此:箭头函数作为匿名函数,是不能作为构造函数的,不能使用new


2.不绑定this

在箭头函数出现之前,每个新定义的函数都有它自己的 this值(在构造函数的情况下是一个新对象,在严格模式的函数调用中为 undefined,如果该函数被称为“对象方法”则为基础对象等)。This被证明是令人厌烦的面向对象风格的编程。箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值。例如:

function fn(){
  this.num = 0;
  let s=setInterval(() => {
    if(this.num<10){
    	this.num++;
    }else{
    	console.log(this.num);
    	clearInterval(s);
    }
  }, 1000);
}
var f=new fn();//10秒后输出10

上面的例子可以看出,箭头功能不会创建自己的this;它使用封闭执行上下文的this值。setInterval的函数内的this与封闭函数中的this值相同。如果在一个对象中使用的时候,箭头函数中的this就为对象默认环境中的window对象了。例如:

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); //undefined
    console.log(this); //window
  },
  c:function() {
    console.log(this.a); //10
    console.log(this); //obj{...}
  }
}
obj.b(); 
obj.c();


3.使用call()和apply()调用

由于 this 已经在词法层面完成了绑定,通过 call() 或 apply() 方法调用一个函数时,只是传入了参数而已,对 this 并没有什么影响。

var adder = {
  base : 1,
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },
  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };       
    return f.call(b, a);
  }
};
console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2(而不是3 )



4.不绑定arguments

箭头函数不绑定arguments,取而代之用rest参数…解决,例如:

var fn = (a)=>{
  console.log(arguments); 
}
fn(1)
//ReferenceError: arguments is not defined

我们应该用rest参数的形式

var fn = (...a)=>{ //...a即为rest参数
  console.log(a);
}
fn(2)//[2]


5.使用prototype属性

箭头函数没有原型属性

var fn = () => {};
console.log(fn.prototype); // undefined


说明:

1.箭头函数的this永远指向其上下文的 this。

2.箭头函数不能使用new来为作为构造器。

3.箭头函数没有prototype属性。

4.箭头函数不绑定自己的this,arguments,super或 new.target。

5.箭头函数不能当做Generator(生成器)函数。

6.不能使用yield关键字(除非是嵌套在允许使用的函数内)。  

7.箭头函数不能换行。


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/60

ES6 Iterators

本文旨在分析理解 Iterators。 Iterators 是 JS中的新方法,可以用来循环任意集合。 在ES6中登场的Iterators。因其可被广泛使用,并且已在多处场景派上用场,

24个常用的es6方法

本文主要介绍 24 中 es6 方法,这些方法都挺实用的,本本请记好,时不时翻出来看看。如何检查元素是否具有指定的类?页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。

javascript es6是什么?

ES6就是ECMAScript6是新版本JavaScript语言的标准。已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。ECMAScript6在保证向下兼容的前提下

ES6 Promise用法详解

Promise是一个构造函数,接受一个参数(Function),并且该参数接受两个参数resolve和reject(分别表示异步操作执行成功后的回调函数、执行失败后的回调函数)

commonjs 与 es6相关Module语法的区别

export 在接口名字与模块内部的变量之间建立了一一对应的关系,export输出的接口; export的写法,除了像上面这样,还有另外一种。export命令除了输出变量,还可以输出函数或类(class)。

ES6箭头函数(Arrow Functions)

箭头函数中的 this 指向的是定义时的对象,而不是使用时的对象;由于 箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数,他们的第一个参数会被忽略

es6 class

构造函数的prototype属性,在 ES6 的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype属性上面。

es6之迭代器

迭代器是被设计专用于迭代的对象,带有特定接口。所有的迭代器对象都拥有 next() 方法,会返回一个结果对象。该结果对象有两个属性:对应下一个值的 value ,以及一个布尔类型的 done

ES6 - let、const、var的区别

为了使JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言,ECMAScript 6.0(简称ES6)在标准中添加了很多新的特性。我们将用几篇文章总结一下ES6标准中一些常用的新特性。本片文章主要讲解ES6中的let、const命令,并区分其与var命令的区别。

ES6新的变量声明方式

在ES6之前,JavaScript是没有块级作用域的,如果在块内使用var声明一个变量,它在代码块外面仍旧是可见的。ES6规范给开发者带来了块级作用域,let和const都添加了块级作用域,使得JS更严谨和规范。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广