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

时间: 2017-11-07阅读: 1187标签: 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.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

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

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更严谨和规范。

es6数据变更同步到视图层

数据变更同步到视图层有一个很重要的东西就是Proxy,Proxy的作用就是可以隐藏真正的对象,而用户去修改它的代理对象.Proxy可以监听数据的变化,例如

ES6、7、8常用新特性总结(超实用)

ES6常用新特性:let && const、解构赋值、箭头函数、 ...操作符、 iterable类型、类、ES7常用新特性:Array.prototype.includes、Exponentiation Operator(求幂运算)、Object.values/Object.entries

对ES6的yield示例分析

这里主要是对yield关键字的,yield实际上可以看作是一种新的中断机制,大家都知道javascript函数执行是顺序的,中途没有暂停,等待消息只能通过回调或者settimeout等延迟检查来完成。

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

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

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