正文

轻松掌握JS面向对象：揭秘继承的奥秘与应用实例

/0 浏览量
0331

引言

JavaScript 作为一种广泛使用的编程语言，其面向对象编程（OOP）特性是其核心组成部分之一。在 JavaScript 中，继承是一种允许一个对象继承另一个对象的属性和方法的技术，这对于代码复用和扩展至关重要。本文将深入探讨 JavaScript 中的继承机制，并通过实例展示如何应用。

一、什么是继承？

在面向对象编程中，继承是指一个对象（子类）继承另一个对象（父类）的属性和方法。这样，子类可以继承父类的所有特性，同时还可以添加自己的特性。

二、JavaScript 中的继承机制

JavaScript 中的继承主要依赖于原型链（Prototype Chain）。每个 JavaScript 对象都有一个原型对象，当访问一个对象的属性或方法时，如果该对象没有这个属性或方法，那么它会沿着原型链向上查找，直到找到为止。

1. 原型链继承

这是最简单的继承方式，通过将子类的原型设置为父类的实例来实现。

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

function Child() {
  this.age = 18;
}

Child.prototype = new Parent();

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

2. 构造函数继承

通过在子类中调用父类的构造函数来实现继承。

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

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

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

3. 原型式继承

使用 Object.create() 方法创建一个新对象，将其原型设置为父对象。

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

var child1 = Object.create(Parent.prototype);
child1.name = 'Child';
console.log(child1.name); // Child

4. 寄生式继承

在原型式继承的基础上，增加一些自己的逻辑。

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

var parent = {
  name: 'Parent',
  friends: ['John', 'Jack']
};

var child = createAnother(parent);
child.sayHi(); // hi
console.log(child.name); // Parent
console.log(child.friends); // [ 'John', 'Jack' ]

5. 寄生组合式继承

结合寄生式继承和构造函数继承的优点。

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);
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

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

三、继承的应用实例

以下是一个使用继承实现简单购物车的实例：

function Product(name, price) {
  this.name = name;
  this.price = price;
}

Product.prototype.discount = function(discount) {
  this.price *= (1 - discount);
};

function Cart() {
  this.products = [];
}

Cart.prototype.addProduct = function(product) {
  this.products.push(product);
};

Cart.prototype.totalPrice = function() {
  return this.products.reduce((total, product) => total + product.price, 0);
};

// 继承 Product
function Book(name, price, author) {
  Product.call(this, name, price);
  this.author = author;
}

Book.prototype = Object.create(Product.prototype);
Book.prototype.constructor = Book;

// 继承 Cart
function BookCart() {
  Cart.call(this);
}

BookCart.prototype = Object.create(Cart.prototype);
BookCart.prototype.constructor = BookCart;

var book = new Book('JavaScript: The Good Parts', 39.99, 'Douglas Crockford');
var bookCart = new BookCart();
bookCart.addProduct(book);
console.log(bookCart.totalPrice()); // 39.99

结语

通过本文的介绍，相信你已经对 JavaScript 中的继承有了更深入的了解。在实际开发中，合理运用继承机制可以大大提高代码的可读性和可维护性。希望本文能帮助你轻松掌握 JavaScript 面向对象编程中的继承奥秘。

-- 展开阅读全文 --