JavaScript中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的指向问题的更多相关文章
- javascript中this的指向
作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...
- Javascript中的this指向。
一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...
- JavaScript中 this 的指向
很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...
- 前端面试之JavaScript中this的指向【待完善！】
JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...
- JavaScript中的this指向
this是谁 技术一般水平有限,有什么错的地方,望大家指正. this代指当前对象super调用父类的构造函数,应表会运网数物,加载驱动建立链接执行SQL处理结果,直到现在每想起这三点就能想起我上大学 ...
- Javascript 中的this 指向的对象，你搞清楚了吗？
Javascript 中的this 总让人感到困惑,你能分清以下三种test1(),test2(),test3() 情况下的输出吗? 注:以下Javascript运行环境中为浏览器 //1 this在 ...
- javascript中的this指向问题
在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的 ...
- 谈谈 JavaScript 中的 this 指向问题
JavaScript 中的 this 为一个重难点,它不像静态语言 C#.Java 一样,就表示当前对象.而在 JS 中, this 是运行时确定,而并非定义时就已确定其值. 谈起 this ,必须少 ...
- 轻松几句搞定【Javascript中的this指向】问题
this关键字在JavaScript中扮演了至关重要的角色,每次它的出现都伴随着它的指向问题,这也是很多初学者容易出错的地方. 不过,这篇文章将会带你一次性搞定this指向的问题,望能给大家提供帮助! ...
随机推荐
- 在js中如何得到上传文件的大小。
<html> <head> <script language="javascript"> function getSize() { ...
- PHP获取当期前运行文件的路径，名字，服务器路径
<?phpecho "显示脚本文件的相对路径和文件名:\"".$_SERVER["PHP_SELF"]."\"<br& ...
- Linux启动时显示Grub命令行及修改
1.在启动Linux系统时,如果/boot/grub/grub.cfg文件损坏或者不存在时,启动Linux时,就会有Grub命令行的提示. 如下操作,将系统自带的grub.cfg文件改名.重新启动系统 ...
- (中等) HDU 4069 Squiggly Sudoku , DLX+精确覆盖。
Description Today we play a squiggly sudoku, The objective is to fill a 9*9 grid with digits so that ...
- Objective-c学习笔记3
objective-c代码块多并发 1.代码块对象是对C语言中函数的扩展,除了函数中的代码,代码块还包含有变量绑定,代码块有时也被称为闭包 2.代码块包含两种绑定类型,自动绑定使用的是栈空间,托管绑定 ...
- LPC1768定时器普通定时
//其他通道的基本定时功能都能在这里实现 void Time0Mr0Init(u32 arr,u32 psc) { LPC_SC->PCONP |= (1<<1); ...
- LPC2478的外部中断使用
LPC2478外部中断 2478的外部中断模型如下 也就是说,port0和2支持外部中断,EINT0-2是三个独立管脚的中断,而EINT3则是port0和2的所有中断共同拥有的向量 对于port0和2 ...
- UISlider小结
滑块(UISlider)是常用的界面组件,能够让用户可以用可视化方式设置指定范围内的值,比如音量设置,比如灵敏度控制等诸如此类的用途. - (void)viewDidLoad { [super vie ...
- java学习(四) excel读取
private static void readExcel() { String filePath = "C:/Standardzid.xls"; File file = new ...
- Struts2接受参数的几种类型和接受复杂类型参数（list<String>和list<Object>）
Struts2接受参数的几种类型 大概有这几种类型: 1.使用Action的属性接受参数 在Action中加入成员变量,配置Getter和Setter方法,Getter而和Setter方法的名字和表单 ...