es6箭头函数中this
普通函数:
$scope.$on('$stateChangeSuccess',function(){this.list = this.getList();});
箭头函数:
$scope.$on('$stateChangeSuccess',()=>{this.list = this.getList();});
上面的代码是在es6中class的constructor体中的语句。函数的作用是调用该模块中的getList函数,将函数的返回值赋值给class中的list值。从写法上来看两种不同的写法表达的意思是一样的。
但是由于他们中调用了this这个特别的对象,其执行结果有着很大的不同:
普通函数:报错(找不到getList方法)
箭头函数:执行正常。
查找原因:箭头函数和普通函数之间有一个重要的差别:箭头函数没有自己的this值,其this值是继承外域的this值。
分析:函数function的本质也是一个对象。类似js中的Array,object,Function也是一个内部对象。js对运行function的时候也是将其当做一个对象来处理。
如果对面向对象稍有了解的话,我们知道对象中的this是用来获取对象本身的属性或者方法的。在上面的例子中,普通函数体里的this对象取值是function里的属性或者方法,由于普通函数里并未定义getList方法,所以其会报错undefined。
而在箭头函数中,由于其自身没有this属性,所以函数体里面的this均是从外域获取的属性或者方法,因此是正确的。
所以箭头函数不仅仅是从外观上简化了函数的写法,更解决了普通函数中this的hack问题。
http://www.cnblogs.com/yuzhongwusan/archive/2012/04/09/2438569.html 可以访问该篇博客了解function的详细
es6箭头函数中this的更多相关文章
- ES6 箭头函数中的 this?你可能想多了(翻译)
箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...
- 深入理解ES6箭头函数中的this
简要介绍:箭头函数中的this,指向与一般function定义的函数不同,比较容易绕晕,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定. 1.何为定义时 ...
- es6箭头函数 this 指向问题
es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...
- ES6之箭头函数中的this
在讲箭头函数中的this之前我们先介绍一下普通函数中的this. 普通函数中的this: (1)this指向它的直接调用者 (2)默认的,非严格模式下,没找到直接调用者则指向window ( ...
- es6 箭头函数(arrow function) 学习笔记
箭头函数有两个好处. 1.他们比传统函数表达式简洁. const arr = [1, 2, 3]; const squares = arr.map(x => x * x); // 传统函数表达式 ...
- es6箭头函数讲解
es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...
- js中的this和箭头函数中的this
一.ES6 允许使用"箭头"(=>)定义函数. // var f = v => v;// 上面的箭头函数等同于: // var f = function(v) {// ...
- ES6 — 箭头函数
一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
随机推荐
- windows服务的创建、安装、调试全过程及引发的后续学习
前几天做项目的时候需要用到window服务,研究一段时间,算是掌握了最基本的使用方法吧,现总结如下: 引言:在项目过程中碰到一个问题:需要不断的扫描一个大型数据库表,并获取dataset,以便做后续的 ...
- Vue 双层嵌套
这种的需要双层嵌套. 代码: <table id="ict-table" class="ict-table ict-report-table blue-theme& ...
- python_os
1. 基本功能的介绍 os模块包含普通的操作系统的功能 2. 常用的变量 (1)os.name 获取正在使用的平台, Windows 返回 nt, Linux或者Unix 返回 posix 3. 常用 ...
- cocos2dx 3.x(实现帧动画(人物动画,跑马灯效果)的几种方法)
//创建一个跑酷的精灵 auto sprite = Sprite::create("1.png"); //设置精灵的坐标 sprite->setPosition(Ve ...
- Struts2(二):工作原理
struts可查看源码:https://github.com/apache/struts 在学习struts2之前,我先看了一些比较早版本对struts2的工作原理相关的介绍,顺便抄写过来,用来帮助自 ...
- MyBatis 注解使用动态SQL
使用MyBatis很长时间了,一直使用的是XML配置的 SQL,刚好在上一个项目中尝试使用注解方式开发,主要是由于XML配置过于繁琐,注解可以直接写在Mapper函数上,更加的方便一些. 在注解上不能 ...
- 使用 robotframework 自动化测试系列 一 -----简介
robotframework 是自动化测试框架. Robot Framework是一款python编写的功能自动化测试框架.具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可 ...
- svg学习(六)line
<line> 标签用来创建线条. <?xml version="1.0" standalone="no"?> <!DOCTYPE ...
- 【Selenium】1.介绍 Selenium
本文供学习交流之用,没有商业用途,没有盈利. 完全是我自己为督促自己学习而翻译的.翻译的不好,见谅.来源于:http://www.guru99.com/introduction-to-selenium ...
- 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题
项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...