关于前端:前端面试如果使用-JavaScript-原型实现继承

作者：Indermohan Sing
译者：前端小智
起源：blog

点赞再看，养成习惯
本文 GitHub https://github.com/qq44924588... 上曾经收录，更多往期高赞文章的分类，也整顿了很多我的文档，和教程材料。欢送Star和欠缺，大家面试能够参照考点温习，心愿咱们一起有点货色。

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

在这篇文章中，咱们将探讨原型以及如何在 JS 中应用它们进行继承。咱们还将会看到原型办法与基于类的继承有何不同。

继承

继承是编程语言的一个显著特色，随着面向对象编程语言的引入而呈现。这些语言大多是基于类的语言。在这里，类就像一个蓝图，对象是它的展示模式。就是说，要创立一个对象，首先咱们必须创立一个类，而后咱们能够从一个类创立任意数量的对象。

设想一下，咱们有一个示意智能手机的类。这个类具备像其余智能手机一样的能够拍照、有GPS定位等性能。上面是应用 c++ 来形容这样的一个类：

class SmartPhone {  public:  void captureImages() {}}SmartPhone x;x.captureImages()

咱们创立了一个名为SmartPhone的类，它有一个名为capturePictures的办法用来拍照。

如果咱们须要一个iPhone类，它能够捕获图像和一些非凡的性能，比方面部ID扫描。上面是两种可能的解决方案：

1.将捕捉图像性能与其余常见的智能手机性能，以及iPhone的特定性能一起重写到一个新类中。然而这种办法须要更多的工夫和精力，并且会引入更多的bug。

重用SmartPhone类中的性能，这就是继承的作用，继承也是重用其余类/对象中性能的一种形式。

这里是咱们如何从SmartPhone类中继承capturePictures办法，应用 c++ 实现如下：

class Iphone: public SmartPhone {  public:  void faceIDScan() {}}Iphone xx.faceIDScan()x.captureImages()

下面是一个简略的继承示例。然而，它表明继承能够使咱们以某种形式重用代码，从而使所生成的程序更不易出错，并且破费更少的工夫进行开发。

以下是对于类的一些重要信息：

继承该性能的类称为子类
被继承的类称为父类
一个类能够同时从多个类中继承
咱们能够具备多个继承级别。例如，类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关键字来调用它:

function SmartPhone(os) {  this.os = os}let phone = new SmartPhone('Android')

在控制台打印 phone 对象：

{  os: "IPhone"  __proto__{    constructor: ƒ SmartPhone(os)   __proto__: Object  }}

当初，如果咱们心愿在phone对象上有一些办法，咱们能够在函数上应用.prototype属性，如下所示:

SmartPhone.prototype.isAndroid = function () {  return this.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

值得注意的是，咱们还能够在构造函数中创立办法：

function ObjectA() {  this.methodA = function () {}}let firstObj = new ObjectA()console.log(firstObj)

这种办法的问题是当咱们初始化一个新对象时。所有实例都有本人methodA的正本。相同，当咱们在函数的原型上创立它时，对象的所有实例只共享方法的一个正本，显然应用原型的形式效率会过高。

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

当咱们拜访属性时这里产生了什么？

当咱们拜访一个属性以获取它时，会产生以下状况：

JS 引擎查找对象上的属性，如果找到了该属性，而后返回它。否则，JS 引擎将通过查看[[Prototype]]来查看对象的继承属性，如果找到该属性，则返回它，否则，它会查找 [[Prototype]]的[[Prototype]]。找到属性或没有[[Prototype]]时，该链完结，这意味着咱们曾经达到原型链的末端。

当咱们设置/创立属性时，JS 总是在对象自身上进行设置。即便[[Prototype]]链上存在雷同的属性，上面是一个例子：

function MyObject() {}MyObject.prototype.propA = 10; // 在原型上创立属性let myObject = new MyObject();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中创建对象的最简略办法是应用对象字面量：

let obj = {}

如果在浏览器的控制台中打印obj，咱们将看到以下内容:

基本上，所有用文字面量创立的对象都继承了Object.prototype的属性。

须要留神的是__proto__对象援用了创立它的构造函数。在这种状况下，constructor属性指向Object构造函数。

应用对象构造函数

另一种不太常见的创建对象的办法是应用对象构造函数。JS 提供了一个名为Object的内置构造函数办法来创建对象。

let obj = new Object();

这种办法的后果与对象字面量的形式雷同。它从Object.prototype继承属性。因为咱们应用Object作为构造函数。

Object.create 办法

应用此辅助办法，咱们能够创立一个带有[[Prototype]]的对象，如下所示：

let SmartPhone = {  captureImages: function() {}}let Iphone = Object.create(SmartPhone)Iphone.captureImages()

这是在 JS 中应用继承的最简略办法之一。猜猜咱们如何在没有任何[[Prototype]]援用的状况下创建对象？

构造方法

与 JS 运行时提供的对象构造函数类似。咱们还能够创立本人的构造函数，以创立适宜咱们需要的对象，如下所示：

function SmartPhone(os) {  this.os = os;}SmartPhone.prototype.isAndroid = function() {  return this.os === 'Android';};SmartPhone.prototype.isIOS = function() {  return this.os === 'iOS';};

当初，咱们想创立一个iPhone类，它应该有'iOS'作为它 os 属性的值。它还应该有faceIDScan办法。

首先，咱们必须创立一个Iphone构造函数，在其中，咱们应该调用SmartPhone构造函数，如下所示：

function Iphone() {   SmartPhone.call(this, 'iOS');}

这会将Iphone构造函数中的this.os属性设置为’iOS‘。

之所以调用SmartPhone.call办法，是因为咱们须要更改 this 值以援用Iphone。这相似于在面向对象的世界中调用父级的构造函数。

接下来的事件是，咱们必须从SmartPhone构造函数继承办法。咱们能够在此处应用Object.create敌人，如下所示：

Iphone.prototype = Object.create(SmartPhone.prototype);

当初，咱们能够应用.prototype为Iphone增加办法，如下所示：

Iphone.prototype.faceIDScan = function() {};

最初，咱们能够应用Iphone创立一个对象，如下所示：

let x = new Iphone();// calling inherited methodconsole.log(x.isIOS()):// true

ES6 class

应用ES6，整个过程非常简单。咱们能够创立类（它们与C ++或其余任何基于类的语言中的类不同，只是在原型继承之上的语法糖），而后从其余类派生新的类。

上面是咱们如何在ES6中创立类:

class SmartPhone {  constructor(os) {    this.os = os;  }  isAndroid() {    return this.os === 'Android';  }  isIos() {    return this.os === 'iOS';  }};

当初，咱们能够创立一个派生自SmartPhone的新类，如下所示：

class Iphone extends SmartPhone {   constructor() {     super.call('iOS');   }   faceIDScan() {}}

咱们不是调用SmartPhone.call，而是调用super.call。在外部，JavaScript引擎会主动为咱们执行此操作。

最初，咱们能够应用Iphone创立一个对象，如下所示

let x = new Iphone();x.faceIDScan();// calling inherited methodconsole.log(x.isIos()):// true

该ES6示例与先前的构造方法示例雷同。然而浏览和了解起来要洁净得多。

原文：https://javascript.info/proto...

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

交换

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。

继承