美文网首页
JavaScript 实现继承的多种方式

JavaScript 实现继承的多种方式

作者: 奋斗_登 | 来源:发表于2023-10-25 18:09 被阅读0次

    JavaScript 中有多种继承方式,每种方式都适合不同的场景和需求。以下是常见的 JavaScript 继承方式的总结:

    1. 原型链继承(Prototype Chain Inheritance)

    原型链继承是通过将子类的原型对象指向父类的实例来实现继承。
    子类继承了父类的属性和方法,但也可能共享属性。

    function Parent() {
      this.name = 'Parent';
    }
    
    Parent.prototype.greet = function() {
      console.log('Hello from Parent');
    }
    
    function Child() {
      this.name = 'Child';
    }
    
    Child.prototype = new Parent();
    
    const child = new Child();
    console.log(child.name); // 输出: 'Child'
    child.greet(); // 输出: 'Hello from Parent'
    

    2. 构造函数继承(Constructor Inheritance)

    构造函数继承是通过在子类构造函数中调用父类构造函数来实现继承。
    子类可以获得父类的属性,但不继承父类的原型方法。

    function Parent() {
      this.name = 'Parent';
    }
    
    Parent.prototype.greet = function() {
      console.log('Hello from Parent');
    }
    
    function Child() {
      Parent.call(this); // 在子类构造函数中调用父类构造函数
      this.name = 'Child';
    }
    
    const child = new Child();
    console.log(child.name); // 输出: 'Child'
    // child.greet(); // 这里会报错,因为 Child 不继承 Parent 的原型方法
    

    3. 组合继承(Combination Inheritance)

    组合继承是通过同时使用构造函数继承和原型链继承,可以继承父类的属性和方法,同时避免共享属性。

    function Parent() {
      this.name = 'Parent';
    }
    
    Parent.prototype.greet = function() {
      console.log('Hello from Parent');
    }
    
    function Child() {
      Parent.call(this); // 构造函数继承,继承属性
      this.name = 'Child';
    }
    
    Child.prototype = Object.create(Parent.prototype); // 原型链继承,继承方法
    Child.prototype.constructor = Child; // 修正子类的构造函数指向,以避免混淆
    
    const child = new Child();
    console.log(child.name); // 输出: 'Child'
    child.greet(); // 输出: 'Hello from Parent'
    

    4. ES6 Class 继承

    ES6 引入了 class 关键字,使继承更加直观和易于理解。你可以通过 extends 关键字来创建子类,使用 super 来调用父类的构造函数和方法。

    class Parent {
      constructor() {
        this.name = 'Parent';
      }
    
      greet() {
        console.log('Hello from Parent');
      }
    }
    
    class Child extends Parent {
      constructor() {
        super(); // 调用父类构造函数
        this.name = 'Child';
      }
    }
    
    const child = new Child();
    console.log(child.name); // 输出: 'Child'
    child.greet(); // 输出: 'Hello from Parent'
    

    5. Object.create 继承

    Object.create 方法允许你基于现有对象创建一个新对象,并可以指定新对象的原型。这也可以用来实现继承。

    const parent = {
      name: 'Parent',
      greet() {
        console.log('Hello from Parent');
      }
    };
    
    const child = Object.create(parent);
    child.name = 'Child';
    
    console.log(child.name); // 输出: 'Child'
    child.greet(); // 输出: 'Hello from Parent'
    
    

    6. 寄生式继承(Parasitic Inheritance)

    寄生式继承是通过在新对象上添加新的方法或属性,以增强其功能,并使用某个已有对象作为原型,创建一个继承自该原型的新对象。

    const parent = {
      name: 'Parent',
      greet() {
        console.log('Hello from Parent');
      }
    };
    
    function createChild(parentObj) {
      const child = Object.create(parentObj); // 使用 parentObj 作为原型创建一个新对象
      child.name = 'Child'; // 在新对象上添加或修改属性
      child.greet = function() { // 在新对象上添加新方法
        console.log('Hello from Child');
      }
      return child;
    }
    
    const child = createChild(parent);
    
    console.log(child.name); // 输出: 'Child'
    child.greet(); // 输出: 'Hello from Child'
    

    不同的继承方式适合不同的使用情况。在选择继承方式时,需要考虑代码结构、性能需求和可维护性。

    相关文章

      网友评论

          本文标题:JavaScript 实现继承的多种方式

          本文链接:https://www.haomeiwen.com/subject/ayieidtx.html