joken-前端工程师

  :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::

在 ES5(ECMAScript 5)中,JavaScript 函数有几种继承方式,主要是通过原型链实现的。以下是常见的几种继承方式:

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

    • 原理:通过将子类的原型对象设置为父类的实例来实现继承。
    • 特点:可以继承父类的实例方法和属性,但无法实现多继承。
    • 示例:
      function Parent(name) {
        this.name = name;
      }
      
      Parent.prototype.greet = function() {
        console.log(`Hello, my name is ${this.name}`);
      };
      
      function Child(name, age) {
        this.age = age;
      }
      
      Child.prototype = new Parent();  // 原型链继承
      Child.prototype.constructor = Child;
      
      const childInstance = new Child('Alice', 30);
      childInstance.greet();  // 输出: Hello, my name is Alice
      
  2. 借用构造函数继承(Constructor Stealing / Classical Inheritance):

    • 原理:在子类的构造函数中调用父类的构造函数,使用 callapply 或者 bind 方法。
    • 特点:可以继承父类的实例属性,但不能继承父类的原型属性和方法。
    • 示例:
      function Parent(name) {
        this.name = name;
      }
      
      function Child(name, age) {
        Parent.call(this, name);  // 借用构造函数继承
        this.age = age;
      }
      
      const childInstance = new Child('Alice', 30);
      console.log(childInstance.name);  // 输出: Alice
      
  3. 组合继承(Combination Inheritance):

    • 原理:结合使用原型链继承和借用构造函数继承。
    • 特点:兼具原型链继承和借用构造函数继承的优点,是最常用的继承方式。
    • 示例:
      function Parent(name) {
        this.name = name;
      }
      
      Parent.prototype.greet = function() {
        console.log(`Hello, my name is ${this.name}`);
      };
      
      function Child(name, age) {
        Parent.call(this, name);  // 借用构造函数继承
        this.age = age;
      }
      
      Child.prototype = new Parent();  // 原型链继承
      Child.prototype.constructor = Child;
      
      const childInstance = new Child('Alice', 30);
      childInstance.greet();  // 输出: Hello, my name is Alice
      
  4. 原型式继承(Prototype Chain):

    • 原理:通过创建一个临时构造函数,将传入的对象作为这个构造函数的原型,实现对象的复制。
    • 特点:类似于浅拷贝,复制对象的属性,但是没有继承父类的构造函数。
    • 示例:
      const parent = {
        name: 'Parent',
        greet: function() {
          console.log(`Hello, my name is ${this.name}`);
        }
      };
      
      const child = Object.create(parent);
      child.name = 'Child';
      child.greet();  // 输出: Hello, my name is Child
      
  5. 寄生式继承(Parasitic Inheritance):

    • 原理:在原型式继承的基础上,增强对象,返回增强后的对象。
    • 特点:类似于工厂模式,创建一个函数来封装创建对象的过程。
    • 示例:
      function createChild(parent) {
        const child = Object.create(parent);
        child.age = 30;
        child.greet = function() {
          console.log(`Hello, my name is ${this.name}`);
        };
        return child;
      }
      
      const parent = {
        name: 'Parent'
      };
      
      const childInstance = createChild(parent);
      childInstance.greet();  // 输出: Hello, my name is Parent
      
  6. 寄生组合式继承(Parasitic Combination Inheritance):

    • 原理:结合借用构造函数继承和寄生式继承,通过构造函数来继承属性,并且通过原型链来继承方法。
    • 特点:避免了组合继承中重复调用父类构造函数的问题。
    • 示例:
      function Parent(name) {
        this.name = name;
      }
      
      Parent.prototype.greet = function() {
        console.log(`Hello, my name is ${this.name}`);
      };
      
      function Child(name, age) {
        Parent.call(this, name);  // 借用构造函数继承
        this.age = age;
      }
      
      Child.prototype = Object.create(Parent.prototype);  // 寄生式继承
      Child.prototype.constructor = Child;
      
      const childInstance = new Child('Alice', 30);
      childInstance.greet();  // 输出: Hello, my name is Alice
      

这些是在 ES5 中常见的 JavaScript 继承方式,每种方式都有其适用的场景和特点。选择合适的继承方式可以根据项目需求和设计模式来决定。

posted on 2024-07-14 15:16  joken1310  阅读(2)  评论(0编辑  收藏  举报