js继承以及原型链的理解

js继承

原型链继承

      // 首先创建一个父类
        function Preson(name = "无名", age = 0) {
            this.name = name
            this.age = age
        }

        // 然后创建一个方法
        Preson.prototype.say = function () {
            return this.name
        }
        // 创建一个子类
         function Child(){
           this.addrise="南阳"
         }
        //  原型链继承  
         Child.prototype=new Preson() //就相当于父类的实列化对象等于子类的原型

        var  p = new Child()

         console.log(p.name)
         console.log(p.age)

优点：

• 可以使用父类的方法

缺点

• 不能传参

构造函数继承

    // 首先创建一个父类
        function Preson(name = "无名", age = 0) {
            this.name = name
            this.age = age
        }

        // 然后创建一个方法
        Preson.prototype.say = function () {
            return this.name
        }
        // 创建一个子类
         function Child(name,age){
         //  通过改变this指向传参
         Preson.call(this,name,age)
           this.addrise="南阳"
         }


        var  p = new Child("小花",18)
         console.log(p.name)
         console.log(p.age)

优点：

• 可以实现传参

缺点

• 父类原型上的方法继承不了

组合继承

组合继承就是原型链继承和构造函数继承的优点在一起

  // 首先创建一个父类
        function Preson(name = "无名", age = 0) {
            this.name = name
            this.age = age
        }

        // 然后创建一个方法
        Preson.prototype.say = function () {
            return this.name
        }
        // 创建一个子类
         function Child(name,age){
         //  通过改变this指向传参
         Preson.call(this,name,age)
           this.addrise="南阳"
         }
        //  原型链继承  
         Child.prototype=new Preson() //就相当于父类的实列化对象等于子类的原型

        var  p = new Child("小花",18)

         console.log(p.name)
         console.log(p.age)
         console.log(p.say())

es6继承

    // 创建父类
        class Preson {
            constructor(name = "小龙", age = 0) {
                this.name = name
                this.age = age
            }
            say() {
                return `姓名：${this.name}年龄：${this.age}`
            }
        }

    //    创建子类继承  关键就是extens
        class Child extends Preson {

            constructor(name, age) {
                // super代表父元素 如果没有会报错
                super(name, age)
            }

        }


        let p = new Preson("小白", 24)
        let p1 = new Child("小红", 18)
        console.log(p.name, p.age)
        console.log(p.say())
        console.log(p1.name, p1.age)
        console.log(p1.say())

原型链的理解

 // 创建父类
        class Preson {
            constructor(name = "小龙", age = 0) {
                this.name = name
                this.age = age
            }
            say() {
                return `姓名：${this.name}年龄：${this.age}`
            }
        }

    //    创建子类继承  关键就是extens
        class Child extends Preson {

            constructor(name, age) {
                // super代表父元素 如果没有会报错
                super(name, age)
            }

        }


        let p = new Preson("小白", 24)
        let p1 = new Child("小红", 18)
        // 先从自身寻找自身没有的话就往原型上找
        console.log(p1.__proto__) //child.prototype
        // 然后就从child.prototype的原型上面查找
        console.log(Child.prototype.__proto__) //Preson.prototype
        // 如果Preson.prototype上没有的话继续从Preson.prototype的上一级的原型上查找
        console.log(Preson.prototype.__proto__) //Object.prototype
        // 如果Object.prototype上没有的话继续从Object.prototype的上一级的原型上查找
        console.log(Object.prototype.__proto__) //null 直到null 如果还是没有的话就会返回undefined