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 ...
随机推荐
- redis服务启动脚本
/etc/rc.d/init.d/redis #!/bin/sh# chkconfig: 2345 80 90 # description: Start and Stop redis REDISPOR ...
- ASP.Net Cache(缓存)—ASP.NET细枝末节(2)
概述 1.意义 把数据放到Cache中,在指定的时间内,可以直接从Cache中获取,避免对数据库等的压力. 2.做法 设置: HttpRuntime.Cache.Insert(CacheKey, ob ...
- 原创:HTML 头像截取上传 JS+PHP 整合包~
关于: 关于头像上传这个东西,网上一搜乱七八糟的一堆然而很少很少有自己中意的插件一怒之下就自己写一个... 用法: <!DOCTYPE html> <html lang=" ...
- 【leetcode 简单】第十一题 搜索插入位置
给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元素. 示例 1: 输入: [1,3,5,6], 5 输 ...
- 127.0.0.1、localhost、0.0.0.0的区别
在开发web应用的测试环境中,如果希望同一个局域网的同事通过内网IP访问自己的应用,则需要把web服务监听的ip地址改为0.0.0.0.为什么用127.0.0.1不行,而用0.0.0.0就可以呢? f ...
- TypeScript在node项目中的实践
TypeScript在node项目中的实践 TypeScript可以理解为是JavaScript的一个超集,也就是说涵盖了所有JavaScript的功能,并在之上有着自己独特的语法.最近的一个新项目开 ...
- Class类和ClassLoader类的简单介绍
反射机制中的Class Class内部到底有什么呢?看下图! 代码: Class cls=Person.class; 1.Class类: 1. 对象照镜子后可以得到的信息:某个类的数据成员名,方法和构 ...
- select count(*) from user注入
先来看一条sql语句: mysql; +------+----------+----------+------------+ | id | username | password | flag | + ...
- JavaScript实现水平进度条拖拽效果
<html> <head> <meta charset="UTF-8"> <title>Document</title> ...
- PHP 结合实例认识 Socket
一.简介 (本部分参考自 揭开Socket的神秘面纱 - 源码工作室) 请结合下图 Socket 抽象层的位置来理解.Socket 是应用层和 TCP/IP 协议族进行通信的中间软件抽象层,是一组接口 ...