在这篇文章中，我们将讨论原型以及如何在JS中使用它们进行继承。我们还将看到原型方法与基于类的继承有何不同。继承继承是随着面向对象编程语言的引入而产生的编程语言的一个显着特征。这些语言大部分都是基于类的语言。在这里，类就像一个蓝图，对象是它的表示。也就是说，要创建一个对象，首先我们必须创建一个类，然后我们可以从一个类中创建任意数量的对象。想象一下，我们有一个代表智能手机的类。该类具有与其他智能手机相同的功能，例如拍照和GPS定位。下面是用c++来描述这样一个类的类：classSmartPhone{public:voidcaptureImages(){}}SmartPhonex;x.captureImages()我们创建了一个名为SmartPhone的类，它有一个名为capturePictures的方法用于拍照。如果我们需要一个iPhone类，可以捕获图像和一些特殊功能，如FaceID扫描。这里有两个可能的解决方案：将捕获图像功能与其他常见的智能手机功能以及iPhone特定的功能一起重写到一个新类中。但是这种方法需要更多的时间和精力，并且会引入更多的错误。在SmartPhone类中重用功能，这就是继承所做的，继承也是在其他类/对象中重用功能的一种方式。下面是我们如何继承SmartPhone类的capturePictures方法，用c++实现如下：然而，它表明继承允许我们以一种方式重用代码，从而使生成的程序更不容易出错并且花费更少的开发时间。以下是关于类的一些重要信息：继承功能的类称为子类被继承的类称为父类一个类可以同时从多个类继承我们可以有多层继承。比如C类继承自B类，B类继承自A类。值得注意的是类本身并没有做任何事情。在从类创建对象之前，实际上没有完成任何工作。我们将看到为什么它与JavaScript不同。什么是原型？在JS中，所有对象都有一个特殊的内部属性，基本上是对另一个对象的引用。此引用取决于对象的创建方式。在ECMAScript/JavaScript规范中，它表示为[[Prototype]]。由于[[Prototype]]链接到一个对象，该对象有自己的[[Prototype]]引用。原型链就是这样建立起来的。这个[[Prototype]]链是JS中继承的构建块。__proto__对象为了访问对象的[[Prototype]]，大多数浏览器都提供了__proto__属性。访问方法如下：obj.__proto__需要注意的是，这个属性并不是ECMAScript标准的一部分，它实际上是由浏览器实现的。获取和设置原型方法除了__proto__属性外，还有一个访问[[Prototype]]的标准方法：Object.getPrototypeOf(obj);相应地，也有类似的方法来设置对象的[[Prototype]]：Object.setPrototypeOf(obj,prototype);`[[Prototype]]`和`.prototype`属性[[Prototype]]只不过是用于表示对象原型的标准符号。许多开发人员将它与.prototype属性混淆，这是完全不同的东西，那么让我们看一下.prototype属性。在JS中，有很多种创建对象的方法。一种方法是使用构造函数并使用new关键字调用它，如下所示：functionSmartPhone(os){this.os=os}letphone=newSmartPhone('Android')在控制台上打印电话对象：{os:"IPhone"__proto__{constructor:?SmartPhone(os)__proto__:Object}}现在，如果我们想在phone对象上使用一些方法，我们可以像这样在函数上使用.prototype属性：SmartPhone.prototype.isAndroid=function(){returnthis.os==='Android'||'android'}再次创建phone对象时，打印phone对象如下：{os:"Android"__proto__{isAndroid:?()constructor:?SmartPhone(os)__proto__:Object}}我们可以在对象的[[Prototype]]中看到isAndroid()方法。简而言之，.prototype属性基本上就像给定构造函数创建的[[Prototype]]对象的蓝图。在.prototype属性/对象中声明的所有内容都将在对象的[[Prototype]]中弹出。事实上，如果你将SmartPhone.prototype与phone的[[Prototype]]进行比较，你会发现它们是相同的：console.log(Object.getPrototypeOf(phone)===SmartPhone.prototype);//true值得注意的是，我们也可以在构造函数中创建方法：所有实例都有自己的methodA副本。相反，当我们在它的原型上创建一个函数时，对象的所有实例只共享该方法的一个副本，显然使用原型会太高效。当我们访问一个属性时会发生什么？当我们访问一个属性来获取它时，会发生以下情况：JS引擎在对象上查找该属性，如果找到，则返回它。否则，JS引擎将通过查看[[Prototype]]来检查对象的继承属性，如果找到则返回它，否则，它会寻找[[Prototype]]的[[Prototype]]。当找到属性或没有[[Prototype]]时链结束，这意味着我们已经到达原型链的末尾。当我们设置/创建一个属性时，JS总是在对象本身上进行。尽管[[Prototype]]链上存在相同的属性，但这里有一个示例：functionMyObject(){}MyObject.prototype.propA=10;//在原型上创建一个属性letmyObject=newMyObject();console.log(myObject.propA);//[[Prototype]]上的属性//10myObject.propA=20;//对象的属性console.log(myObject.propA);//在上面的例子中，我们创建了一个构造函数，它在函数的[[Prototype]]上具有属性propA。当我们尝试读取它时，我们会在控制台中看到这个值。但是当我们尝试在对象本身上设置相同的属性时；JS在具有给定值的对象上创建一个新属性。现在，如果我们不能直接访问[[Prototype]]上的属性。值得注意的是，普通对象的[[Prototype]]链的末端是内置的Object.prototype。这就是为什么大多数对象共享许多方法，例如toString()。因为它们实际上是在Object.prototype上定义的。原型继承的各种使用方式在JS中，无论我们如何创建对象，都只有原型继承，但是这些方式有一些区别，我们来看看：Objectliterals:JavaScript中创建对象最简单的方式是使用objectliteralsQuantity:letobj={}如果我们在浏览器的控制台中打印obj，我们将看到如下内容：基本上，所有使用literalliterals创建的对象都继承了Object.prototype的属性。请注意，__proto__对象引用了创建它的构造函数。在这种情况下，构造函数属性指向Object构造函数。使用对象构造函数另一种不太常见的创建对象的方法是使用对象构造函数。JS提供了一个名为Object的内置构造方法来创建对象。letobj=newObject();此方法的结果与对象字面量相同。它继承了Object.prototype的属性。因为我们使用Object作为构造函数。(1)Object.create方法使用这个辅助方法，我们可以创建一个带有[[Prototype]]的对象，如下所示：这是在JS中使用继承的最简单方法之一。猜猜我们如何创建一个没有任何[[Prototype]]引用的对象？(2)构造器类似于JS运行时提供的对象构造器。我们还可以创建自己的构造函数来创建一个适合我们需要的对象，如下所示：};SmartPhone.prototype.isIOS=function(){returnthis.os==='iOS';};现在，我们要创建一个iPhone类，它应该将“iOS”作为其os属性的值。它还应该有faceIDScan方法。首先，我们必须创建一个Iphone构造函数，我们应该在其中调用SmartPhone构造函数，如下所示：functionIphone(){SmartPhone.call(this,'iOS');}这将设置this。os属性设置为“iOS”。之所以调用SmartPhone.call方法是因为我们需要改变this的值来引用Iphone。这类似于在面向对象的世界中调用父级的构造函数。接下来是，我们必须从SmartPhone构造函数继承方法。我们可以像这样使用Object.createfriend：Iphone.prototype=Object.create(SmartPhone.prototype);现在，我们可以使用.prototype为Iphone添加方法，如下所示：Iphone.prototype.faceIDScan=function(){};最后，我们可以创建一个使用Iphone的对象，如下所示：letx=newIphone();//callinginheritedmethodconsole.log(x.isIOS())://true(3)ES6类使用ES6，整个过程非常简单。我们可以创建类（它不像C++或任何其他基于类的语言中的类，只是原型继承之上的语法糖），然后从其他类派生新类。下面是我们如何在ES6中创建类：classSmartPhone{constructor(os){this.os=os;}isAndroid(){returnthis.os==='Android';}isIos(){returnthis.os==='iOS';}};现在，我们可以创建一个从SmartPhone派生的新类，如下所示：classIphoneextendsSmartPhone{constructor(){super.call('iOS');}faceIDScan(){}}我们不调用SmartPhone。调用，调用super.call代替。在内部，JavaScript引擎自动为我们做这件事。最后，我们可以像这样用Iphone创建一个对象：letx=newIphone();x.faceIDScan();//callinginheritedmethodconsole.log(x.isIos())://true这个ES6例子和前面的构造函数一样例子是一样的。但是阅读和理解起来要清晰得多。
