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 ...
随机推荐
- LeetCode-Sort List[AC源码]
package com.lw.leet4; /** * @ClassName:Solution * @Description: * Sort List * Sort a linked list in ...
- poi对word的操作(总结)
★★★ POI在读写word docx文件时是通过xwpf模块来进行的,其核心是XWPFDocument. 1.正文段落:一个文档包含多个段落Paragraph,一个段落包含多个Runs,一个R ...
- [linux]codeblocks开发mysql配置
1.在安装好mysql后,可以应该安装必要的库文件 $sudo apt-get install libmysqlclient-dev 2.将codeblocks与mysql的库文件连接起来 在code ...
- javascript操作对象的方法
with 确定某个对象的作用区域,在with代码段内的次对象的属性或方法可以直接使用. 例: //比如stu中有name,age属性和walk方法 with(stu) { alert(name+&qu ...
- How to reset XiaoMi bluetooth headphone Youth edition.
To reset the speaker 1. Long press the phone call button to shut off the speaker 2. Connect the char ...
- c++树,知道前序和中序求后序遍历
经常有面试题就是知道一棵树的前序遍历和中序遍历让你写出后序遍历,这个慢慢画是能画出来的,但是要很快的弄出来还是要懂原理. 首先说一下三种遍历:所谓的前序后序和中序都是遍历时遍历根节点的顺序.子树的话依 ...
- spring3-spring的事务管理机制
1. Spring的事务管理机制 Spring事务管理高层抽象主要包括3个接口,Spring的事务主要是由他们共同完成的: PlatformTransactionManager:事务管理器—主要用于平 ...
- Go语言 8 反射
文章由作者马志国在博客园的原创,若转载请于明显处标记出处:http://www.cnblogs.com/mazg/ Go学习群:415660935 8.1概念和作用 Reflection(反射)在计算 ...
- 大图片上传(ImageIO,注意有的图片不能上传时因为他是tiff格式)
一下是必要的: 1.enctype="multipart/form-data" 2. //不要使用myeclipse自动生成的get.set方法(struts2中的用法) publ ...
- 可能是是最全的Springboot基础视频分享,告别无视频可学
一头扎进SpringBoot视频教程 SpringBoot入门 2017年-张志君老师-SpringBoot(新增) 欢迎关注我的微信公众号:"Java面试通关手册" 回复关键字& ...