Js中的继承

2021-10-01 18:01:55 阅读：138 来源： 互联网

标签：function console log Parent 继承 Js constructor prototype

1.原型链继承

原型链实现继承的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法

 // function A(x) {
        //     this.x = x
        // }
        // A.prototype.name = function() {
        //     console.log(this.x);
        // }


        // function B(y) {
        //     this.y = y
        // }
        // B.prototype = new A(100)
        // B.prototype.constructor = B
        // B.prototype.getName = function() {
        //     console.log(this.y);
        // }

        // let b = new B(200)
        // b.name()
        // console.log(b);

2.寄生组合继承

结合原型链继承和借用构造函数继承的方法,同时需要自己创建prototype,实现寄生组合式继承

1.最完美的JS继承解决方案
2.父类私有的属性和方法,子类实例私有的属性和方法
3.父类公有的属性和方法,子类实例公有的属性和方法
4.子类实例修改公有的属性和方法不会影响父类的实例

 function A(x) {
             this.x = x
            this.name = function() {
               console.log(('aaa'));
             }
         }

         A.prototype.getX = function() {
             console.log(this.x);
         }

         function B(y, x) {
            this.y = x
            A.call(this.x)
         }

         B.prototype = Object.create(A.prototype)
         B.prototype.constructor = B
         B.prototype.getY = function() {
           console.log(this.y);
        }
        let b = new B(200, 100)
         console.log(b);

        Object.create = function(arg) {
            function NewObj() {}
             NewObj.prototypearg
            return new NewObj
        }

3.组合继承

结合原型链继承和借用构造函数继承的方法

1.子类实例可以使用父类的私有属性和方法
2.父类私有的属性和方法也会变成子类实例私有的属性和方法
3.子类实例父类公有的属性和方法
4.子类的原型链上会存在一份多余的父类私有属性

 function A(x) {
            this.x = x
            this.name = function() {
                console.log('aa');
            }
        }
        A.prototype.getX = function() {
            console.log(this.x);
        }

        function B(y, x) {
            this.y = y
            A.call(this, x)
        }

        B.prototype = new A()
        B.prototype.constructor = B
        B.prototype.getY = function() {
            console.log(this.y);
        }
        let b = new B(200, 100)
        console.log(b);

4.call继承(借用构造函数继承)

1.只能继承父类的私有属性和方法(因为只是把Parent当作普通函数执行了一次,跟Parent的原型上的方法和属性没有任何关系)
2.父类私有的属性和方法都会变成子类私有的属性和方法

Es6中的Class类和继承

// ES5中的类(class) => 构造函数(constructor)
// function Parent(x){
//     this.x = x;
//     this.sayHello = function (){
//         console.log("sayHello")
//     }
// }
// Parent.prototype.sx= "属性";
// Parent.prototype.getX= function (){
//     console.log("getX==>",this.x)
// }
// let p1 = new Parent(100);

/*
{//ES6中的类
    class Parent {
        constructor(x) {
            this.x = x;
            this.sayHello = function () {
                console.log("sayHello")
            }
        }

        // sx: "属性",
        getX() {
            console.log("getX==>", this.x)
        }
    }

//公有属性
    Parent.prototype.name = "Parent";
//公有方法
// Parent.prototype.getX= function (){
//     console.log("getX==>",this.x)
// }

    let p1 = new Parent(100)
}
*/

//ES6中的继承

  /*  class Parent {
        constructor(x) {
            this.x = x;
            this.sayHello = function () {
                console.log("sayHello")
            }
        }
        getX() {
            console.log("getX==>", this.x)
        }
    }

    class Child {
        constructor(y) {
            //在ES6的class没有办法直接当作一个普通函数执行
            // Child(123) //Uncaught TypeError: Class constructor Child cannot be invoked without 'new' //必须使用new关键字来创建实例,不能当作一个普通函数执行
            // Parent.call(this,100)
            this.y = y;
        }
        getY(){
            console.log("getY==>", this.y)
        }
    }
    //在使用ES6的继承的时候,没有办法直接重定向子类的原型
    // Child.prototype = Object.create(Parent.prototype);
    let c1 = new Child(200);
*/

//ES6中的继承
//通过extends来实现的继承
//ES6继承 ==>class 子类构造函数 extends 父类构造函数{}
//Child.prototype.__proto__ = Parent.prototype;
/*
* 1. 父类的私有属性和方法,会成为子类的私有属性和方法
* 2.
* */
class Parent {
    constructor(x) {
        this.x = x;
        this.sayHello = function () {
            console.log("sayHello")
        }
    }
    getX() {
        console.log("getX==>", this.x)
    }
}
class Child extends Parent {
    //如果不写constructor,不会报错,继承会正常继承
    //如果不写constructor浏览器会自动的帮我们去创建以下代码
    // constructor(...args){
    //      super(...args)
    // }
    constructor(y) {
        super(100);// Parent.call(this,100)
        //Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
        //如果是通过继承的形式写了constructor,那么就必须使用super来继承父类的私有属性和方法,不然就会报错
        this.y = y;
    }
    getY(){
        console.log("getY==>", this.y)
    }
}
let c1 = new Child(200)

标签：function,console,log,Parent,继承,Js,constructor,prototype
来源： https://blog.csdn.net/m0_61415645/article/details/120579434