zoukankan      html  css  js  c++  java
  • 02 js原型链

    1 js原型链是一个绕不开的话题。直接上说吧。

    /**
     * 1. js里的原型链是怎么样的? 带class 和不带class的原型链的不同。
     */
    
     const  util = require('util');
     function A() {
        console.info("I am A ");
     }
    
     function B() {
        console.info("I am B ");
    }
        
    function C() {
        console.info("I am C ");
    }
    
    util.inherits(B, A);
    util.inherits(C, B);
    class  CA {
        constructor(){
            console.info("i am CA");
        }
    
        doCA(){
            console.info(" doCA ");
        }
    }
    
    class  CB extends CA{
        constructor(){
            super();
            console.info("i am CB");
        }
    
        doCB(){
            console.info(" do CB ");
        }
    }
    
    class  CC extends CB {
        constructor(){
            super();
            console.info("i am CC");
        }
    
        doCC(){
            console.info(" i am doCC");
        }
    }
    
    //原型链继承如下:
    var c = new C();
    console.info( c.__proto__ === C.prototype);
    console.info(c.__proto__.__proto__ === B.prototype);
    console.info(c.__proto__.__proto__.__proto__ === A.prototype);
    console.info(c.__proto__.__proto__.__proto__.__proto__ === Object.prototype);
    console.info(c.__proto__.__proto__.__proto__.__proto__.__proto__ === null);
    
    //class
    var cc = new CC();
    console.info(cc.__proto__ === CC.prototype);
    console.info(cc.__proto__.__proto__ === CB.prototype);
    console.info(cc.__proto__.__proto__.__proto__ === CA.prototype);
    console.info(cc.__proto__.__proto__.__proto__.__proto__ === Object.prototype);
    console.info(cc.__proto__.__proto__.__proto__.__proto__.__proto__ === null);
    
    //下面是类的继承关系。class和非class是不同的
    console.info("类继承关系");
    console.info(C.prototype.constructor === C);//C的原型的构造 = 本身
    console.info(C.__proto__ === Function.prototype);//所有的类的__proto__指向Function的原型,即构造主的原型。
    console.info(Function.__proto__ === Function.prototype);//
    
    console.info("带class的类继承关系");
    console.info(CC.__proto__ === CB);//带class 的CC的__proto__指向,cb, 最终最想 Function的原型。
    console.info(CC.__proto__.__proto__ === CA);
    console.info(CA.__proto__ === Function.prototype);

    原型链要记住一下几点:

    1. 每个东西都有 __proto__

    2. 类的prototype = 类的原型。 类的原型的 construct = 类。

    3. 小c的__proto__ = C的原型,C的原型的__proto__= B的原型, B的原型的__proto__ = A的原型 , A的原型的 __proto__ = Object的原型,Object的原型的__proto__ = null;这就是原型链,很简单吧。

    4. 用class 继承时, CC的__proto__ = CB, CB的__proto__ = CA, CA的__proto__ = Function的原型。

    用util.inherits 实现继承时, C,B,A, Function的__proto__ 都等于 Function的原型。

    只要把上面都记住,多练习,就可以很好的掌握原型链。

    以上如果还没有看懂的话,可以参考:https://blog.csdn.net/m0_37589327/article/details/78655038

  • 相关阅读:
    SpringBoot学习笔记(14)----应用监控-HTTP方式
    SpringBoot学习笔记(13)----使用Spring Session+redis实现一个简单的集群
    SpringBoot学习笔记(12)----SpringBoot实现多个 账号轮询发送邮件
    SpringBoot学习笔记(11)-----SpringBoot中使用rabbitmq,activemq消息队列和rest服务的调用
    SpringBoot学习笔记(8)-----SpringBoot文件上传
    SpringBoot学习笔记(7)-----CORS支持解决跨域问题
    设计模式:迭代器模式(Iterator)
    设计模式:适配器模式(Adapter)
    设计模式:状态模式(State)
    设计模式:抽象工厂模式(Abstract Factory)
  • 原文地址:https://www.cnblogs.com/gongzhuiau/p/11494230.html
Copyright © 2011-2022 走看看