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


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

    目录

    1. 原型链继承:

    2. 构造函数继承

    3. 组合式继承

    4. 原型式继承

     5. 寄生式继承

    6. 组合寄生式继承

    7. extends继承


    1. 原型链继承

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

    1. function Parent(age){
    2. this.age=age
    3. this.color=['green']
    4. }
    5. function Child(){
    6. }
    7. Child.prototype=new Parent()
    8. let child = new Child()
    9. let child1 = new Child()
    10. child.color.push('red')
    11. console.log(child.color,child1.color)//两个输出都是['green', 'red']

    2. 构造函数继承

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

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

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

    1. function Parent(age){
    2. this.age=age
    3. this.color=['green']
    4. }
    5. function Child(age){
    6. Parent.call(this,age)
    7. }
    8. Child.prototype=new Parent()
    9. let child = new Child()
    10. let child1 = new Child()
    11. child.color.push('red')
    12. console.log(child.color,child1.color)//第一个输出是['green', 'red'],第二个输出是green

    3. 组合式继承

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

    1. function Parent(age) {
    2. this.age = age;
    3. this.color = ['green'];
    4. }
    5. function Son(age) {
    6. Parent.call(this, age); // 借用构造函数继承实例属性
    7. }
    8. // 使用 Object.create 优化原型链继承
    9. Son.prototype = new Parent()
    10. Son.prototype.constructor = Son;
    11. // 进一步添加原型方法,以验证继承效果
    12. Parent.prototype.sayAge = function () {
    13. console.log(this.age);
    14. };
    15. Son.prototype.sayHello = function () {
    16. console.log('Hello');
    17. };
    18. // 测试代码
    19. let son1 = new Son(10);
    20. let son2 = new Son(20);
    21. son1.color.push('red');
    22. console.log(son1.color); // ['green', 'red']
    23. console.log(son2.color); // ['green']
    24. son1.sayAge(); // 10
    25. son2.sayAge(); // 20
    26. son1.sayHello(); // Hello
    27. son2.sayHello(); // Hello

    4. 原型式继承

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

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

    选择性修改新对象属性

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

    1. let person = {
    2. firstname:'John',
    3. lastname:'foe',
    4. fullname:function(){
    5. return this.firstname+""+this.lastname
    6. }
    7. }
    8. let person1 = Object.create(person)
    9. let person2 = Object.create(person)
    10. //已有对象生成新对象,已有对象作为新对象的原型生成新实例
    11. //person1和person2都是创建出来的实例
    12. person1.firstname='Jane'
    13. console.log(person1.fullname())//jane foe
    14. console.log(person2.fullname())//john foe
    15. //体现缺点的代码:
    16. let person={
    17. firstname:'li',
    18. lastname:['green'],
    19. fullname:function(){
    20. return this.firstname+""+this.lastname
    21. }
    22. }
    23. let person1 = Object.create(person)
    24. let person2 = Object.create(person)
    25. person1.lastname.push('red')
    26. console.log(person1.fullname(),person2.fullname())//ligreen,red ligreen,red

    模拟object.create:

    1. function objectfactory(o){
    2. function F(){}
    3. F.prototype=o
    4. return new F()
    5. }

     5. 寄生式继承

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

    同样难以重用

    1. let person={
    2. firstname:'li',
    3. lastname:['green'],
    4. fullname:function(){
    5. return this.firstname+""+this.lastname
    6. }
    7. }
    8. function jisheng(o){
    9. let clone=Object.create(o)
    10. clone.newfunc=function(){
    11. console.log('haha')
    12. }
    13. return clone
    14. //千万别忘了返回值
    15. }
    16. let child1 = jisheng(person)
    17. let child2 = jisheng(person)
    18. console.log(child1.newfunc(),child2.newfunc())

    6. 组合寄生式继承

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

    基于object.create

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

    1. function inherit(subtype,supertype){
    2. let p = Object.create(supertype)
    3. p.constructor=subtype
    4. subtype.prototype=p
    5. }

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

    7. extends继承

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

    1. class Parent{
    2. constructor(age){
    3. this.age=age
    4. }
    5. s(){
    6. console.log('hello')
    7. }
    8. }
    9. class Son extends Parent{
    10. t(){
    11. console.log('you')
    12. }
    13. }
    14. let son1 = new Son(30)
    15. son1.s()
    16. son1.t()

  • 相关阅读:
    electron使用electron-builder macOS windows 打包 签名 更新 上架
    在Google Kubernetes集群创建分布式Jenkins(二)
    Soa: 一个轻量级的微服务库
    【JavaScript】设计模式
    UE4 剖析工具
    Github 2024-02-20开源项目日报 Top10
    Linux Harbor 镜像存储路径和迁移方式
    ps插件安装
    微信小程序基础
    物联网设备安全性:构建可信任的智能生态系统
  • 原文地址:https://blog.csdn.net/alicca/article/details/139703933