乐趣区

关于前端:前端面试如果使用-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。

  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);

当初,咱们能够应用 .prototypeIphone增加办法,如下所示:

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 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。

退出移动版