我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数。类似于下面的写法: 
let test1=() => “abc”; 
let test2=() => { return “abc”}; 
let sum=(a,b) => a+b;

比如上面的3个ES6的箭头函数的写完,如果用ES5就像下面的写完一样。 
其实其等同于下面的ES5的写法:

function test1() {
return "abc"
} function test2(){
return "abc"
} function sum(){
return a+b;
}

那为什么在ES6中引入了箭头函数呢? 最主要的目的就是解决this指针的问题。 
我们知道在ES6中,我们可以创建一个class,如果我们默认在其里面加入一个函数的话,其必须在调用的时候,必须绑定this指针,否则不能访问当前类的实例里面的属性。下面举一个具体的例子,为什么其能解决this指针的问题。 
比如下面一个一个Person类:

function Person() {
//Person()构造器定义了`this`指针,指向了其实例本身
this.age = 0; setInterval(function growUp() {
//在non-strict模式下,growUp()方法定义了‘this’作为一个全局的对象。其
//不同于Person()构造器生成的‘this’指针
this.age++;
}, 1000);
}
var p = new Person();

在ECMAScript 3/5中, 这个this的指针问题可以通过显示的制定this到一个变量,从而把Person()构造器生成的实例this指针,引入到函数中,具体写完如下:

function Person() {
var that = this;
that.age = 0; setInterval(function growUp() {
// The callback refers to the `that` variable of which
// the value is the expected object.
//这个回调函数引用了`that`变量,其值就代表的是当前对象,而不是一个全局的 //一个this对象
that.age++;
}, 1000);
}

这种写完有点啰嗦和繁杂,那么有没有更为简洁的方式呢?直到ES6出现了箭头函数,才彻底的解决这个问题。下面让我们看看ES6的箭头函数如何写的。

function Person(){
this.age = 0; setInterval(() => {
// |this| 自动的指向当前Person的构造器生成的Person实例
//是不是感觉很简洁
this.age++;
}, 1000);
} var p = new Person();

ES6中箭头函数的作用的更多相关文章

  1. Es6中箭头函数与普通函数的区别

    Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...

  2. ES6中箭头函数与普通函数this的区别

    普通函数中的this: 1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直 ...

  3. es6中箭头函数 注意点

    var aaabbb = 'kkkooo' setTimeout(()=>{ var aaaa = 'kkkk'; console.log(this) },1000); 因为据我了解,箭头函数指 ...

  4. es6的箭头函数和es5的function函数区别

    一.es6的箭头函数es6箭头函数内部没有this,使用时会上朔寻找最近的this不可以做构造函数,不能使用new命令,因为没有this函数体内没有arguments,可以使用rest参数代替不能用y ...

  5. php中session_start()函数的作用

    php中session_start()函数的作用 用$_SESION之前必须要session_start()----其中之一的功能,$_SESSION是服务器端的cookie,相当一个大数组(浏览器关 ...

  6. layui轮播中箭头不起作用问题

    layui轮播中箭头不起作用问题 layui轮播插件在使用中发现箭头不起作用其他都合适,是什么原因造成的呢?发现单独提出layui中的demo是合适的,通过仔细慢慢的寻找,发现layui.use('c ...

  7. C++中虚函数的作用和虚函数的工作原理

    1 C++中虚函数的作用和多态 虚函数: 实现类的多态性 关键字:虚函数:虚函数的作用:多态性:多态公有继承:动态联编 C++中的虚函数的作用主要是实现了多态的机制.基类定义虚函数,子类可以重写该函数 ...

  8. ES6之箭头函数中的this

    在讲箭头函数中的this之前我们先介绍一下普通函数中的this.      普通函数中的this: (1)this指向它的直接调用者 (2)默认的,非严格模式下,没找到直接调用者则指向window ( ...

  9. ES6笔记② 箭头函数

    特性介绍 箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. //ES5 function fun(x,y){ return x+y; } console.log(fun ...

随机推荐

  1. 如何确定Hadoop中map和reduce的个数--map和reduce数量之间的关系是什么?

    一般情况下,在输入源是文件的时候,一个task的map数量由splitSize来决定的,那么splitSize是由以下几个来决定的 goalSize = totalSize / mapred.map. ...

  2. UVA大模拟代码(白书训练计划1)UVA 401,10010,10361,537,409,10878,10815,644,10115,424,10106,465,10494

    白书一:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=64609#overview 注意UVA没有PE之类的,如果PE了显示WA. UVA ...

  3. echarts 饼状图 改变折线长度

    $(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...

  4. myeclips破解

    MyEclipse官方安装文件,下载地址 http://www.jb51.net/softs/150886.html破解补丁http://www.jb51.net/softs/150887.html ...

  5. myeclipse安装jadclipse(反编译工具)

    我是myeclipse5. 的IDE工具.为了能反编译class文件,上网搜索了很多资料,终于找到一下的一段资料: .将jad.exe 复制到myeclipse安装目录的jre/bin目录下, 如:C ...

  6. 微信小程序中公用内容

    微信小程序中各个页面调用公用的js 在util.js文件中 // 跳转哪里 function go(where) { wx.reLaunch({ url: where, }) } // 将方法暴露出去 ...

  7. 反射_IsDefined判断方法上有自定义的标签

    在.NET 4.0(当然也包括4.0以前的版本)下,用反射判断某个方法是否运用了自定义Attribute时,可以通过调用MethodInfo的IsDefined()方法进行确认.当然,IsDefine ...

  8. mongodb的分片

    分片是把大型数据集合进行分区成更小的可管理的片的过程. 副本集的每一个成员(仲裁节点除外)都一份数据的完整拷贝! 分片的目的:在节省硬件成本的基础上,提高系统的整体性能.但是却增加了管理和性能的开销. ...

  9. linux第七章读书笔记

    Vim编辑器 Vim 仅仅通过键盘来在插入和执行命令等多种模式之间切换.这使得Vim可以不用进行菜单或者鼠标操作,并且最小化组合键的操作,对文字录入员或者程序员可以大大增强速度和效率. CHAPTER ...

  10. 在Ubuntu 18.04上安装Tensorflow

    我们将经历几个阶段,安装cuda-9.0,cudnn和tensorflow cpu以及tensorflow gpu版本.最后我们将用cuda-9.0安装pytorch.在MARVEl电影中黑寡妇的“我 ...