JS之this

Posted 2020-10-03

　　作为JS中比较容易让人迷糊，同时又很重要的难点。

　　关于this指向问题，我们始终要记住一句话，这句话对于理解this指向很重要。这句话是:this要在执行时才能确认它的值，定义时无法确认。

　　this的指向出现在以下问题中，我根据我的理解在此做个总结。

　　1.全局中的this。很容易理解，在浏览器中，this指向window。

 

console.log(this) //window

 

 　　2.作为普通函数执行的this。在浏览器中，this指向window。

var a=1;
function foo(){
    console.log(this);
    console.log(this.a);
}

foo(); //window  1

　　

　　3.作为对象方法的函数的this。this指向定义该函数的对象。

var o={
    a:1,
    foo:function(){console.log(this);console.log(this.a);}           
}

o.foo(); // {a:1,foo:f}   1

　　但是要注意两种情况

　　1.当把该对象的方法赋值给一个变量时，此时this的绑定会中断，也就是说此时该变量声明的函数变成了一个普通函数。this指向window

var o={
    a:1,
    foo:function(){console.log(this);console.log(this.a);}           
}

var goo=o.foo;//此时this的绑定中断，不再指向对象o

goo(); // window   undefined

　　2.当在该对象方法中在此定义一个方法，此时this仍然指向window。可能说的有点模糊，看下面代码

var o={
    a:1,
    foo:function(){
           function f(){
                console.log(this);console.log(this.a);
            };
           f();//该函数虽然在foo中定义，但是是作为一个普通函数，而不是作为对象上的直接方法
      }           
}

o.foo();// window    undefined    

　　

　　4.作为对象原型链上的this。this会指向该实例对象。

var o={
   f:function(){
     console.log(this.a+this.b);
}  
}

var p=Object.create(o);//该方法创建以o为原型的实例对象p

p.a=1;
p.b=2;

p.f(); // 3

 　　

　　5.作为new构造器中的this，this会指向创建出来的实例对象。但是想更好的理解这一点，我们需要知道new的构造过程

new过程：

1.创建一个新对象

2.让this指向该对象

3.执行该构造函数中的代码，对this赋值

4.return this对象

但是要注意，若无return 或者 return基本类型值，构造函数返回this。若return一个其他对象的话，则return该对象，this指向该对象。看下面代码

function M(){
    this.a=10; 
}

var o=new M();

console.log(o.a);  //10

function N(){
    this.a=20;
    return {a:30};
} 

var p=new N();

console.log(p.a);//30   这里不是20，因为构造函数返回了一个对象

　　6.关于call,apply,bind中的this。这里call和apply很相似，它们只是传入参数的形式不一样，所以只说call和bind。它们都可以改变this的指向。

var a=10;
function f(){
    console.log(this.a);
}

var p={a:30};

f();//10   this指向window

f.call(p);//  30   this指向传入的对象p

f.call(null)// 10  this指向window  但是要注意在严格模式下会报错

f.bind(p)//  没有任何反应

f.bind(p)();//  30

//这是因为call是立即调用  而bind只是先改变this的指向，而没有调用该函数

　　

　　以上就是我总结出来的关于this指向的问题。因为是小白，理解上可能有些地方不是很恰当，总结的也可能不太全面。若发现问题，希望大家能够及时指正错误，多多与我交流，共同进步。