js 理解this指向(个人学习笔记)

时间:2022-01-05 22:44:26

this就是函数运行时自动生成的一个内部对象       

  首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉,那么接下来我会深入的探讨这个问题。

  为什么要学习this?如果你学过面向对象编程,那你肯定知道干什么用的,如果你没有学过,那么暂时可以不用看这篇文章,当然如果你有兴趣也可以看看,毕竟这是js中必须要掌握的东西。

  1.   (alert也是window的一个属性,也是window点出来的。)

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();//像这中的都是window对象调用的,,,等同于window.a();  函数的里面指向的就是window,,,,window.user没有定义,所以是undifined

  2.

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);  //追梦子
    }
}
o.fn();   //fn()这个函数是o这个对象调用的,,,所以里面的this指向的是o    o.user == "追梦子”

  3.

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
    }
}
window.o.fn(); // this指向o  因为函数前面的第一个是o
var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();//等价于  window.o.b.fn()    函数真正运行是fn()  前面第一个调用的是b,,,所以this指向的是b对象
var o = {
    a:10,
    b:{
        // a:12,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();//b

  通过上面的例子,我们可以看到,,要确定this的指向问题,必须要看调用的时候的实际情况,我们其实可以这样,每个调用的时候,在前面都可以加上window调用,这样再去看;

       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();//等价于window.j();  这样的话,我们知道这个函数执行的时候,里面的this指向的window

 

                    this永远指向的是最后调用它的对象

 

构造函数版this:(new可以改变this的指向)

function Fn(){
    this.user = "追梦子";
}
var a = new Fn();//this指向a
console.log(a.user); //追梦子

    new运行原理是:

new Animal('cat') = {//类似这样
    var obj = {};//先定义一个空对象
    obj.__proto__ = Animal.prototype;//把 obj 的__proto__ 指向构造函数 Animal 的原型对象 prototype,此时便建立了 obj 对象的原型链:obj->Animal.prototype->Object.prototype->null
    var result = Animal.call(obj,"cat");//改变this指向,从Animal改变到obj上
return typeof result === 'object'? result : obj; //返回
}

 

    当this碰到return时

      1.

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

 

        2.

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

        3.

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

 

        4.

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

     通过上面的例子,我们可以看到,当返回值位Object的时候,this指向是改变的,当是其他类型的时候,this指向是不会改变的,还会指向那个实例

        还有一点就是虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。(null也是Object类型)

知识点补充:

     在严格版中的默认的this不再是window,而是undefined。