JavaScript原型链继承

最新推荐文章于 2022-04-08 15:55:53 发布

原创最新推荐文章于 2022-04-08 15:55:53 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

博客提及《JavaScript高级程序设计》（第三版）中寄生组合式继承示意图，并讲述了一个有趣实验，将subtype类型的prototype指向其自身实例，出现意想不到的情况。

上面是《JavaScript高级程序设计》（第三版）中介绍的寄生组合式继承的示意图。

做了一个很有意思的实验：将subtype类型的prototype指向subtype的一个实例，结果意想不到的情况出现了：

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Prototype</title>
    </head>
    <body>
        <script>
            var obj={   
                attr1:"heiehi",
            };
            //对象字面量表示，本质上是var obj=new Object();obj.attr1="heihei"
            document.writeln(obj.__proto__+"<br>");//就是Object.prototype，输出为[object Object]
            document.writeln( (obj.__proto__==Object.prototype)+"<br>");//true
            document.writeln("----------<br>");
            var subtype=function(val){
                this.subattr=val;
            };
            //自定义类型的构造函数的原型对象初始是Object的一个实例
            //，同时自定义类型构造函数也是Function类型的一个实例
            //本质上：var subtype=Function("val","{this.subattr=val;}");
            //，所以自定义类型构造函数也具有__proto__属性
            //，指向Function类型的prototype，同时自定义类型构造函数自身也具有prototype属性
            //，初始指向Object类型的一个实例，并且那个实例的constructor属性回指向自定义类型构造函数
            //，当然，自定义类型构造函数主要是使用它的prototype而不是__proto__属性
            document.writeln(subtype.__proto__+"_0<br>");//function () { [native code] }
            document.writeln( (subtype.__proto__==Function.prototype)+"_0.5<br>");//true

            document.writeln( (subtype instanceof Function)+"_1<br>");//true
            document.writeln( (subtype.prototype instanceof Object)+"_1.5<br>" );//true
            document.writeln( (subtype.prototype.__proto__==Object.prototype)+"_1.6<br>");//true
            document.writeln(subtype.prototype.constructor+"_1.7<br>");//function(val){ this.subattr=val; }

            var supertype=function(val){
                this.superattr=val;
            };
            var superobj=new supertype("publicstr");
            subtype.prototype=superobj;
            document.writeln( (subtype.prototype instanceof supertype)+"_2<br>" );//true
            document.writeln( (subtype.prototype===superobj)+"_2.5<br>");//true
            document.writeln(subtype.prototype.constructor+"_2.6<br>");//function(val){ this.superattr=val; }
            //new的superobj对象当然是没有constructor属性的，访问subtype.prototype.constructor会沿
            //原型链找到supertype.prototype.constructor，其指向supertype构造函数
            //验证subtype实例的__proto__
            var subobj=new subtype("publicstr");
            document.writeln( (subobj instanceof subtype)+"_2.65<br>" );//true
            document.writeln( (subobj.__proto__==subtype.prototype)+"_2.7<br>");//true
            
            document.writeln("---------------<br>")
            subtype.prototype=subobj;
            document.writeln( (subtype.prototype instanceof subtype)+"_3<br>" );//false
            document.writeln( (subtype.prototype instanceof supertype)+"<br>" );//true
            //subtype.prototype仍没有像"subtype.prototype=subobj;"那样被赋值成功
            document.writeln( (subtype.prototype==subobj)+"<br>");//true
            document.writeln( (subtype.prototype==superobj)+"<br>");//false
            document.writeln( (subobj instanceof subtype)+"_4<br>");//false
            
            document.writeln( (typeof subtype.prototype)+"<br>");
            document.writeln(subtype.prototype.constructor+"<br>");//function(val){ this.superattr=val; }
            document.writeln( (subobj.prototype instanceof supertype)+"<br>");//true
            document.writeln( (subobj.prototype==superobj)+"<br>");//true
            document.writeln( (subtype.prototype==subobj.prototype)+"<br>");//false
            //很奇怪，若此时subtype.prototype指向subtype的实例subobj，
        </script>
    </body>
</html>

我也是太无聊，类型的原型对象指向自身的一个实例，应该不会有这种情况，阿西吧。