作者：IndermohanSing译者：前端小智来源：博客点赞再看，微信搜索【大招天下】，B站关注【前端小智】这不是大厂出身，而是有向上积极向上的心态。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...在这篇文章中，我们将讨论原型以及如何在JS中使用原型进行继承。我们还将看到原型方法与基于类的继承有何不同。继承继承是随着面向对象编程语言的引入而产生的编程语言的一个显着特征。这些语言大部分都是基于类的语言。在这里，类就像一个蓝图，对象是它的表示。也就是说，要创建一个对象，首先我们必须创建一个类，然后我们可以从一个类中创建任意数量的对象。想象一下，我们有一个代表智能手机的类。该类具有与其他智能手机相同的功能，例如拍照和GPS定位。以下是C++中对此类的描述：classSmartPhone{public:voidcaptureImages(){}}SmartPhonex;x.captureImages()我们创建了一个名为SmartPhone的类，它有一个名为capturePictures的方法来拍照。如果我们需要一个iPhone类，可以捕获图像和一些特殊功能，如FaceID扫描。这里有两个可能的解决方案：1.将捕获图像功能与其他常见的智能手机功能以及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')在控制台上打印电话对象："IPhone"__proto__{constructor:?SmartPhone(os)__proto__:Object}}现在，如果我们想在phone对象上使用一些方法，我们可以像这样在函数上使用.prototype属性：SmartPhone.prototype.isAndroid=function(){returnthis.os==='安卓'||'android'}再次创建手机对象时，打印手机对象如下：{os:"Android"__proto__{isAndroid:?()constructor:?SmartPhone(os)__proto__:Object}}对象的[[Prototype]]中的方法。简而言之，.prototype属性基本上就像给定构造函数创建的[[Prototype]]对象的蓝图。在.prototype属性/对象中声明的所有内容都将在对象的[[Prototype]]中弹出。事实上，如果你将SmartPhone.prototype与手机的[[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);//20在上面的示例中，我们创建了一个构造函数，该函数在[[Prototype]]上具有属性propA。当我们尝试读取它时，我们会在控制台中看到这个值。但是当我们尝试在对象本身上设置相同的属性时；JS在具有给定值的对象上创建一个新属性。现在，如果我们不能直接访问[[Prototype]]上的属性。值得注意的是，普通对象的[[Prototype]]链的末端是内置的Object.prototype。这就是为什么大多数对象共享许多方法，例如toString()。因为它们实际上是在Object.prototype上定义的。各种使用原型继承的方式在JS中，无论我们如何创建对象，都只有原型继承，但是这些方式之间还是有一些区别的，我们来看看：对象字面量JavaScript中创建对象最简单的方式是使用objectliterals:letobj={}如果我们在浏览器的控制台中打印obj，我们将看到以下内容：基本上，所有使用literalliterals创建的对象都继承了Object.prototype的属性。请注意，__proto__对象引用了创建它的构造函数。在这种情况下，构造函数属性指向Object构造函数。使用对象构造函数另一种不太常见的创建对象的方法是使用对象构造函数。JS提供了一个名为Object的内置构造方法来创建对象。让obj=newObject();此方法的工作方式与对象字面量相同。它继承了Object.prototype的属性。因为我们使用Object作为构造函数。Object.create方法使用这个辅助方法，我们可以像这样用[[Prototype]]创建一个对象：letSmartPhone={captureImages:function(){}}captureImages()这是在JS中使用继承最简单的方法之一。猜猜我们如何在没有任何[[Prototype]]引用的情况下创建对象？构造方法类似于JS运行时提供的对象构造函数。我们还可以创建自己的构造函数来创建一个适合我们需要的对象，如下所示：';};SmartPhone.prototype.isIOS=function(){returnthis.os==='iOS';};现在，我们要创建一个iPhone类，它的os属性值应该是“iOS”。它还应该有faceIDScan方法。首先，我们必须创建一个Iphone构造函数，我们应该在其中调用SmartPhone构造函数，如下所示：属性设置为“iOS”。之所以调用SmartPhone.call方法是因为我们需要改变this的值来引用Iphone。这类似于在面向对象的世界中调用父级的构造函数。接下来是，我们必须从SmartPhone构造函数继承方法。我们可以像这样使用Object.createfriend：Iphone.prototype=Object.create(SmartPhone.prototype);现在，我们可以使用.prototype为Iphone添加方法，如下所示：Iphone.prototype.faceIDScan=function(){};最后，我们可以像这样用Iphone创建一个对象：letx=newIphone();//调用继承方法console.log(x.isIOS())://trueES6类使用ES6，整个过程非常简单。我们可以创建类（它不像C++或任何其他基于类的语言中的类，只是原型继承之上的语法糖），然后从其他类派生新类。下面是我们如何在ES6中创建类：classSmartPhone{constructor(os){this.os=os;}isAndroid(){returnthis.os==='Android';}isIos(){返回this.os==='iOS';}};现在，我们可以创建一个从SmartPhone派生的新类，如下所示：classIphoneextendsSmartPhone{constructor(){super.call('iOS');}faceIDScan(){}}我们不调用SmartPhone.call，而是调用super.call。在内部，JavaScript引擎自动为我们做这件事。最后我们可以用Iphone创建一个对象如下letx=newIphone();x.faceIDScan();//调用继承方法console.log(x.isIos())://true这个ES6的例子是一样的和前面的构造方法的例子是一样的。但是阅读和理解起来要清晰得多。原文：https://javascript.info/proto...代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便在这里推荐给大家一个不错的BUG监控工具Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多，欢迎Star和完善，可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。
