若是使用 JavaScript 原型实现继承

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

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

在这篇文章中，咱们将讨论原型以及如何在 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。

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

原型是什么？

在 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]]上的属性
// 10

myObject.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 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/proto...

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

---

交流

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