分享点干货（此this非彼this）this的详细解读

最新推荐文章于 2024-04-11 07:00:00 发布

弑晓风

最新推荐文章于 2024-04-11 07:00:00 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/p73353/article/details/87844311

版权

分享点干货（此this非彼this）this的详细解读

在javascript编程中，this关键字经常让初学者感到迷惑，这里，针对此this根据查阅的资料和个人的理解分享一下，纯手打，大神勿喷。

首先先说一下this的指向，大致可以分为以下四种。

1.作为对象的方法调用。

2.作为普通函数调用。

3.构造器调用。

4.Function.prototype.call或者是Function.prototype.apply调用。

这四种调用很重要，如果能彻底理解了，应该不会再对这个this感到迷惑了。

1.作为对象的方法调用

1         var obj = {
2             value: 1,
3             getValue: function() {
4                 console.log(this === obj);//输出 true
5                 console.log(this.value); //输出 1
6             }
7         };
8         obj.getValue();

2.作为普通函数调用

当函数不作为对象的属性被调用时，也就是普通的函数调用方式，通常来讲，this是指向全局对象的，在浏览器里，也就是window对象。

1         window.name = "michael";
2         var obj = {
3             name:"tom",
4             getName:function() {
5                 return this.name;
6             }
7         };
8         var getName = obj.getName;
9         console.log(getName()); //输出  michael

3.构造器调用

除了宿主提供的一些内置函数，大部分的javascript函数可以当构造器来使用，它和普通函数的区别在于被调用的方式。当使用new来调用的时候，通常是返回一个对象，构造器里的this就指向这个返回的对象。

1         var myClass = function(){
2             this.name = "michael";
3         };
4         var obj = new myClass();
5         console.log(obj.name);// 输出michael

但是，使用new调用的时候，还需要注意这样一个问题，如果构造器显式返回一个object类型的对象的时候，那么这次最终返回的是这个对象，而不是this.

1         var myClass = function(){
2             this.name = "michael";
3             return {//显式返回一个对象
4                 name:"tom"
5             };
6         };
7         var obj = new myClass();
8         console.log(obj.name);// 输出tom

上述情况需要特殊注意.

4.Function.prototype.call或者是Function.prototype.apply调用

与第二种普通函数调用相比，call或者apply可以动态改变this的指向，听着蛮高大上的。

 1         var obj = {
 2             name:"michael",
 3             getName:function() {
 4                 return this.name;
 5             }
 6         };
 7         var obj2 = {
 8             name:"tom"
 9         };
10         console.log(obj.getName()); //输出  michael
11         console.log(obj.getName.call(obj2)); //输出  tom