化茧成蝶：揭开JavaScript继承的奥秘

前端

2023-09-05 08:23:04

JavaScript中的继承

JavaScript中的继承是基于原型的。原型是一个对象，它包含了另一个对象的属性和方法。当一个对象从另一个对象继承时，它就会获得该对象的原型中的所有属性和方法。

原型继承是通过原型链实现的。原型链是一个对象到其原型的链接列表。当一个对象访问一个属性或方法时，JavaScript会沿着原型链向上查找，直到找到该属性或方法。

子类和父类

在继承关系中，子类是从父类继承而来的。子类可以访问父类中的所有属性和方法，并且还可以添加自己的属性和方法。

在JavaScript中，子类可以通过两种方式创建：

使用Object.create()方法
使用class

使用`Object.create()`方法创建子类

Object.create()方法接受两个参数：

父类的原型
一个包含子类自身属性和方法的对象

// 创建父类
const Parent = {
  name: 'Parent',
  sayHello() {
    console.log('Hello from Parent!');
  },
};

// 使用Object.create()方法创建子类
const Child = Object.create(Parent, {
  name: {
    value: 'Child',
  },
  sayGoodbye() {
    console.log('Goodbye from Child!');
  },
});

// 访问子类属性和方法
console.log(Child.name); // Child
Child.sayHello(); // Hello from Parent!
Child.sayGoodbye(); // Goodbye from Child!

使用`class`关键字创建子类

class关键字是ES6中引入的，它提供了更简洁的方式来创建类和子类。

// 创建父类
class Parent {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log('Hello from Parent!');
  }
}

// 使用class关键字创建子类
class Child extends Parent {
  constructor(name) {
    super(name);
  }

  sayGoodbye() {
    console.log('Goodbye from Child!');
  }
}

// 创建子类实例
const child = new Child('Child');

// 访问子类属性和方法
console.log(child.name); // Child
child.sayHello(); // Hello from Parent!
child.sayGoodbye(); // Goodbye from Child!

重写和重载

重写（覆盖）

当子类中定义了一个与父类中同名的属性或方法时，就会发生重写。重写允许子类用自己的属性或方法来覆盖父类中的属性或方法。

// 父类
class Parent {
  sayHello() {
    console.log('Hello from Parent!');
  }
}

// 子类
class Child extends Parent {
  sayHello() {
    super.sayHello();
    console.log('Hello from Child!');
  }
}

// 创建子类实例
const child = new Child();

// 调用子类的方法
child.sayHello(); // Hello from Parent!
                  // Hello from Child!

重载

当子类中定义了一个与父类中同名但参数不同的方法时，就会发生重载。重载允许子类为同一个方法提供不同的实现。

// 父类
class Parent {
  sayHello(name) {
    console.log(`Hello ${name}!`);
  }
}

// 子类
class Child extends Parent {
  sayHello(name, age) {
    super.sayHello(name);
    console.log(`I am ${age} years old!`);
  }
}

// 创建子类实例
const child = new Child();

// 调用子类的方法
child.sayHello('John'); // Hello John!
child.sayHello('John', 30); // Hello John!
                            // I am 30 years old!

多态

多态是指对象可以有多种形态。在JavaScript中，多态可以通过重写和重载来实现。

多态的优点是它使得代码更灵活、更易于维护。例如，如果我们需要创建一个可以对不同类型的对象执行相同操作的函数，我们可以使用多态来实现。

function printName(object) {
  console.log(object.name);
}

// 创建不同类型的对象
const person = {
  name: 'John Doe',
};

const animal = {
  name: 'Fluffy',
};

// 调用printName()函数
printName(person); // John Doe
printName(animal); // Fluffy