ES6 箭头函数--特性
如果箭头表达式仅仅就是简化了函数的命名,我们为什么要改变原来的习惯而去使用它呢?所以我们需要了解一下箭头函数的特性。
箭头函数内部没有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 箭头函数--特性的更多相关文章
- ES6 — 箭头函数
一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...
- ES6 箭头函数 this 指向
ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...
- es6箭头函数讲解
es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...
- es6箭头函数 this 指向问题
es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
- ES6 箭头函数(Arrow Functions)
ES6 箭头函数(Arrow Functions) ES6 可以使用 "箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 具有一个参数的简单函 ...
- ES6箭头函数基本用法
ES6箭头函数基本用法 ``` window.onload = function(){ alert(abc); } //箭头函数 window.onload = ()=>{ alert(&quo ...
- ES6 箭头函数this指向问题
var name = "window"; var person1 = { name: "person1", show1: function() { consol ...
- Vue ES6箭头函数使用总结
Vue ES6箭头函数使用总结 by:授客 QQ:1033553122 箭头函数 ES6允许使用“箭头”(=>)定义函数: 函数不带参数 定义方法:函数名称 = () => 函数体 ...
随机推荐
- c++中利用localtime_s函数格式化输出当地日期与时间
Visual C++ 6.0开发环境中显示当地日期与时间主要通过localtime()函数来实现,该函数的原型在time.h头文件中,其语法格式如下: struct tm *localtime(xon ...
- hdu-6406-dp+ST表
Taotao Picks Apples Time Limit: 2000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Ot ...
- Zookeeper浏览器工具和Eclipse插件
公司很多产品会使用zookeeper,比如Meta消息中间件,在测试的过程中,我们经常需要查询zookeeper里面的信息来精确定位问题.目前项目中有开发团队自己写的浏览器node-zk-browse ...
- Node.js + Express 接口请求(GET、POST、PUT)事例
路由 路由是指应用程序的端点(URI)如何响应客户端请求.有关路由的介绍,请参阅基本路由. 您可以使用Express app对象的方法定义路由,这些方法对应于HTTP方法; 例如,app.get()处 ...
- (Nginx反向代理+NFS共享网页根目录)自动部署及可用性检测
1.nginx反向代理安装配置 #!/usr/bin/bash if [ -e /etc/nginx/nginx.conf ] then echo 'Already installed' exit e ...
- Android应用启动时Activity被创建两次
项目需要使用到播放器,用开源的ijkplayer播放器改装. 但是在调试过程中Activity的OnCreate()被调用两次,调试时直接连接手机调试,有时候又不一定是两次. 后来偶尔看到一句话 “当 ...
- JavaScript 上万条数据 导出Excel文件 页面卡死
最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var ...
- PyCharm+Scrapy爬取安居客楼盘信息
一.说明 1.1 开发环境说明 开发环境--PyCharm 爬虫框架--Scrapy 开发语言--Python 3.6 安装第三方库--Scrapy.pymysql.matplotlib 数据库--M ...
- zabbix3.4.7触发器表达式详解
zabbix触发器表达式详解 概述:触发器中的表达式使用很灵活,我们可以创建一个复杂的逻辑测试监控,触发器表达式形式如下: {<server>:<key>.<functi ...
- Spring boot返回JSON类型响应及Content-Type设置
一.背景 服务器软件用Spring boot开发,API调用的响应消息格式为JSON. 对端调用接口后无法解析响应. 抓包看Response的Body部分确实是正确的JSON格式字符串. 二.问题分析 ...