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

Posted Caraxiong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅析js之this --- 一次性搞懂this指向相关的知识,希望对你有一定的参考价值。

  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就会被这个空的对象替代。



以上是关于浅析js之this --- 一次性搞懂this指向的主要内容,如果未能解决你的问题,请参考以下文章

前端——浅析vue中this指向问题

一分钟搞懂 JavaScript this 指向问题

彻底搞懂 JavaScript 中的 this 指向

this是如何产生的?浅析一下this的指向问题

你还没搞懂this?

JS之this