JS全解(二)JS的继承机制👽啥是原型!!

734 阅读4分钟

重要知识点:每节博客都会重复🙉🙉🙉

口诀🤨:四基两空一对象,还有五个falsy值。

七种数据类型

  • number string bool symbol
  • null undefined
  • object

五个 falsy 值

  • null undefined
  • 0 NaN
  • '' (空字符串)

重点讲 Object 对象🤡

我一直很难理解 Javascript 语言的继承机制。

它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承。

我花了很多时间,学习这个部分,还做了很多笔记。但是都属于强行记忆,无法从根本上理解。

直到昨天,我读到 阮一峰 的解释,才恍然大悟,完全明白了Javascript为什么这样设计。

下面,我尝试用自己的语言,来解释它的设计思想。彻底说明白prototype对象到底是怎么回事。其实根本就没那么复杂,真相非常简单。

一、引子

在解释原型概念之前,我们先讲个故事…… 有两个人,分别叫小红和小兰,他们除了名字不一样,都有共同特征(都是中国人,都是黄皮肤,都是黑头发),那我在存储这两个人的数据时,该怎么存呢?哪种方式内存小呢???

方法A: 各存各的,小红+{中国人、黄皮肤、黑头发}、小蓝+{中国人、黄皮肤、黑头发}

方法B: 小红+{共有属性地址}小蓝+{共有属性地址} 、{共有属性}

显而易见,当这种共同属性越来越多时,方法B的内存就占得越少,而JS也是这么想的!!!

每一个实例对象,都有自己的属性和方法的副本。这不仅无法做到数据共享,也是极大的资源浪费。

二、什么是原型

每个对象都有原型

  • 原型里存着对象的共有属性
  • 比如 obj 的原型就是一个对象
  • obj.__proto__ 存着这个对象的地址,地址指向的是他们的共有属性,这些共有属性就叫做原型。
  • 这个对象里有 toString / constructor / valueOf 等属性

对象的原型也是对象

  • 所以对象的原型也有原型
  • obj = {} 的原型即为所有对象的原型
  • 这个原型包含所有对象的共有属性,是对象的根
  • 这个原型也有原型,是 null 下面再来一幅图,大家参照着小红小蓝,再去理解程序,最好自己动手画一画!

obj.__proto__是 #409 号地址 #409是原型所在区域的地址

原型就是代表这块区域,是obj1的也是obj2的也是object的。

三、prototype属性的引入

考虑到以上这些情况,Brendan Eich 决定为构造函数设置一个 prototype 属性。

这个属性包含一个对象(以下简称"prototype对象"),所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。

实例对象一旦创建,将自动引用prototype对象的属性和方法。也就是说,实例对象的属性和方法,分成两种,一种是本地的,另一种是引用的。比如小红小兰自己独有的属性就是本地属性,共同属性就是引用的。

现在,中国人,黄皮肤,黑头发属性放在prototype对象里,是两个实例对象共享的。只要修改了prototype对象,就会同时影响到两个实例对象。

四、总结

由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样。

这就是Javascript继承机制的设计思想。不知道我说清楚了没有,继承机制的具体应用方法,可以参考我写的系列文章: JS全解(四)new是干啥的?❤️

本文参考了知乎CSDN网道JavaScript 的一些知识,有描述不准确的地方还希望大多多家指正!!!