js-继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>


        // 1 原型继承

        // function Parent(){
        //     this.x = 100
        // }

        // Parent.prototype.getX = function getX(){
        //     return this.x;
        // }

        // function Child(){
        //     this.y = 200
        // }

        // Child.prototype = new Parent; // 原型继承
        // Child.prototype.getY = function getY(){
        //     return this.y;
        // }

        // let C1 = new Child;

        // console.log(C1)


        // 2 call 继承 (只能继承父类中私有的，不能继承父类中公共的)

        // function Parent(){
        //     this.x = 100
        // } 
        // Parent.prototype.getX = function getX(){
        //     return this.x;
        // } 

        // function Child(){ 
        //     Parent.call(this)
        //     this.y = 200
        // } 
        // Child.prototype.getY = function getY(){
        //     return this.y;
        // } 
        // let C1 = new Child; 
        // console.log(C1)


        // 3 寄生组合继承
        // function Parent(){
        //     this.x = 100
        // } 
        // Parent.prototype.getX = function getX(){
        //     return this.x;
        // } 

        // function Child(){ 
        //     Parent.call(this)
        //     this.y = 200
        // } 

        // // Child.prototype.__proto__ =  Parent.prototype;
        // Child.prototype = Object.create(Parent.prototype);
        // Child.prototype.constructor = Child;
        // Child.prototype.getY = function getY(){
        //     return this.y;
        // } 
        // let C1 = new Child; 
        // console.log(C1)


        /**
         *  Es6 的类和继承  类似 寄生组合继承
        */

        class Parent{
            constructor(){
                this.x = 100;
            }

            // Parent.prototype.getX
            getX(){
                return this.x;
            }
        }

        class Child extends Parent{
            constructor(){
                super();
                this.y = 200;
            }

            // Person.prototype.getY
            getY(){
                return this.y;
            }
        }
 
        let c2 = new Child;
        console.log(c2);
    </script>
</body>
</html>
posted @ 2021-07-22 15:38  13522679763-任国强  阅读(16)  评论(0)    收藏  举报