js中箭头函数和普通函数this的区别
最近在学习angularJs的时候由于里面涉及到了箭头函数,箭头函数除了声明上有点区别以外,和普通函数最主要的区别还是在this的问题上。
Js中函数中嵌套的函数this不会 “继承”。比如说以下代码:
var o = {
name:'xwt',
age:13
}
function outer(){
console.log(this);//输出{name:'xwt,age:13}
!function inner(){
console.log(this);//输出window
}();
}
outer.call(o);
上面代码我们理想的输出是应该都是o,但是很遗憾,inner中的this已经是指向全局的window了。也可以这么理解,”this“关键字通常指当前正在执行的函数所在的对象,然而,如果函数并没有在对象上被调用,比如在内部函数中,”this“就被设置为全局对象(window)。以前我们想在inner中使用outer中的this,只能在outer中定义一个变量去保存this,一般是 var that = this;然后在inner中使用that来代替this。
用function定义的函数的this是调用的时候去获取的,是不固定的。而箭头函数中的this是箭头函数定义的时候就定义的,并且在函数销毁之前的this都不会随之改变。箭头函数的this
指的就是函数声明时候作用域的this。用一下代码来说明区别:
name = "cm";
age = 15;
var o = {
name:'xwt',
age:13,
sayName:()=>console.log(this.name),
sayAge:function(){
console.log(this.age);
}
};
o.sayName();//输出cm
o.sayAge();//输出13
这里输出的13是没有任何问题的,但是这里为什么是输出cm而不是xwt呢?这个回答可以用上面的原理来解答。因为函数sayAge是在声明对象o的时候声明的。此时o是在全局中声明的
一个对象,所有这里sayName绑定的this就是全局的this。那么我们可以改变sayName的this吗?答案是当然可以。我们只要创建一个函数,然后在函数中声明o,然后通过call或者apply去改变
函数的this,那么声明出来的sayName的this就是绑定了call或者apply传进来的对象了。
function aa(){
var o = {
name:'xwt',
age:13,
sayName:()=>console.log(this.name),
sayAge:function(){
console.log(this.age);
}
};
o.sayName();//输出bb
o.sayAge();//输出13
}
var bb = {
name:'bb',
age:111
}
aa.call(bb);
如上面的代码是通过call改变声明了o对象时候的作用域中的this,所以sayName绑定的this就是aa函数中的this,也就是bb。所有sayName输出的就是'bb';
这里差不多就解释完了箭头函数中this和普通function中this的区别了。还有如果这里有朋友不是在游览器上运行,而是用node.js来运行的话,node里面的全局指的是global,但是this
不是指向global的,他是指向module.exports(默认也是exports指向的对象)所指向的对象的。所以exports.name = 'xwt'也可以用this.name = 'xwt'来代替。这也是题外话了···
参考:http://note.youdao.com/noteshare?id=893741a0f08ce95e930c48265a5a728e&sub=AB0F9A256AD7431699C331F45514A925
js中箭头函数和普通函数this的区别的更多相关文章
- JS中的日期内置函数
用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45')); ...
- js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)
js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- js中的text(),html() ,val()的区别
js中的text(),html() ,val()的区别 text(),html() ,val()三个方法用于html元素的存值和取值,但是他们各有特点,text()用于html元素文本内容的存取,ht ...
- => js 中箭头函数使用总结
箭头函数感性认识 箭头函数 是在es6 中添加的一种规范 x => x * x 相当于 function(x){return x*x} 箭头函数相当于 匿名函数, 简化了函数的定义. 语言的发展 ...
- js中箭头函数 及 针对箭头函数this指向问题引出的单体模式
ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数, ...
- JS中的substring和substr函数的区别
1. 在JS中, 函数声明: stringObject.substring(start,stop) start是在原字符串检索的开始位置,stop是检索的终止位置,返回结果中不包括stop所指字符. ...
- JS中的循环嵌套 BOM函数
[嵌套循环特点] 外层循环转一次,内层循环转一圈 外层循环控制行数,内层循环控制每行元素个数 [做 ...
- JS中关于引用类型数据及函数的参数传递
(JavaScript 中,函数的参数传递方式都是按值传递,没有按引用传递的参数) 一.数据类型 在 javascript 中数据类型可以分为两类: 基本类型值 primitive type,比如Un ...
随机推荐
- Laravel是怎么实现autoload的?
用了一阵Laravel后发现很少有include和require,觉得有点奇怪,思考Laravel是怎么完成文件导入的. 其实Laravel依旧还是用include或者require的,只是都写在一个 ...
- Digging(DP)
ZOJ Problem Set - 3689 Digging Time Limit: 2 Seconds Memory Limit: 65536 KB When it comes to th ...
- .NET面试题系列(一)基本概念
什么是CLR CLR常用简写词语,CLR是公共语言运行库(Common Language Runtime)和Java虚拟机一样也是一个运行时环境,它负责资源管理(内存分配和垃圾收集等),并保证应用和底 ...
- Centos7环境下消息队列之ActiveMQ实战
Activemq介绍 对于消息的传递有两种类型: 一种是点对点的,即一个生产者和一个消费者一一对应: 另一种是发布/订阅模式,即一个生产者产生消息并进行发送后,可以由多个消费者进行接收. JMS定义了 ...
- 《JavaScript 实战》:JavaScript 实现拖拽缩放效果
拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小,例如选框效果.这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放. 跟拖放效果一样,程 ...
- jquery 事件对象属性小结
使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQue ...
- 【Hadoop】用web查看hadoop运行状态
博文已转移,请借一步说话.http://www.daniubiji.cn/archives/621 上一篇文章(去博客园),我们安装完hadoop,下面我们从视觉上看看hadoop怎么玩的. 我们可以 ...
- rxjs自定义operator
rxjs自定义operator
- 快速入门react
安装react npm install creat-react-app -g这里直接安装react的一个脚手架,里面包含了要用到的许多东西,帮助快速入门react 创建新项目 create-react ...
- 【leetcode 简单】第三十九题 Excel表列名称
给定一个正整数,返回它在 Excel 表中相对应的列名称. 例如, 1 -> A 2 -> B 3 -> C ... 26 -> Z 27 -> AA 28 -> ...