详解JavaScript中this的指向问题

this是面向对象语言中一个重要的关键字，理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要。而javascript的this又有区别于Java、C#等纯面向对象的语言，这使得this更加扑朔迷离，让人迷惑。

this使用到的情况：

函数

方法调用

调用构造函数

函数

1. 纯函数

rush:js;"> 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. 对象方法调用

rush:js;"> 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调用构造函数

rush:js;"> function getobj(){ console.log(this); //控制台输出: getobj{} //this指向的新创建的getobj对象 } new getobj();

运行结果分析：new 构造函数中的this指向新生成的对象。

4. 内部函数

rush:js;"> 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

rush:js;"> 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应该是最容易让人产生疑惑的地方，大部分的出错都源于此。

rush:xhtml;"> //页面Element上进行绑定 点击 //js中绑定方式（1） //js中绑定方式（2） //js中绑定方式（3）

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。