从0开始学习JavaScript--JavaScript对象继承深度解析

news2024/9/30 8:26:54

JavaScript中的对象继承是构建灵活、可维护代码的关键部分。本文将深入讨论JavaScript中不同的继承方式，包括原型链继承、构造函数继承、组合继承等，并通过丰富的示例代码展示它们的应用和差异。通过详细解释，大家可以更全面地了解如何在JavaScript中有效地使用对象继承。

原型链继承

原型链继承是JavaScript中最基本的继承方式。这里将深入研究原型链是如何构建的，以及如何通过原型链使对象实现继承。

function Animal(name) {
  this.name = name;
}

Animal.prototype.makeSound = function() {
  console.log('Some generic sound');
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('Woof! Woof!');
};

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.makeSound(); // 继承自Animal
myDog.bark();      // Dog自有方法

构造函数继承

构造函数继承通过在子类构造函数内部调用父类构造函数来实现继承。这种方式避免了原型链继承的一些问题。

function Animal(name) {
  this.name = name;
}

Animal.prototype.makeSound = function() {
  console.log('Some generic sound');
};

function Cat(name, color) {
  Animal.call(this, name);
  this.color = color;
}

const myCat = new Cat('Whiskers', 'Gray');
myCat.makeSound(); // Error: myCat.makeSound is not a function

组合继承

组合继承结合了原型链继承和构造函数继承的优点，是一种常用的继承方式。

function Animal(name) {
  this.name = name;
}

Animal.prototype.makeSound = function() {
  console.log('Some generic sound');
};

function Horse(name, color) {
  Animal.call(this, name);
  this.color = color;
}

Horse.prototype = Object.create(Animal.prototype);
Horse.prototype.constructor = Horse;

const myHorse = new Horse('Spirit', 'Brown');
myHorse.makeSound(); // 继承自Animal

原型式继承

原型式继承通过借助现有对象创建新对象，是一种简单的继承方式。

const animal = {
  makeSound: function() {
    console.log('Some generic sound');
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log('Woof! Woof!');
};

dog.makeSound(); // 继承自animal
dog.bark();      // dog自有方法

寄生式继承

寄生式继承是在原型式继承的基础上增强对象，可以在对象上添加额外的方法。

function createDog(name) {
  const dog = Object.create({
    makeSound: function() {
      console.log('Some generic sound');
    }
  });
  dog.name = name;
  dog.bark = function() {
    console.log('Woof! Woof!');
  };
  return dog;
}

const myDog = createDog('Buddy');
myDog.makeSound(); // 继承自原型对象
myDog.bark();      // 自有方法

寄生组合式继承

寄生组合式继承是在组合继承的基础上进行优化，避免了调用两次父类构造函数。

function inheritPrototype(subType, superType) {
  const prototype = Object.create(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

function Vehicle(name) {
  this.name = name;
}

Vehicle.prototype.drive = function() {
  console.log('Vroom!');
};

function Car(name, color) {
  Vehicle.call(this, name);
  this.color = color;
}

inheritPrototype(Car, Vehicle);

Car.prototype.honk = function() {
  console.log('Honk! Honk!');
};

const myCar = new Car('Toyota', 'Blue');
myCar.drive(); // 继承自Vehicle
myCar.honk();  // Car自有方法

ES6的Class继承

ES6引入了class语法糖，提供了更清晰、更面向对象的继承方式。

class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log('Some generic sound');
  }
}

class Bird extends Animal {
  constructor(name, color) {
    super(name);
    this.color = color;
  }

  fly() {
    console.log('I believe I can fly!');
  }
}

const myBird = new Bird('Tweety', 'Yellow');
myBird.makeSound(); // 继承自Animal
myBird.fly();       // Bird自有方法

Symbol与继承

Symbol是ES6引入的一种新的原始数据类型，可以用于创建唯一的标识符。在继承中，Symbol可以用于创建不可枚举的属性。

const animal = {
  name: 'Generic Animal',
};

const key = Symbol('sound');
animal[key] = 'Some generic sound';

const dog = Object.create(animal);
dog.bark = function() {
  console.log(this[key]);
};

dog.bark(); // 继承自animal的Symbol属性

混入（Mixin）

混入是一种通过将多个对象的属性和方法合并到一个新对象中的方式，实现了对象的复用。

const canSwim = {
  swim() {
    console.log('Swimming!');
  },
};

const canFly = {
  fly() {
    console.log('Flying!');
  },
};

function mixin(target, ...sources) {
  Object.assign(target, ...sources);
}

const duck = {};
mixin(duck, canSwim, canFly);

duck.swim(); // 来自canSwim
duck.fly();  // 来自canFly