javascript 原型實現的繼承

時間 2019-12-20

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>javascript實現的繼承</title>
    <script type="text/javascript">
        /**
         * js實現繼承的第一種方式是基於原型鏈的方式
         */
        function Parent() {
            this.pv = "parent";
        }
        Parent.prototype.pp = "ok";
        Parent.prototype.showParentValue = function() {
            alert(this.pv);
        }

        function Child() {
            this.cv = "child";
        }
        /**
         * 若是想進行賦值以後，才進行原型鏈的設定，這樣賦值的原型對象
         * 就會被重寫掉，賦值的對象就不存在在新的原型對象中
         */
        // Child.prototype.showChildValue = function() {
        // alert(this.cv);
        // }
        /**
         * 讓Child的原型鏈指向Parent對象，也就等於完成了一次繼承
         * 注意內存模型
         */
        Child.prototype = new Parent();

        Child.prototype.showChildValue = function() {
            alert(this.cv);
        }
        /**
         * 此時完成的對父類對象的覆蓋
         */
        Child.prototype.showParentValue = function() {
            alert("override parent");
        }
        /**
         * 在使用原型鏈進行繼承必定要注意一下問題：
         * 一、不能在設定了原型鏈以後，再從新爲原型鏈賦值
         * 二、必定要在原型鏈賦值以後才能添加或者覆蓋方法
         */


        /**
         * 當執行了下面這句話以後，意味着Child的原型又重寫了
         * 這樣就不存在任何的繼承關係了
         * 使用原型鏈須要注意的第一個問題
         */
        // Child.prototype = {
        // showChildValue:function() {
        // alert(this.v);
        // }
        // }

        var c = new Child();
        c.showParentValue();
        c.showChildValue();
        alert(c.pp);

    </script>
</head>
<body>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。