解决 JS 对象中继承性问题之方式一:通过原型链继承来解决继承问题

Ⅰ、继承问题:

1、什么是继承?
答:子类去继承父类的东西,称之为继承;
如:子类继承父类的属性或方法等;

2、常见的继承方式有哪些?
答:继承方式有五种:
其一、原型链继承;
其二、构造函数继承(也称 call 继承);
其三、拷贝继承;
其四、组合继承(某一种或多种继承方式的组合);
其五、寄生式组合继承;

Ⅱ、五大继承的优缺点:

1、原型链继承的优缺点:

其一、优点:
A、实现相对简单;
B、通过子类实例可以直接访问父类原型链上和实例上的成员(即:实现了继承);

其二、缺点:
A、子类实例修改引用类型值,会影响其他子类实例(但若不是引用类型就没有问题);

2、构造函数继承 (也称为 call 继承) 的优缺点:

其一、优点:
A、实现相对简单;
B、解决了原型链继承的缺点(即:子类实例修改引用类型值,不会影响其他子类实例);
C、可以在子类实例中直接向父类构造函数传参;

其二、缺点:
A、无法继承父类原型上的成员与方法;

3、拷贝继承的优缺点:

其一、优点:
A、可以在子类中直接给父类传参;
B、通过子类实例可以直接访问父类原型链和实例的成员;

其二、缺点:
A、拷贝继承在循环过程中比较消耗内存;

4、组合继承的优缺点:

其一、优点:
A、可以在子类实例中直接向父类构造函数传参;
B、通过子类实例可以直接访问父类原型链和实例的成员;

其二、缺点:
A、执行父类函数中两次的逻辑; (即:代码性能不很好,因为有些成员或方法在父类的原型链上又重新加载了一次);

5、寄生式组合继承的优缺点:

其一、优点:
A、可以在子类实例中直接向父类构造函数传参;
B、通过子类实例可以直接访问父类原型链和实例的成员;
C、解决了组合继承的缺点(即:执行父类函数中两次的逻辑),代码的性能更优化;

缺点:
A、缺点是有的,但暂时还没了解到;

Ⅲ、原型链继承的实现过程及结果展示:

1、原型链继承的实现过程的代码如下:

     // 待继承的父类构造函数,名称为:Animal;
	  function Animal() {
    
    
      this.superType = '动物';        // 存在属性:'superType',其值是字符串;
      this.name = name || 'animal';   // 在没传 name 值的情况下,默认 name 的值为:animal;
      this.hobby = ['sleep', 'play']; // 在父类中有一个引用类型(数组)的属性值为 'hobby';
      this.cry = function () {
    
            // 父类上的 'cry()' 方法;
        console.log(this.name + " is crying");
      }
    }
    

    // 父类原型对象上的成员方法; (在原型上添加方法,表示:所有父类的实例对象都可以调用 eat() 方法;)
    Animal.prototype.eat = function () {
    
     
      console.log(this.name + "is eating");
    }


    // 子类的构造函数,名称为:Cat;
    function Cat(name) {
    
    
      this.name = name;
    }


    // 修改子类的原型指向为:父类实例;
    Cat.prototype = new Animal();
    // 即:将子类的原型 'Cat' 修改成父类的实例 'new Animal()';   
    // (设置后,子类的实例 c 的原型对象本质上就变成了 'Animal()' 的实例对象;)


	// 将子类原型对象的 constructor 属性指向子类的构造函数;
    Cat.prototype.constructor = Cat; 
    // 因为:在重新赋值后的 'Cat.prototype.constructor' 是不存在的,因此需要重新赋值;
    // (即:该语句的作用:在 Cat 原型上再加一个 constructor 属性值,并指向 Cat;)

    
    

    var c = new Cat('maomi');   // new 一个子类的实例 c;
    var c2 = new Cat('maomi2'); // new 一个子类的实例 c2;


    console.log(c.superType); 
    // 此时的输出结果为:动物;                             
    // 此时子类实例就能访问到父类身上的成员或方法;


    c.cry();                  
    // 此时的输出结果为:maomi is crying;


    c.eat();                  
    // 此时的输出结果为:maomi is eating;
    // 此时子类实例就能访问到父类原型对象上的方法;


    console.log(c.constructor);
    // 此时的输出结果为:
    // ƒ Cat(name) {
    
    
    //   this.name = name;
    // }
    // 即:此时的情况就是在加上重新赋值的语句 'Cat.prototype.constructor = Cat;' 后,再访问  'console.log(c.constructor);' 而输出的结果;



    // 但若是在代码中并没有重新赋值的语句 'Cat.prototype.constructor = Cat;'
    // 而若要访问时(console.log(c.constructor);),此时的输出结果是:
    // ƒ Animal() {
    
    
    //   this.superType = '动物'; 
    //   this.name = name || 'animal';  
    //   this.hobby = ['sleep', 'play'];…



// 到现在为止都是展示出来了优点:
//      A、实现相对简单; 
//      B、通过子类实例可以直接访问父类原型链上和实例上的成员(即:实现了继承);



	c.hobby.push('eat');    
	// 在父类实例中的 hobby 数组属性中添加 'eat' 值;   
	// (而所希望的是:添加的 'eat' 值仅影响 c 实例的 hobby 值; 而不影响其它实例的 hobby 值);

    console.log(c2.hobby);
    // 此时的输出结果为:'['sleep', 'play', 'eat']';   
    // 此时就暴露出其缺点:某一个子类实例对父类实例中某一个引用类型进行修改,就会将其结果修改,且会影响到其他实例;

   
// 存在的缺点:
//       A、子类实例修改引用类型值,会影响其他子类实例(但若不是引用类型就没有问题);



2、输出结果的页面展示如下:
在这里插入图片描述

Ⅳ、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!

其二、如果关于 JS 对象中继承方式不详细,请参考如下JS 对象中五大继承 (原型链继承、构造函数继承(call)、拷贝继承、组合继承、寄生式组合继承) 地址文章:https://blog.csdn.net/weixin_43405300/article/details/121942780

おすすめ

転載: blog.csdn.net/weixin_43405300/article/details/122112166