浅析js之this --- 一次性搞懂this指向

Posted 2020-09-14 Caraxiong

　　ES5函数调用三种形式：

func(p1, p2)
obj.child.method(p1, p2)
func.call(context, p1, p2) // 先不讲 apply

　　前两种都是语法糖，可以等价地变为 call 形式：转换代码

func(p1, p2) 等价于

func.call(undefined, p1, p2)

 

obj.child.method(p1, p2) 等价于

obj.child.method.call(obj.child, p1, p2)

　　

func.call(context, p1, p2)

　　this，就是上面代码中的 context。就这么简单。

　　this 是你 call 一个函数时传的 context，由于你从来不用 call 形式的函数调用，所以你一直不知道。

　　

浏览器里有一条规则：

　　如果你传的 context 就 null 或者 undefined，那么 window 对象就是默认的 context（严格模式下默认 context 是 undefined）

因此上面的打印结果是 window。

　　

[ ] 语法

function fn (){ console.log(this) }

var arr = [fn, fn2]

arr[0]() // 这里面的 this 又是什么呢？

我们可以把 arr[0]( ) 想象为arr.0( )，虽然后者的语法错了，但是形式与转换代码里的 obj.child.method(p1, p2) 对应上了，于是就可以愉快的转换了：

 arr[0]()

假想为    arr.0()

然后转换为 arr.0.call(arr)

那么里面的 this 就是 arr 了 :) 

 

总结

 

1. this 就是你 call 一个函数时，传入的 context。

2. 如果你的函数调用形式不是 call 形式，请按照「转换代码」将其转换为 call 形式。

 　　

 

1. 如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，非严格模式为undefined。

2. 如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

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

　　　　例：

 

var o = {
    a:10,
    b:{
        // a:12,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。

　　4.还有一种比较特殊的情况：这里this指向的是window,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();   //this指向window

　　5. 构造函数版this：

function Fn(){
    this.user = "Caraxiong";
}
var a = new Fn();
console.log(a.user); //Caraxiong

　　这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向，将这个this指向对象a.调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象Fn中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份。

　　6.当this碰到return时

function fn()  
{  
    this.user = ‘Caraxiong‘;  
    return {};   //返回一个对象
}
var a = new fn;  
console.log(a.user); //undefined

function fn()  
{  
    this.user = ‘Caraxiong‘;  
    return function(){};    //返回一个对象

} var a = new fn; console.log(a.user); //undefined

function fn()  
{  
    this.user = ‘Caraxiong‘;  
    return 1;   //非对象
}
var a = new fn;  
console.log(a.user); //Caraxiong

function fn()  
{  
    this.user = ‘Caraxiong‘;  
    return undefined;   //非对象

} 

var a = new fn; 
console.log(a.user); //Caraxiong

如果返回值是一个对象，那么this指向的就是那个返回的对象，

如果返回值不是一个对象那么this还是指向函数的实例。

 

注：还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

function fn()  
{  
    this.user = ‘Caraxiong‘;  
    return null;
}
var a = new fn;  
console.log(a.user); //Caraxiong

　　7. 

注：

1. new操作符会改变函数this的指向问题，为什么this会指向a？
   1. 首先new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。