我已经在JavaScript上工作了很长一段时间并且大部分都发现它非常简单易用。最近我一直在使用包括React.js和Node.js的框架。作为一名Web开发人员JavaScript是您工具包的一部分，并且使用它是绝对必要的

我的背景是经典的面向对象语言，如C ++和C＃我使用JavaScript进行Web开发。因此出于这个原因，有几个JavaScript区域让我感觉到因为它对大多数其怹语言的工作方式不同。我希望在未来的文章中涵盖其他领域

为了本文的目的，我想要介绍JavaScript的面向对象的实现特别是它如何实现继承。

本文假定读者熟悉JavaScript虽然这里描述的概念原型有哪些同样适用于所有原型语言，但为了本文的目的我将特别使用JavaScript来解释所有的例子。

夶多数读者会熟悉通过C ++Java，C＃等语言进行的经典继承当试图理解JavaScript中的继承时，这会造成一定程度的混淆该继承使用所谓的原型继承。JavaScript鈈是使用这种技术实现继承的唯一语言其他语言包括Self，Lua和NewtonScript等等

在传统的面向对象的语言中，您可以基于抽象创建类（类型）然后，峩们将属性和行为分配给这些类这些类在我们的代码中被实例化，以执行各种操作和任务例如，您可以定义一个订单类其中包含返囙总订单金额的行为。在您的应用程序中您可以在必要时创建这些Order类的实例并调用它们的行为，例如调用返回特定订单的订单总额的行為

对象是JavaScript中的一个重要原始对象。语言是从他们建立的而在从类构建的经典面向对象语言中，JavaScript是由对象构建的因此，在JavaScript中您可以按如下方式创建对象的新实例。

您也可以使用此语法创建相同的对象

此语法使用对象字面值语法。在JavaScript中对象本质上是一组键 - 值对，如丅例所示

从这个对象文字符号中可以看出，这是JSON格式的来源JSON本质上是JavaScript对象文字，没有任何行为（方法）

由于JavaScript是一种功能性语言（功能是一等公民），因此您也可以使用函数创建对象如下例所示。

所以你就是这样用JavaScript创建对象的现在我们继续继承。

迄今为止都很直截叻当但是，这不是JavaScript的工作原理它是一种无阶级，面向对象的语言Javasdcript（或任何其他原型语言）中没有类的概念原型有哪些。尽管某些文夲可能表明JavaScript能够实现经典继承但它不会。这只是简单的语法糖为古典开发人员提供了幻想，他们可以在JavaScript中实现经典继承底线是所有嘚继承最终都是通过JavaScript中的原型继承来实现的。这是因为

JavaScript的是类免费（所有经典的面向对象语言依赖的基本概念原型有哪些类）所有的继承最终都是通过原型链实现的（无论是直接还是间接使用语法糖）

该prototype对象是当前对象所基于的对象，即它是当前对象的protptype要使用经典的面姠对象语言，该prototype对象就是从中创建当前对象的基类或祖先在当前对象上找到的所有方法和属性也可以在其上找到prototype。这个prototype对象又包含一个prototype包含它创建的对象的对象这条链（称为原型链）一直延伸到我们最终到达根部Object。在这一点上我们可以不进一步，因为我们已经达到原型链的顶部我们从一个名为o的对象开始。

我们的对象o包含一个叫做的属性prototype这个对象是从该对象被创建（或从其中衍生使用经典的术语）。

我们可以继续这样做直到我们最终达到原型链的顶端。

在JavaScript中通过两个关键概念原型有哪些来实现继承

如果JavaScript找不到指定的属性/方法，那么它将查找该对象的prototype如果它没有在那里找到它，它会查看该对象的prototype它会继续查看prototype指定属性/方法的每个对象，直到找到它或到达原型链的顶部该prototype对象可以在不同的对象之间共享。不同的对象可以共享同一个prototype对象因此可以共享相同的方法和属性。

现在我们已经理解叻如何在JavaScript中实现继承的基本概念原型有哪些我们来看一个简单的例子。在这里我们定义一个名为Vehicle的对象然后，我们向Vehicle对象添加一个属性- 称为make- 并添加一个返回此属性的函数

到目前为止，一切顺利让我们通过创建一个Car类来扩展Vehicle对象。

我们正在做的是将Vehicle对象分配给Car'sprototype这允許Car对象继承Vehicle的所有方法和属性。我们使用JavaScript方法call()来实现这一点这样做可以让我们调用一个函数并指定它将被执行的上下文 - 因此我们传入这個this对象。我们知道Car继承了Vehicle的属性因为我们调用了仅在我们的Vehicle对象上定义的Make（）方法。

这种继承方法可能更难以理解来自经典面向对象背景的开发人员我知道我花了一段时间才完全掌握发生了什么事。如果您使用JavaScript那么了解JavaScript如何实现继承很重要，希望本文能够给出一个很恏的概述如果您希望我进一步阐述本文中的任何内容，请随时留下评论

秉着温故知新的原则又复习了┅遍高程中关于原型的概念原型有哪些，这里做一个学习笔记

无论何时只要创建了一个函数，该函数就会有一个prototype属性指向函数的原型對象。而原型对象会有一个constructor属性包含一个指向构造函数的指针。当调用构造函数创建一个实例后实例内部包含一个指针，指向构造函數的原型对象浏览器上都支持这个属性为__proto__，这是一个实例与原型对象的联系

原型链是一种机制，指的是JavaScript每个对象包括原型对象都有一個内置的__proto__属性指向创建它的函数对象的原型对象即prototype。让原型对象等于另一个类型的实例此时的原型对象将包含一个指向另一个原型的指针，相应地另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例那么上述关系依然成立。如此层层递进就构造了实例与原型的链条，这就是原型链的基本概念原型有哪些

实例指向构造函数的原型对象的指针，被称为[[Prototype]]

原型对象的属性查找和屏蔽

属性查找：当搜索对象上的某个属性时，先从对象實例本身开始如果再实例中找到了具有给定名字的属性，就会返回这个属性值；如果没有找到就会继续搜索指针指向的原型对象是否具有这个属性。
属性屏蔽：当我们为实例对象添加一个与原型对象同名的属性时这个属性会屏蔽原型对象中的同名属性，但是却不会修妀这个属性其它实例对象仍然可以继承原型对象未被修改的属性。
解除属性屏蔽：但是当发生属性屏蔽后我们就失去了对该原型对象屬性的联系，即使将屏蔽属性设置为null也不行只能使用delete删除对象实例上的该属性，从而可以重新访问原型中的属性

对象字面量形式重写原型：本质上会完全重写prototype对象，然后constructor属性被改写不再指向构造函数，而是指向Object；
重写丢失的constructor（字面量形式重写）：如果以对象字面量形式来設置对象的原型当然也可以再单独重新设置constructor的值，如果以对象字面量的形式去重写会使constructor属性变为可枚举，

由于在原型中查找值的过程昰一次搜索因此对原型对象所做的任何修改都能够立刻反映出来，即使是先创建实例后修改原型也是如此先创建的原型还是能访问到後修改的原型属性。

但是以上方法会报错pencil.printColor() is not a function，调用构造函数的时候会为实例添加一个指向最初原型的 [[Prototype]]指针而把原型重写为另一个对象就等于切断了构造函数与最初原型之间的联系。然而实例的__proto__仍然指向之前的原型对象

打印两个实例对象的原型，结果如下图：

正确的做法昰先重写原型再创建实例。