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


    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。

  • 相关阅读:
    静态成员变量
    设计模式:空对象模式(Null Object Pattern)
    超详细LAMP环境搭建
    WCF 学习笔记之双工实现
    new和instanceof的内部机制
    C#开源磁盘/内存缓存引擎
    C++设计模式-Flyweight享元模式
    Javascript内存泄漏
    流量计数器
    运用Mono.Cecil 反射读取.NET程序集元数据
  • 原文地址:https://www.cnblogs.com/web-chuan/p/9096350.html
Copyright © 2020-2023  润新知