web前端tips：js继承——原型式继承

上篇文章给大家分享了 js继承中的 组合继承

web前端tips：js继承——组合继承

今天给大家分享一下 js 继承中的 原型式继承

原型式继承

JavaScript的原型式继承是一种基于对象的继承方式，通过复制一个对象的属性和方法来创建一个新对象，并将原对象作为新对象的原型。这种继承方式可以通过Object.create()方法来实现。

基本步骤：

1. 创建一个原型对象 parent，作为新对象的原型。原型对象可以是任意一个已有的对象。

2. 创建一个新对象 child，然后使用 Object.create() 方法创建一个新对象，并将原型对象作为参数传入。

3. 可选地，可以为新对象添加/修改属性和方法。

// 1
var parent = {
  name: "Parent",
  sayHello: function() {
    console.log("Hello, " + this.name + "!");
  }
};

// 2
var child = Object.create(parent);
child.name = "Child";

// 3
child.age = 10;
child.sayAge = function() {
  console.log("I am " + this.age + " years old.");
};

// 测试
child.sayHello(); // 输出 "Hello, Child!"
child.sayage(); // 输出 "I am 10 years old."

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

通过这种方式，子对象 child 拥有了自己的变量 age 和方法 sayAge ，同时也继承了父对象 parent 的属性和方法。

需要注意的是，子对象的属性和方法会覆盖原型对象的同名属性和方法。在访问属性或方法时，会先在子对象中查找，如果找不到再沿着原型链向上查找。因此，当我们调用child.sayHello()时，会输出"Hello, Child"，而不是"Hello, Parent"。

优点

• 灵活性：原型式继承不需要定义构造函数，可以在不创建构造函数的情况下快速创建对象并继承属性和方法。这种灵活性使得原型式继承适用于简单的继承需求。

• 简单易懂：原型式继承的概念相对简单，容易理解和实现。它是基于JavaScript的原型机制，与JavaScript的对象模型紧密相关。

• 可扩展性：通过修改原型对象，可以动态地为所有继承自该原型的对象添加新的属性和方法。这使得原型式继承具有较高的可扩展性。

缺点

• 共享原型：原型式继承是一种浅拷贝的方式，即新对象与原型对象共享同一个原型。如果修改了原型对象的属性或方法，所有继承自该原型的对象都会受到影响。这可能导致意外的副作用，特别是在多个对象之间共享原型时。

• 无法实现多级继承：原型式继承无法直接实现多级继承，即无法直接继承父对象的原型。如果需要实现多级继承，可能需要使用其他继承方式，如组合继承或类继承。

• 难以追踪继承关系：由于原型式继承是基于原型链的，继承关系可能变得复杂且难以追踪。当对象之间存在多层继承关系时，可能需要花费更多的时间和精力来理清继承关系。

总的来说，原型式继承是一种简单而灵活的继承方式，适用于简单的继承需求。然而，它也有一些限制和潜在的问题，需要在使用时仔细考虑和处理。对于更复杂的继承需求，可能需要考虑其他继承方式。

结语

牵手 持续为你分享各类知识和软件 ，欢迎访问、关注、讨论 并留下你的小心心❤