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 ...
随机推荐
- 《用Apache HttpClient实现URL重定向》
作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 很多网站都使用了URL重定向技术,把一个原始请求从一个位置路由到另一个位置.原因可能是多方面的,比如域名转 ...
- OpenCV---其他形态学操作
一:顶帽实现(原图像与开操作图像的差值) import cv2 as cv import numpy as np def top_hat_demo(image): gray = cv.cvtColor ...
- JS函数大全 莫名其妙找到的
1 .document.write(""); 输出语句 2 .JS中的注释为// 3 .传统的HTML文档顺序是:document->html->(head,body) ...
- == 和 equals,equals 与 hashcode,HashSet 和 HashMap,HashMap 和 Hashtable
一:== 和 equals == 比较引用的地址equals 比较引用的内容 (Object 类本身除外) String obj1 = new String("xyz"); Str ...
- MappedByteBuffer以及ByteBufer的底层原理
最近在用java中的ByteBuffer,一直不明所以,尤其是对MappedByteBuffer使用的内存映射这个概念云里雾里. 于是首先补了物理内存.虚拟内存.页面文件.交换区的只是:小科普——物理 ...
- DevExpress 常用命令包括导出-打印-打印预览等
3.表格打印也是最常见的,打印代码如下: PrintingSystem ps = null; DevExpress.XtraPrinting.PrintableComponentLink link = ...
- 【CodeForces】901 B. GCD of Polynomials
[题目]B. GCD of Polynomials [题意]给定n,要求两个最高次项不超过n的多项式(第一个>第二个),使得到它们GCD的辗转次数为n.n<=150. [算法]构造 [题解 ...
- 基本控件文档-UITextField属性---iOS-Apple苹果官方文档翻译
本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 //转载请注明出处--本文永久链接:http://www.cnblogs.com/Ch ...
- http://www.cnblogs.com/kkdn/
/*** PHP保留两位小数的几种方法* @link http://www.phpddt.com*/$num = 10.4567; //第一种:利用round()对浮点数进行四舍五入echo roun ...
- 【NOIP2013提高组T3】加分二叉树
题目描述 设一个n个节点的二叉树tree的中序遍历为(1,2,3,…,n),其中数字1,2,3,…,n为节点编号.每个节点都有一个分数(均为正整数),记第i个节点的分数为di,tree及它的每个子树都 ...