js继承,原型链继承,构造函数继承,组合式继承,原型式继承,寄生式继承,组合寄生式继承,extends继承

继承的理解,复用父类的属性和方法并增加新的属性和方法

目录

1. 原型链继承:

2. 构造函数继承

3. 组合式继承

4. 原型式继承

 5. 寄生式继承

6. 组合寄生式继承

7. extends继承


1. 原型链继承:

父类构造函数的实例赋值给子类原型

 function Parent(age){
            this.age=age
            this.color=['green']
        }

        function Child(){

        }
        Child.prototype=new Parent()
        let child = new Child()
        let child1 = new Child()
        child.color.push('red')
        console.log(child.color,child1.color)//两个输出都是['green', 'red']

2. 构造函数继承

子类通过call调用父类的构造函数,解决原型链继承的两个问题,其一是共享父类引用类型的属性,其二是子类不能向父类传参

但是带来问题是每创建一个实例都会执行一次父类构造函数,相当于把父类的实例属性复制给子类

不能复用,并且不能继承原型链上属性和方法

function Parent(age){
            this.age=age
            this.color=['green']
        }

        function Child(age){
Parent.call(this,age)
        }
        Child.prototype=new Parent()
        let child = new Child()
        let child1 = new Child()
        child.color.push('red')
        console.log(child.color,child1.color)//第一个输出是['green', 'red'],第二个输出是green

3. 组合式继承

结合构造函数继承来 继承实例属性和方法,利用 原型链继承 继承原型链属性和方法

function Parent(age) {
                this.age = age;
                this.color = ['green'];
            }

            function Son(age) {
                Parent.call(this, age); // 借用构造函数继承实例属性
            }

            // 使用 Object.create 优化原型链继承
            Son.prototype = new Parent()
            Son.prototype.constructor = Son;

            // 进一步添加原型方法,以验证继承效果
            Parent.prototype.sayAge = function () {
                console.log(this.age);
            };

            Son.prototype.sayHello = function () {
                console.log('Hello');
            };

            // 测试代码
            let son1 = new Son(10);
            let son2 = new Son(20);

            son1.color.push('red');

            console.log(son1.color); // ['green', 'red']
            console.log(son2.color); // ['green']

            son1.sayAge(); // 10
            son2.sayAge(); // 20

            son1.sayHello(); // Hello
            son2.sayHello(); // Hello

4. 原型式继承

利用es5里的object.create,就是 通过已有对象创建新对象,让新对象原型链指向已有对象

通过已有的对象作为新对象的原型,生成一个新的对象实例

选择性修改新对象属性

他的缺点和原型链继承一样

let person = {

 firstname:'John',
lastname:'foe',
fullname:function(){
return this.firstname+""+this.lastname
}

}

let person1 = Object.create(person)
let person2 = Object.create(person)

//已有对象生成新对象,已有对象作为新对象的原型生成新实例
//person1和person2都是创建出来的实例
person1.firstname='Jane'
console.log(person1.fullname())//jane foe
console.log(person2.fullname())//john foe



//体现缺点的代码:


let person={
            firstname:'li',
            lastname:['green'],
            fullname:function(){
                return this.firstname+""+this.lastname
            }
        }

        let person1 = Object.create(person)
        let person2 = Object.create(person)
        person1.lastname.push('red')
        console.log(person1.fullname(),person2.fullname())//ligreen,red ligreen,red

模拟object.create:

function objectfactory(o){

function F(){}
F.prototype=o
return new F()
}

 5. 寄生式继承

可以添加新的属性和方法, 使用现有对象作为原型创建一个新对象,增强这个对象,添加新属性或方法,返回这个对象

同样难以重用

let person={
            firstname:'li',
            lastname:['green'],
            fullname:function(){
                return this.firstname+""+this.lastname
            }
        }

        function jisheng(o){
          let clone=Object.create(o)
          clone.newfunc=function(){
            console.log('haha')
          }
          return clone
          //千万别忘了返回值
        }
        let child1 = jisheng(person)
        let child2 = jisheng(person)
        console.log(child1.newfunc(),child2.newfunc())

6. 组合寄生式继承

优化了组合继承中需要 父类构造函数被调用两次,一次在创建子类原型,一次在子类构造函数

基于object.create

接受两个参数,子类构造函数和父类构造函数
第一步创建父类原型的副本
然后 返回的p对象设置constructor属性,解决由于重写原型导致默认constructor丢失的问题,最后将新创建的对象赋值给子类型的原型

function inherit(subtype,supertype){

let p = Object.create(supertype)
p.constructor=subtype
subtype.prototype=p

}

原型式继承,寄生继承和寄生组合都使用object.create

7. extends继承

利用es6类和构造函数实现继承

class Parent{
 constructor(age){
this.age=age
}
s(){

 console.log('hello')
 
}

}


class Son extends Parent{

t(){
console.log('you')
}


}

let son1 = new Son(30)
son1.s()
son1.t()

相关推荐

  1. <span style='color:red;'>继 承</span>

    继 承

    2024-06-17 07:48:06      30 阅读
  2. 【嵌入——QT】QAbstractTableModel继承

    2024-06-17 07:48:06       60 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-17 07:48:06       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-17 07:48:06       106 阅读
  3. 在Django里面运行非项目文件

    2024-06-17 07:48:06       87 阅读
  4. Python语言-面向对象

    2024-06-17 07:48:06       96 阅读

热门阅读

  1. 【Python】 Stacking: 强大的集成学习方法

    2024-06-17 07:48:06       36 阅读
  2. Flutter 实现StackAllocator简化FFI局部变量的内存管理

    2024-06-17 07:48:06       35 阅读
  3. python 异常处理、随机数、

    2024-06-17 07:48:06       32 阅读
  4. AI学习指南机器学习篇-KNN算法实现

    2024-06-17 07:48:06       31 阅读
  5. linux 搭建一台自己的DNS服务器

    2024-06-17 07:48:06       35 阅读
  6. [AIGC] 选择LeetCode刷题的编程语言

    2024-06-17 07:48:06       34 阅读
  7. 比特币通用API服务

    2024-06-17 07:48:06       27 阅读