如果箭头表达式仅仅就是简化了函数的命名,我们为什么要改变原来的习惯而去使用它呢?所以我们需要了解一下箭头函数的特性

箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this,而非执行时。我们通过一个例子来理解:

var o = {
x : ,
func : function() { console.log(this.x) },
test : function() {
setTimeout(function() {
this.func();
}, );
}
}; o.test(); // TypeError : this.func is not a function

上面的代码会出现错误,因为this的指向从o变为了全局(函数调用中的this都是指向全局的)。

我们需要修改上面的代码如下:

var o = {
x : ,
func : function() { console.log(this.x) },
test : function() {
var _this = this;
setTimeout(function() {
_this.func();
}, );
}
}; o.test();

通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了,我们刚才说过,箭头函数的 this 始终指向函数定义时的 this,而非执行时。所以我们将上面的代码修改如下:

var o = {
x : ,
func : function() { console.log(this.x) },
test : function() {
setTimeout(() => { this.func() }, );
}
}; o.test();

这回this就指向o了。

我们还需要注意一点的就是这个this是不会改变指向对象的,我们知道call和apply可以改变this的指向,但是在箭头函数中是无效的。

var x = ,
o = {
x : ,
test : () => this.x
}; o.test(); //
o.test.call(o); // 依然是1

ES6 箭头函数--特性的更多相关文章

  1. ES6 — 箭头函数

    一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...

  2. ES6 箭头函数 this 指向

    ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...

  3. es6箭头函数讲解

    es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...

  4. es6箭头函数 this 指向问题

    es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...

  5. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

  6. ES6 箭头函数(Arrow Functions)

    ES6 箭头函数(Arrow Functions) ES6 可以使用 "箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 具有一个参数的简单函 ...

  7. ES6箭头函数基本用法

    ES6箭头函数基本用法 ``` window.onload = function(){ alert(abc); } //箭头函数 window.onload = ()=>{ alert(&quo ...

  8. ES6 箭头函数this指向问题

    var name = "window"; var person1 = { name: "person1", show1: function() { consol ...

  9. Vue ES6箭头函数使用总结

    Vue ES6箭头函数使用总结   by:授客 QQ:1033553122   箭头函数 ES6允许使用“箭头”(=>)定义函数: 函数不带参数 定义方法:函数名称 = () => 函数体 ...

随机推荐

  1. php 求余

    一,异号 1.函数值符号规律(余数的符号) mod(负,正)=正 mod(正,负)=负 结论:两个整数求余时,其值的符号为除数的符号. 2.取值规律 先将两个整数看作是正数,再作除法运算 ①能整除时, ...

  2. Hive的JDBC

    Hive 的JDBC 包含例子 https://cwiki.apache.org/confluence/display/Hive/HiveClient#HiveClient-JDBC HiveServ ...

  3. springmvc访问项目默认先访问后台再返回首页

    1.spring过滤的url-pattern设置成了/,所以这里随便给个新的后缀 <welcome-file-list> <welcome-file>index.zl</ ...

  4. 在springboot中用redis实现消息队列

    环境依赖 创建一个新的springboot工程,在其pom文件,加入spring-boot-starter-data-redis依赖: <dependency> <groupId&g ...

  5. 微信小程序生成二维码

    微信小程序客户端生成二维码的方法, 请参考这里: https://github.com/demi520/wxapp-qrcode  代码片段如下: const QR = require(". ...

  6. java生成word的几种方案

    http://blog.sina.com.cn/s/blog_a5e968370101crtl.html 1. Jacob是Java-COM Bridge的缩写,它在Java与微软的COM组件之间构建 ...

  7. shiro过滤器解释类

    anon -- org.apache.shiro.web.filter.authc.AnonymousFilter authc -- org.apache.shiro.web.filter.authc ...

  8. C++中类的静态成员与实例成员的区别

    C++中类的静态成员与实例成员的区别 1.有static修饰的成员变量或成员函数称为静态成员. 2.在内存中,类的静态数据成员占有一块特定的内存空间,被该类的所有实例(对象)共享.而同一个类的不同对象 ...

  9. learning ddr write leveling

  10. 关于scratch导出的flash画质很差的问题解决方案

    Scratch的分辨率是480*360,因此把scratch文件转变为flash时,因影像和画质很差,把flash插入到ppt幻灯片后,影像和画质仍然得不到保证.经过不断摸索,这个问题终于得到解决,关 ...