我们知道在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. webdriver js点击无法点击的元素

    原文地址https://blog.csdn.net/galen2016/article/details/56847545 [WebDriver]调用JavaScript 一.WebDriver 提供了 ...

  2. The adidas NMD Singapore is one of the brands top selling

    Like pointed out, we've two adidas NMD Singapore releases using the first arriving Blue and Black as ...

  3. 禁止复制操作 --《C++必知必会》条款32

    class NoCopy{ private: //声明为私有的,则外部不可访问,即:不可复制 NoCopy(const NoCopy & );//复制构造函数 NoCopy & ope ...

  4. Linux 中的 Service

    参考: cnblogs.com/xiaofan21 - linux service和daemon cnblogs.com/xuange306 - linux service命令常见使用方法 cnblo ...

  5. 史上最强网推案例,没有之一【ZW团队实战经典】

    ZW团队认为,互联网本质只有两个字:颠覆. ZW网络推广团队,是国内首个教父级网络营销团队,自1997年以来,先后参与操盘多个重大互联网项目,服务过超过150家国际500强客户,是微软公司首家官方认证 ...

  6. Mac下将C程序创建为动态链接库再由另一个C程序调用

    写C的时候需要调用之前的一个C程序,想用动态链接库的方式.Mac下的动态链接库是dylib,与Linux下的.os或Windows下的.dll不同.由于之前没有接触过,所以翻了大量的博客,然而在编译过 ...

  7. STM32组合设备实现USB转双串口

    USB转双串口,核心技术就在于组合设备(USB Composite)的实现,组合设备的实现,其核心技术在于描述符的实现,下面我们先给出描述符:设备描述符 [C] 纯文本查看 复制代码 ? 00001 ...

  8. A8几种内存

    1.SD卡(程序可写入,当成最次硬盘来用) 2.nandflash(程序可写入,当成一般硬盘来用) 3.DDR2(当A8板子的内存条来用)

  9. LA 3942 背单词

    https://vjudge.net/problem/UVALive-3942 题意: 给出一个由S个不同单词组成的字典和一个长字符串.把这个字符串分解成若干个单词的连接,有多少种方法?比如,有4个单 ...

  10. mongo 增删改查

    1. use foobar2. show dbs3. show collections4. db.system.indexes.find()5. db.persons.find()6. db.pers ...