正文

揭秘原生JS的继承奥秘：掌握经典实现，轻松构建灵活的类层次结构

/0 浏览量
0328

JavaScript 是一种基于原型的编程语言，它没有传统的类和继承的概念。然而，通过巧妙地利用原型链，我们可以实现类似面向对象的继承。本文将深入探讨原生JS的继承机制，介绍几种经典实现方式，并展示如何构建灵活的类层次结构。

原型链简介

在JavaScript中，每个对象都有一个原型（prototype）属性，它指向另一个对象。如果这个原型对象也存在原型，那么它同样指向另一个对象，以此类推，形成所谓的原型链。当访问一个对象的属性或方法时，如果该对象自身没有这个属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到或者到达原型链的顶端（null）。

经典继承实现方式

1. 构造函数继承

构造函数继承是利用函数来模拟类的行为，通过在函数内部创建一个临时对象来传递属性和方法。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 继承Parent的属性
  this.age = age;
}

var child1 = new Child('Tom', 18);
console.log(child1.name); // Tom
console.log(child1.age); // 18
console.log(child1.colors); // ['red', 'blue', 'green']

2. 原型链继承

原型链继承通过设置子对象的__proto__属性来指向父对象的实例，实现属性和方法的共享。

function Parent() {
  this.name = 'Parent';
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child() {}

Child.prototype = new Parent();

var child1 = new Child();
console.log(child1.name); // Parent
child1.sayName(); // Parent

3. 组合继承

组合继承结合了构造函数继承和原型链继承的优点，通过调用父构造函数来继承属性，同时设置原型链来继承方法。

function Child(name, age) {
  Parent.call(this, name); // 继承Parent的属性
  this.age = age;
}

Child.prototype = new Parent(); // 继承Parent的方法
Child.prototype.constructor = Child; // 修正构造函数指向

4. 寄生式继承

寄生式继承通过创建一个封装函数来封装继承过程，并返回一个新对象。

function createAnother(original) {
  var clone = Object.create(original);
  clone.sayHi = function() {
    console.log('hi');
  };
  return clone;
}

var person = {
  name: 'Person',
  friends: ['Shelby', 'Court', 'Van']
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // hi

5. 寄生组合式继承

寄生组合式继承是寄生式继承和组合继承的结合，它避免了组合继承中两次调用父构造函数的问题。

function inheritPrototype(child, parent) {
  var prototype = Object.create(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

inheritPrototype(Child, Parent);

总结

通过以上几种经典实现方式，我们可以轻松地在JavaScript中构建灵活的类层次结构。在实际应用中，我们需要根据具体场景和需求选择合适的继承方式。掌握这些继承机制，有助于我们更好地利用JavaScript的特性，编写出更加高效、可维护的代码。

-- 展开阅读全文 --