this的指向问题

Posted 2020-10-28 圣墨

声明：本文来源“追梦子”大大的文章《彻底理解js中this的指向，不必硬背。》

偶遇此文自我总结一下，受益良多

一、对象中的this

例1：
  function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();
// 注意函数是在什么作用域中调用的
//这个函数实在全局作用域中调用所以this指向的是window 全局中没有user所以是undefineds
例2：
var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);  //追梦子
    }
}
o.fn();
//这个函数是通过o.fn()点出来的，所以的指向的是o 强调一点：函数在创建的时候无法确定this的指向，谁调用这个函数this就指向谁
例3：
var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn()

总结上面三个例子

1.如果一个函数中有this,如果它没有被上一级对象所调用，那么这个this指向window

2.如果一个函数中有this,且被它的上一级对象调用，此时这个this指向它的上一级对象

3.如果一个函数中有this 这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向也只是它的上一级对象

注意：

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();
// 注意这个实例
在这里fn只是赋值给j并没有调用，然后j在全局作用域下调用，所以这个this指向的是window

二、构造函数中的this

function Fn(){
    this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子
//这里面的this通过this改变了this指向

三、当this遇到return时(需要特别注意)

function fn()  
{  
    this.user = \'追梦子\';  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined
----------------------------------------
function fn()  
{  
    this.user = \'追梦子\';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined
----------------------------------------
function fn()  
{  
    this.user = \'追梦子\';  
    return 1;
}
var a = new fn;  
console.log(a.user); //追梦子
-------------------------------------------
function fn()  
{  
    this.user = \'追梦子\';  
    return undefined;
    //undefined是特殊的变量
}
var a = new fn;  
console.log(a.user); //追梦子
------------------------------------------
总结：如果返回值是一个对象,那么this指向的就是那个返回的对象 如果返回值不是一个对象那么this还是指向函数的实例

注意：null也是对象但是这里的this还是指向那个函数的实例

function fn()  
{  
    this.user = \'追梦子\';  
    return null;
}
var a = new fn;  
console.log(a.user); //追梦子