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(){
console.log(this); //控制台输出: Window //this指向的是全局对象--window对象
}
</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使用,控制台输出: Window //this指向的是全局对象--window对象
</script>

运行结果分析:以上2种常用事件绑定方法,在页面Element上的进行事件绑定(onclick="btClick();"),this指向的是全局对象;而在js中进行绑定,除了attachEvent绑定的事件方法(this指向的是全局对象)外,this指向的是绑定事件的Elment元素。

参考资料:

http://www.qdfuns.com/notes/16738/aa32a299479386c9c1fc254ef0dc6fcb.html

JavaScript中this的指向问题的更多相关文章

  1. javascript中this的指向

    作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...

  2. Javascript中的this指向。

    一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...

  3. JavaScript中 this 的指向

    很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...

  4. 前端面试之JavaScript中this的指向【待完善!】

    JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...

  5. JavaScript中的this指向

    this是谁 技术一般水平有限,有什么错的地方,望大家指正. this代指当前对象super调用父类的构造函数,应表会运网数物,加载驱动建立链接执行SQL处理结果,直到现在每想起这三点就能想起我上大学 ...

  6. Javascript 中的this 指向的对象,你搞清楚了吗?

    Javascript 中的this 总让人感到困惑,你能分清以下三种test1(),test2(),test3() 情况下的输出吗? 注:以下Javascript运行环境中为浏览器 //1 this在 ...

  7. javascript中的this指向问题

    在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的 ...

  8. 谈谈 JavaScript 中的 this 指向问题

    JavaScript 中的 this 为一个重难点,它不像静态语言 C#.Java 一样,就表示当前对象.而在 JS 中, this 是运行时确定,而并非定义时就已确定其值. 谈起 this ,必须少 ...

  9. 轻松几句搞定【Javascript中的this指向】问题

    this关键字在JavaScript中扮演了至关重要的角色,每次它的出现都伴随着它的指向问题,这也是很多初学者容易出错的地方. 不过,这篇文章将会带你一次性搞定this指向的问题,望能给大家提供帮助! ...

随机推荐

  1. ssl通信c实现

    /*File:client.c *Auth:sjin *Date:2014-03-11 * */ #include <stdio.h>#include <string.h>#i ...

  2. DNS原理及其解析过程

    网络通讯大部分是基于TCP/IP的,而TCP/IP是基于IP地址的,所以计算机在网络上进行通讯时只能识别如“202.96.134.133” 之类的IP地址,而不能认识域名.我们无法记住10个以上IP地 ...

  3. iOS多页面传值方式之单例传值singleton

    // 要实现单例传值,那就必须得新建一个类做为单例 提供创建该类对象的类方法(因为是要在alloc开辟内存空间后赋值).所有在.h文件中声明该方法 + (instancetype)defaultUII ...

  4. CentOS 6.X x64 编译安装 Countly

    CentOS 6.X  x64 编译安装Countly 安装所需的软件 yum -y install supervisor ImageMagick sendmail 1. 安装 node.js wge ...

  5. [FTP]xferlog日志解析

    [root@teacher ~]# cat /var/log/xferlogMon Jan 25 20:41:39 2016 1 10.0.222.156 913268 /sys/sys64/Pack ...

  6. KEIL MDK 查看代码量、RAM使用情况--RO-data、RW-data、ZI-data的解释(转)

    源:KEIL MDK 查看代码量.RAM使用情况--RO-data.RW-data.ZI-data的解释 KEIL RVMDK编译后的信息 Program Size: Code=86496 RO-da ...

  7. iOS开发——发短信,邮件

    在IOS开发中,有时候我们会需要用到邮件发送的功能.比如,接收用户反馈和程序崩溃通知等等,这个功能是很常用的.在苹果系统中,如果彼此的手机都是iOS设备,并且开通了iMessage功能,那么彼此之间的 ...

  8. 在阿里云ECS(CentOS6.5)上安装tomcat

    切换到你要安装的目录下 命令: cd /home/ 下载你要安装的tomcat 命令: wget http://mirror.bit.edu.cn/apache/tomcat/tomcat-7/v7. ...

  9. linux命令学习-4-lsof

    lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件. 在终端下输入ls ...

  10. matlab unique 顺序不变

    对于一个向量,使用unique去重后会自动排序,为了保持原顺序: A = [5,1,8,5,2,8,3,9,6,1];[i,j] = unique(A,'first');B = A(sort(j)); ...