前端面试】如果使用 JavaScript 原型实现继承

墨蓝 2022-12-21 10:57 101阅读 0赞

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

> **点赞再看，养成习惯**
> 
> **本文 `GitHub` [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。**

**最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。**

github 地址：[https://github.com/qq449245884/vue-okr-tree][https_github.com_qq449245884_vue-okr-tree]

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

## 继承 ##

继承是编程语言的一个显著特征，随着面向对象编程语言的引入而出现。这些语言大多是基于类的语言。在这里，类就像一个蓝图，对象是它的展现形式。就是说，要创建一个对象，首先我们必须创建一个类，然后我们可以从一个类创建任意数量的对象。

想象一下，我们有一个表示智能手机的类。这个类具有像其他智能手机一样的可以拍照、有GPS定位等功能。下面是使用 c++ 来描述这样的一个类：

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

我们创建了一个名为`SmartPhone`的类，它有一个名为`capturePictures`的方法用来拍照。

如果我们需要一个`iPhone`类，它可以捕捉图像和一些特殊的功能，比如面部ID扫描。下面是两种可能的解决方案：

1.将捕获图像功能与其他常见的智能手机功能，以及iPhone的特定功能一起重写到一个新类中。但是这种方法需要更多的时间和精力，并且会引入更多的bug。

1.  重用`SmartPhone`类中的功能，这就是继承的作用，继承也是重用其他类/对象中功能的一种方式。

这里是我们如何从`SmartPhone`类中继承`capturePictures`方法，使用 c++ 实现如下：

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

上面是一个简单的继承示例。 但是，它表明继承可以使我们以某种方式重用代码，从而使所生成的程序更不易出错，并且花费更少的时间进行开发。

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

*  继承该功能的类称为子类
 *  被继承的类称为父类
 *  一个类可以同时从多个类中继承
 *  我们可以具有多个继承级别。 例如，类C继承自类B，而类B继承自类A

值得注意的是，类本身并没有做任何事情。在从类创建对象之前，实际上没有完成任何工作。我们将看到它为什么不同于JavaScript。

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

## 原型是什么？ ##

在 JS 中，所有对象都有一个特殊的内部属性，该属性基本上是对另一个对象的引用。 此引用取决于对象的创建方式。 在 [ECMAScript/JavaScript规范][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`的副本。相反，当我们在函数的原型上创建它时，对象的所有实例只共享方法的一个副本，显然使用原型的方式效率会过高。

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

## 当我们访问属性时这里发生了什么？ ##

当我们访问一个属性以获取它时，会发生以下情况：

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

当我们设置/创建属性时，JS 总是在对象本身上进行设置。 即使`[[Prototype]]`链上存在相同的属性，下面是一个例子：

function MyObject() {}
    MyObject.prototype.propA = 10; // 在原型上创建属性
    
    let myObject = new MyObject();
    console.log(myObject.propA); // [[Prototype]]上的属性
    // 10
    
    myObject.propA = 20; // 对象的属性
    console.log(myObject.propA);
    // 20

在上面的示例中，我们创建了一个构造函数，该函数的`[[Prototype]]`上具有属性`propA`。 当我们尝试对其进行读取操作时，会在控制台中看到该值。 但是，当我们尝试在对象本身上设置相同的属性时；JS 使用给定值在对象上创建一个新属性。 现在，如果我们不能直接访问`[[Prototype]]`上的属性。

值得注意的是，普通对象的`[[Prototype]]`链的末尾是内置的`Object.prototype`。 这就是为什么大多数对象共享许多方法（例如`toString()`）的原因。 因为它们实际上是在`Object.prototype`上定义的。

## 使用原型继承的各种方法 ##

在 JS 中，无论我们如何创建对象，只有原型继承，但这些方式还有一些区别，来看看：

#### 对象字面量 ####

在JavaScript中创建对象的最简单方法是使用对象字面量：

let obj = {}

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center]

基本上，所有用文字面量创建的对象都继承了`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 运行时提供的对象构造函数相似。 我们还可以创建自己的构造函数，以创建适合我们需求的对象，如下所示：

现在，我们想创建一个`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 method
    console.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 method
    console.log(x.isIos()):
    // true

该ES6示例与先前的构造方法示例相同。 但是阅读和理解起来要干净得多。

--------------------

原文：https://javascript.info/prototype-inheritance

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

--------------------

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[https_github.com_qq449245884_vue-okr-tree]: https://github.com/qq449245884/vue-okr-tree
[Link 1]: https://github.com/qq449245884/xiaozhi/issues/210
[ECMAScript_JavaScript]: https://www.ecma-international.org/ecma-262/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/9d399ebad01c489688fee85cef068587.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi