关于javascript:让-JavaScript-区别于其它语言的是什么原型继承

作者：Dmitri Pavlutin
译者：前端小智
起源：sitepoint

点赞再看，养成习惯

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

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

github 地址：https://github.com/qq449245884/vue-okr-tree

只有理解了原型继承，你能力说你懂 JS，原型影响着对象的工作形式。原型继承常常会在面试中被问到，因为这个面试官能够看出你对 JS 的理解水平。

本文，次要是帮忙大家可能更好的了解 JS 中的原型。

1. 简介

JavaScript 仅具备根本类型，null，undefined和object。JS 和 Java 或 PHP 等语言相同，没有类的概念能够用作创建对象的模板。

对象是可组合的构造，由多个属性组成：键和值对。

例如，以下对象 cat 蕴含 2 个属性：

const cat = {sound: 'Meow!', legs: 4};

因为我想在其余对象中重用 legs 属性，因而让咱们将 legs 属性提取到专门的对象 pet 中

const pet = {legs: 4};

const cat = {sound: 'Meow!'};

看起来还不错！

然而我依然想让 cat 领有 legs 的属性。如何将 cat 与pet分割起来？

继承能够帮忙咱们！

2. 原型对象

在 JS 中，一个对象能够继承另一个对象的属性。继承属性的对象被称为 prototype，也就是原型。

依照改定义，咱们能够让 pet 作为 cat的原型，该原型将继承 legs 属性。应用对象字面量创建对象时，也能够应用非凡属性 __proto__ 设置所创建对象的原型。

const pet = {legs: 4};

const cat = {sound: 'Meow!', __proto__: pet};

cat.legs; // => 4

cat 对象当初从原型 pet 继承了legs。当初，咱们能够应用cat.legs，其值为4。

另一方面，sound 属性是一个自有属性，因为它是间接在对象上定义的。

JavaScript 原型继承实质：对象能够从其余对象（原型）继承属性。

你可能想晓得：为什么首先须要继承？

继承解决了数据和逻辑反复的问题。通过继承，对象能够共享属性和办法。

const pet = {legs: 4};

const cat = {sound: 'Meow!', __proto__: pet};
const dog = {sound: 'Bark!', __proto__: pet};
const pig = {sound: 'Grunt!', __proto__: pet};

cat.legs; // => 4
dog.legs; // => 4
pig.legs; // => 4

cat，dog和pig 都重复使用了属性legs。

留神 ：__proto__ 已过期，但为了简略起见，我应用它。在生产环境中，倡议应用Object.create()。

2.1 自有与继承的属性

如果对象本人的属性和继承属性名称一样，JS 会优先选择自有属性。

在以下示例中，chicken对象具备本人的属性 legs，但还继承了具备雷同名称legs 的属性：

const pet = {legs: 4};

const chicken = {sound: 'Cluck!', legs: 2, __proto__: pet};

chicken.legs; // => 2

cat 对象从原型 pet 继承了legs。当初，您能够应用属性拜访器 cat.legs，其值为 4。

chicken.legs的值为2。JavaScript 在继承上抉择自有属性legs。

如果删除自有属性，则 JS 会抉择继承的属性！

const pet = {legs: 4};

const chicken = {sound: 'Cluck!', legs: 2, __proto__: pet};

chicken.legs; // => 2
delete chicken.legs;
chicken.legs; // => 4

3. 隐式原型

创建对象时，未明确设置原型，JS 会为咱们创立的对象类型调配一个隐式原型。

咱们再来看看 pet 对象

const pet = {legs: 4};

pet.toString(); // => `[object Object]`

pet只有一个属性 legs，然而，咱们能够调用办法pet.toString()。这个toString() 哪里来的？

创立 pet 对象后，JS 为其调配了一个隐式原型对象。pet 从这个隐式原型中继承了 toString() 办法：

Object.getPrototypeOf() 办法返回指定对象的原型（外部 [[Prototype]] 属性的值）。

4. 原型链

咱们再创立 tail 对象，让他也成为pet 的原型：

const tail = {hasTail: true};

const pet = {legs: 4, __proto__: tail};

const cat = {sound: 'Meow!', __proto__: pet};

cat.hasTail; // => true

cat从它的原型 pet 继承了 legs 的属性。然而cat 也从其原型的原型tail 继承了hasTail。

拜访属性 myObject.myProp 时，JS 会在 myObject 本身的属性内，对象的原型，原型的原型中顺次搜寻 myProp，以此类推，直到遇到null 作为原型。

换句话说，JavaScript 在原型链中寻找继承的属性。

5. 但 JavaScript 有类

从刚开始讲的 JS 只有对象，没有类，你可能就曾经感到困惑，你在说什么鬼。这可能是因为在 ES6 中 你曾经开始应用 class 关键字了。

例如，你能够编写一个 Pet 类：

class Pet {
  legs = 4;

  constructor(sound) {this.sound = sound;}
}

const cat = new Pet('Moew!');

cat.legs;           // => 4
cat instanceof Pet; // => true

并在实例化该类时创立cat。

其实，JS 中的 class 语法是原型继承之上的 语法糖。

下面的基于类的代码片段等效于以下内容：

const pet = {legs: 4};

function CreatePet(sound) {return { sound, __proto__: pet};
}
CreatePet.prototype = pet;

const cat = CreatePet('Moew!');

cat.legs;                 // => 4
cat instanceof CreatePet; // => true

CreatePet.prototype = pet赋值是使 cat instanceof CreatePet 值为 true 所必须的。

6. 总结

在 JavaScript 中，对象从其余对象（原型）继承属性，这就是原型继承的一个概念。

JS 在对象的原型中寻找继承的属性，也在原型的原型中寻找继承的属性，等等。

尽管最后的原型继承看起来很蠢笨，然而了解它之后，咱们会喜爱它的简略性和可能性。

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

原文：https://dmitripavlutin.com/ja…

交换

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