JavaScript中this的指向问题
2017-01-21 20:28
706 查看
this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要。而javascript的this又有区别于Java、C#等纯面向对象的语言,这使得this更加扑朔迷离,让人迷惑。
this使用到的情况:
1. 纯函数
2. 对象方法调用
3. 使用new调用构造函数
4. 内部函数
5. 使用call / apply
6.事件绑定
[b]1. 纯函数[/b]
运行结果分析:纯函数中的this均指向了全局对象,即window。
2. 对象方法调用
运行结果分析:被调用方法中this均指向了调用该方法的对象。
3. 使用new调用构造函数
运行结果分析:new 构造函数中的this指向新生成的对象。
4. 内部函数
运行结果分析:内部函数中的this仍然指向的是全局对象,即window。这里普遍被认为是JavaScript语言的设计错误,因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来,一般约定为that或者self,如上述代码所示。
5. 使用call / apply
Note:apply和call类似,只是两者的第2个参数不同:
[1] call( thisArg [,arg1,arg2,… ] ); // 第2个参数使用参数列表:arg1,arg2,...
[2] apply(thisArg [,argArray] ); //第2个参数使用 参数数组:argArray
运行结果分析:使用call / apply 的函数里面的this指向绑定的对象。
6. 事件绑定
事件方法中的this应该是最容易让人产生疑惑的地方,大部分的出错都源于此。
运行结果分析:以上2种常用事件绑定方法,在页面Element上的进行事件绑定(onclick="btClick();"),this指向的是全局对象;而在js中进行绑定,除了attachEvent绑定的事件方法(this指向的是全局对象)外,this指向的是绑定事件的Elment元素。
参考资料:
http://www.qdfuns.com/notes/16738/aa32a299479386c9c1fc254ef0dc6fcb.html
this使用到的情况:
1. 纯函数
2. 对象方法调用
3. 使用new调用构造函数
4. 内部函数
5. 使用call / apply
6.事件绑定
[b]1. 纯函数[/b]
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 onclick="btClick();" >点击</button> </body> //js中绑定方式(1) <body> <button >点击</button> </body> <script type="text/javascript"> function btClick(){ console.log(this); //控制台输出:<button >点击</button> //this指向的是Element按钮对象 } document.getElementById("btn").onclick = btClick; document.getElementById("btn").onclick(); //默认点击 </script> //js中绑定方式(2) <body> <button >点击</button> </body> <script type="text/javascript"> document.getElementById("btn").onclick = function(){ console.log(this); //控制台输出:<button >点击</button> //this指向的是Element按钮对象 } document.getElementById("btn").onclick(); </script> //js中绑定方式(3) <body> <button >点击</button> </body> <script type="text/javascript"> function btClick(){ console.log(this); } document.getElementById("btn").addEventListener('click',btClick); //控制台输出:<button >点击</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
相关文章推荐
- js命令模式的案例——键盘按下及事件回放
- 学习PhantomJS笔记
- js 日期格式,包含%%,%y等转义
- <a>中调用自定义JS函数传值出现异常
- Sublime Text 3 JS 格式化插件 JsFormat的配置使用
- Javascript闭包入门(译文)
- Javascript闭包入门(译文)
- 在控制台快速定位js函数
- js上传预览 兼容全部
- 杂七杂八JS : 浅谈闭包一
- js实现360度图片旋转
- 使用json-server
- Ajax跨域实现代码(后台jsp)
- 【译】延迟加载JavaScript
- JavaScript、C# URL编码、解码总结
- 向值栈保存数据&在JSP中获取值栈的数据
- js命令模式
- js加载页面使用execute_script选定加载位置
- js设计模式
- 一篇文章搞定JavaScript类型转换(面试常见)