JavaScript是一种支持面向对象编程的语言，而JavaScript中的对象是基于原型创建的。理解JavaScript中的原型面向对象编程是非常重要的。
什么是原型？
在JavaScript中，每个对象都有一个指向另一个对象的引用。这个被引用的对象就是原型。如果访问对象上的属性或方法时，该对象本身没有定义，则会在其原型上查找。
例如，当你在一个数组（arr）上调用 arr.push() 方法时，实际上是在 Array 对象的原型上调用 push() 方法。
原型链
每个JavaScript对象都有一个原型链。原型链是由每个对象的原型组成，并且最终以一个空对象为结束点。当我们要访问一个对象的属性或方法时，JavaScript会沿着原型链进行搜索，直到找到所需的属性或方法。
下面是一个简单的示例：
-------- ------------ - --------- - ----- - ------------------------- - ---------- - ------------------- -- ---- -- ---------------- -- ----- ------ - --- ---------------- ------------------ -- -- ------- -- ---- -- ------- ------------------------------------------- -- ---- ----------------------------------------------- -- -----
在这个例子中，我们创建了一个名为 Person 的构造函数，它接受一个参数 name 并将其保存在新对象上。我们还通过 Person.prototype 对象为每个 Person 实例添加了一个 sayHello() 方法。当我们使用 new Person('Alice') 创建新对象时，它将继承 Person.prototype 中定义的 sayHello() 方法。
继承
JavaScript中的原型继承是基于原型链的。这意味着一个对象可以从其原型中继承属性和方法。
下面是一个简单的继承示例：
-------- ------------ - --------- - ----- - ------------------------ - ---------- - --------------- ---- -- ---------------- -- -------- --------- ------ - ----------------- ------ ---------- - ------ - ------------- - -------------------------------- ------------------------- - ---- ---------------------- - ---------- - --------------- ----- -- ----------------- -- ----- --- - --- ----------- ------------ -------------- -- -- --- ---- -- ------ --------------- -- -- --- ----- -- ---------- --------------- ---------- ----- -- ---- --------------- ---------- -------- -- ----
在这个例子中，我们创建了两个构造函数： Animal 和 Dog。Animal 接受一个参数 name 并将其保存在新对象上。我们还通过 Animal.prototype 对象为每个 Animal 实例添加了一个 sayName() 方法。 Dog 构造函数接受两个参数 name 和 breed，并通过调用 Animal.call(this, name) 来在 Dog 实例中设置 name 属性。我们还通过 Object.create(Animal.prototype) 将 Dog.prototype 对象设置为原型继承自 Animal.prototype，从而使 Dog 继承 Animal 的所有方法和属性。
指导意义
理解JavaScript中的原型和原型链是一个重要的前端类技能，这对于构建高效、可维护和可扩展的代码非常重要。以下是一些指导意义：
减少重复代码：通过使用原型，您可以将属性和方法添加到一个对象，并让其他对象共享它们，从而减少代码的复制和粘贴。
优化性能：通过原型，您可以避免多个实例间创建相同的方法和属性。这样可以减少内存占用，提高性能。
3
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24462