javaScript中关于this的指向
2017-11-21 17:03
676 查看
在 JavaScript 编程中,this 关键字总是让初学者感到迷惑。跟别的语言大相径庭的是,JavaScript中的this总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,并非函数声明时的环境。
this的指向大致可以分为以下几种情况:
结果为:
结果:
或者:
结果:
4000
avaScript中没有类,但是可以从构造器中创建对象,构造器的外表跟普通函数一模一样,区别在于它们的调用方式。当用new运算符调用函数时,该函数总会返回一个对象,通常情况下,构造器的this就指向这个对象,见如下代码:
但是如果构造器显式的返回了一个Object类型的对象,那么此次运算的结果最终会返回这个对象,而不是之前的this:
如果构造器不显式的返回任何数据,或者返回一个非Object类型的数据,就不会造成上述问题:
关于apply和call的区别在此不做讨论。
此时有一种简单的解决方案,可以用一个变量保存 div 节点的引用:
有不对的地方希望大家指正,谢谢大家。
参考文献《JavaScript设计模式与开发实践》
this的指向大致可以分为以下几种情况:
1.作为对象的方法调用
当函数作为对象的方法被调用时,this指向该对象,举个栗子:var obj = { name:"1", getName:function(){ console.log(this === obj); console.log(this.name); } } obj.getName();
结果为:
2.作为普通函数调用
当函数不作为对象的方法被调用时,也就是我们常说的普通函数方式,此时的this指向全局对象,在浏览器的JavaScript里,这个全局对象是window对象。window.name = "window"; var obj1 = function(){ console.log(this === window); console.log(this.name); } obj1();
结果:
或者:
var obj = { name:"object", getName:function(){ console.log(this); console.log(this.name); } } var obj2 = obj.getName; obj2(); //此时是作为普通函数调用
结果:
3.构造器调用
j4000
avaScript中没有类,但是可以从构造器中创建对象,构造器的外表跟普通函数一模一样,区别在于它们的调用方式。当用new运算符调用函数时,该函数总会返回一个对象,通常情况下,构造器的this就指向这个对象,见如下代码:
var MyClass = function(){ this.name = 'lang'; }; var obj = new MyClass(); alert ( obj.name ); // 输出:lang
但是如果构造器显式的返回了一个Object类型的对象,那么此次运算的结果最终会返回这个对象,而不是之前的this:
var MyClass = function(){ this.name = 'lang'; return { name:"ray"; } }; var obj = new MyClass(); alert ( obj.name ); // ray
如果构造器不显式的返回任何数据,或者返回一个非Object类型的数据,就不会造成上述问题:
var MyClass = function(){ this.name = 'lang' return 'ray'; // 返回 string 类型 }; var obj = new MyClass(); alert ( obj.name ); // 输出:lang
4. Function.prototype.call 或 Function.prototype.apply 调用
跟其他的普通函数调用方式相比,用Function.prototype.call 或 Function.prototype.apply可以动态的改变函数this指向,见如下代码:var obj1 = { name: 'lang', getName: function(){ return this.name; } }; var obj2 = { name: 'ray' }; console.log( obj1.getName() ); // 输出: lang console.log( obj1.getName.call( obj2 ) );// 此时是把obj1中的this指向obj2 输出:ray console.log( obj1.getName.apply( obj2 ) ); //apply 同理
关于apply和call的区别在此不做讨论。
5.改变this指向的一种简单方法
有时我们会遇到一些困扰,比如在 div 节点的事件函数内部,有一个局部的 callback 方法, callback 被作为普通函数调用时,callback 内部的 this 指向了 window,但我们往往是想让它指向 该 div 节点,见如下代码:<html> <body> <div id="div1">我是一个 div</div> </body> <script> window.id = 'window'; document.getElementById( 'div1' ).onclick = function(){ alert ( this.id ); // 输出:'div1' var callback = function(){ alert ( this.id ); // 输出:'window' } callback(); //普通函数调用,this指向window }; </script> </html
此时有一种简单的解决方案,可以用一个变量保存 div 节点的引用:
document.getElementById( 'div1' ).onclick = function(){ var that = this; // 保存 div 的引用 var callback = function(){ alert ( that.id ); // 输出:'div1' } callback(); };
有不对的地方希望大家指正,谢谢大家。
参考文献《JavaScript设计模式与开发实践》
相关文章推荐
- 关于Javascript中this的指向以及一些应用
- 关于JavaScript中this的指向问题
- JavaScript严格模式下关于this的几种指向详解
- JavaScript中的call(),apply(),bind()方法 关于this指向
- 关于javascript中的this更改指向问题
- 关于JavaScript中的this指向问题总结篇
- 关于javascript的this指向问题
- javascript中this的指向问题
- javascript中改变this的指向
- javascript中改变this的指向
- 图解javascript中this指向
- JavaScript 中 关于 this 的学习笔记
- 函数中this的指向问题 ——Javascript 进阶知识整理
- JavaScript学习之旅--this指向问题
- javascript中this对象的指向问题
- javascript——this指向
- 关于孙鑫MFC视频第三章中this指针指向基类还是派生类的测试程序
- 关于this指向思考
- JavaScript-this的指向
- js中关于this的指向