【转】javascript运行机制之this详解
this是面向对象语言中一个重要的关键字，理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要。而javascript的this又有区别于Java、C#等纯面向对象的语言，这使得this更加扑朔迷离，让人迷惑。
this使用到的情况：
1. 纯函数
2. 对象方法调用
3. 使用new调用构造函数
4. 内部函数
5. 使用call / apply
6.事件绑定
---------------------------------------------------------------
1. 纯函数
var name = 'this is window'; //定义window的name属性
function getName(){
console.log(this); //控制台输出: Window //this指向的是全局对象--window对象
console.log(this.name); //控制台输出: this is window /
} getName();
运行结果分析：纯函数中的this均指向了全局对象，即window。
2. 对象方法调用
var name = 'this is window'; //定义window的name属性,看this.name是否会调用到
var testObj = {
name:'this is testObj',
getName:function(){
console.log(this); //控制台输出:testObj //this指向的是testObj对象
console.log(this.name); //控制台输出: this is testObj
}
} testObj.getName();
运行结果分析：被调用方法中this均指向了调用该方法的对象。
3. 使用new调用构造函数
function getObj(){
console.log(this); //控制台输出: getObj{} //this指向的新创建的getObj对象
}
new getObj();
运行结果分析：new 构造函数中的this指向新生成的对象。
4. 内部函数
var name = "this is window"; //定义window的name属性,看this.name是否会调用到
var testObj = {
name : "this is testObj",
getName:function(){
//var self = this; //临时保存this对象
var handle = function(){
console.log(this); //控制台输出: Window //this指向的是全局对象--window对象
console.log(this.name); //控制台输出: this is window
//console.log(self); //这样可以获取到的this即指向testObj对象
}
handle();
}
} testObj.getName();
运行结果分析：内部函数中的this仍然指向的是全局对象，即window。这里普遍被认为是JavaScript语言的设计错误，因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来，一般约定为that或者self，如上述代码所示。
5. 使用call / apply
var name = 'this is window'; //定义window的name属性,看this.name是否会调用到
var testObj1 = {
name : 'this is testObj1',
getName:function(){
console.log(this); //控制台输出: testObj2 //this指向的是testObj2对象
console.log(this.name); //控制台输出: this is testObj2
}
} var testObj2 = {
name: 'this is testObj2'
} testObj1.getName.apply(testObj2);
testObj1.getName.call(testObj2);
Note：apply和call类似，只是两者的第2个参数不同：
[1] call( thisArg [，arg1，arg2，… ] ); // 第2个参数使用参数列表：arg1，arg2，...
[2] apply(thisArg [，argArray] ); //第2个参数使用 参数数组：argArray
运行结果分析：使用call / apply 的函数里面的this指向绑定的对象。
6. 事件绑定
事件方法中的this应该是最容易让人产生疑惑的地方，大部分的出错都源于此。
//页面Element上进行绑定
<script type="text/javascript">
function btClick(){
<span style="white-space:pre"> </span>console.log(this); //控制台输出: Window //this指向的是全局对象--window对象
<span style="white-space:pre"> </span> }
</script>
<body>
<button id="btn" onclick="btClick();" >点击</button>
</body>
//js中绑定方式（1）
<body>
<button id="btn">点击</button>
</body>
<script type="text/javascript">
function btClick(){
console.log(this); //控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象
} document.getElementById("btn").onclick = btClick;
document.getElementById("btn").onclick;
</script>
//js中绑定方式（2）
<body>
<button id="btn">点击</button>
</body>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
console.log(this); //控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象
}
document.getElementById("btn").onclick;
</script>
//js中绑定方式（3）
<body>
<button id="btn">点击</button>
</body>
<script type="text/javascript">
function btClick(){
console.log(this);
} document.getElementById("btn").addEventListener('click',btClick); //控制台输出:<button id="btn">点击</button> //this指向的是Element按钮对象把函数(方法)用在事件处理的时候。
document.getElementById("btn").attachEvent('onclick',btClick); //IE使用,<span style="font-family: Arial, Helvetica, sans-serif;">控制台输出: Window //this指向的是全局对象--window对象</span> </script>
运行结果分析：以上2种常用事件绑定方法，在页面Element上的进行事件绑定（onclick="btClick();"），this指向的是全局对象；而在js中进行绑定，除了attachEvent绑定的事件方法外，this指向的是绑定事件的Elment元素。
【转】javascript运行机制之this详解的更多相关文章
- javascript解析机制、闭包详解
js解析机制: js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ } 在扫描js代码时会把: 1.用声明的方式创建的函数的名字: 2.用var定义的变量的名 ...
- JavaScript运行机制详解
JavaScript运行机制详解 var test = function(){ alert("test"); } var test2 = function(){ alert(& ...
- 从setTimeout谈JavaScript运行机制
从setTimeout说起 众所周知,JavaScript是单线程的编程,什么是单线程,就是说同一时间JavaScript只能执行一段代码,如果这段代码要执行很长时间,那么之后的代码只能尽情地等待它执 ...
- 深入浅出JavaScript运行机制
一.引子 本文介绍JavaScript运行机制,这一部分比较抽象,我们先从一道面试题入手: console.log(1); setTimeout(function(){ console.log(3); ...
- JavaScript运行机制与setTimeout
前段时间,老板交给了我一个任务:通过setTimeout来延后网站某些复杂资源的请求.正好借此机会,将JavaScript运行机制和setTimeout重新认真思考一遍,并将我对它们的理解整理如下. ...
- Javascript 调试利器 Firebug使用详解
Javascript 调试利器 Firebug使用详解 有时候,为了更清楚方便的查看输出信息,我们可能需要将一些调试信息进行分组输出,那么可以使用console.group来对信息进行分组,在组信息输 ...
- javascript中的this作用域详解
javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...
- 大数据学习笔记——Spark工作机制以及API详解
Spark工作机制以及API详解 本篇文章将会承接上篇关于如何部署Spark分布式集群的博客,会先对RDD编程中常见的API进行一个整理,接着再结合源代码以及注释详细地解读spark的作业提交流程,调 ...
- 深入理解JavaScript运行机制
深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...
随机推荐
- Ext开场布局设计Viewport
//加载dwr dwr.engine.setAsync(false); //***************************************框架定义部分***************** ...
- DataTime格式化大全（转载）
//c datetime 格式化 DateTime dt = DateTime.Now; Label1.Text = dt.ToString();//2005-11-5 13:21:25 Label2 ...
- 计算机图形学——OpenGL开发库开发库
vc++6.0 有 OpenGL 的东西.有头文件 GL.H, GLAUX.H, GLU.H 但没有 GLUT 软件包/工具包 如果想使用glut.h的话必须自己添加. 首先下载 OpenGL开发库, ...
- 斯坦福第十二课：支持向量机(Support Vector Machines)
12.1 优化目标 12.2 大边界的直观理解 12.3 数学背后的大边界分类(可选) 12.4 核函数 1 12.5 核函数 2 12.6 使用支持向量机 12.1 优化目标 到目前为 ...
- Android 网络开发免费API接口
http://www.juhe.cn/ 聚合数据 目前很多接口都收费 https://www.showapi.com ...
- 『TCP/IP详解——卷一：协议』读书笔记——07
2013-08-20 17:51:49 第三章 IP:网际协议 3.1 引言 IP是TCP/IP协议族中最为核心的协议.所有的TCP.UDP.ICMP和IGMP数据都以IP数据报格式传输.再来看一下图 ...
- OpenSessionInViewFilter 的配置及作用
spring为我们解决hibernate的Session的关闭与开启问题. Hibernate 允许对关联对象.属性进行延迟加载,但是必须保证延迟加载的操作限于同一个 Hibernate Sessio ...
- 原生js运动框架
function getStyle(obj,name){ if(obj.currentStyle) { return obj.currentStyle[name]; } else { return g ...
- CentOS6.5 解压安装 二进制分发版 mysql-5.5.49-linux2.6-x86_64.tar.gz
环境:CentOS 6.5 64位 1.下载安装包 http://dev.mysql.com/downloads/mysql/5.5.html#downloads http://dev.mysql.c ...
- 【转载】-- vi/vim使用
vi/vim 基本使用方法本文介绍了vi (vim)的基本使用方法,但对于普通用户来说基本上够了!i/vim的区别简单点来说,它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所 ...