javascript面向对象理解的补充

复制代码
<html>
    <head>
        <title>js inherit demo</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0" max-age="0">
    </head>
    <body>
        <h4>js inherit demo</h4>
    </body>
    <script type="text/javascript">

        //js有两种对象,一种是函数对象,一种是普通对象
        //函数对象有__proto__和prototype两种属性,而普通对象只有__proto__属性
        //js引擎基于__proto__的递归查找是所有js继承的核心!!!,因此也称为基于原型链的继承方式

        /*
        *   当创建一个function时,做了几件事情
        *   1、创建了一个普通对象base
        *-  2、创建了一个对应的原型变量@base
        *   3、普通对象中的prototype指针指向原型变量
        *   4、原型变量@base中的constructor指针(构造函数)指向base
        */
        var base = function(){
            base.prototype.name = 'hello';
            this.password       = 'fredric';

            console.log('do base constructor');
        }

        console.log(base.prototype.constructor == base); //true

        console.log(base.prototype);
        console.log(base.__proto__);

        //此时b是一个object而非base
        //普通对象只有__proto__属性指向其原型链
        var b = new base(); //do constructor

        /*
        * 1、创建一个空的obj
        * 2、将__proto__绑定到对象的原型,即base.prototype
        * 3、执行base函数
        */
        b.age = 4;
        console.log(b.__proto__ == base.prototype); //true
        console.log(b.__proto__.name == b.name); //true
        console.log(b.password);
        //此时b本身没有name属性,于是js引擎会到b的__proto__里去找,如此往复,因此实现了继承的效果
        //如下:b.__proto__.__proto__.name
        console.log(b);


        //第二种继承的方式
        var extend = function(){
            console.log('do extend constructor');
        }
        console.log(extend.prototype.constructor == extend); //true
        

        //执行顺序如下:
        //1. 创建一个空的obj赋值给extent.prototype
        //2. extend.prototype.__proto__指向base.prototype
        //3. 执行base函数,即打印do base constructor
        extend.prototype = new base();
        console.log(extend.prototype.__proto__ == base.prototype); //true

        var e = new extend();

        console.log(e.__proto__ == extend.prototype); //true
        console.log(e);

    </script>

</html>
复制代码

 

posted @   Fredric_2013  阅读(136)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示