- 1. 什么是原型
- 2. 关系草图
- 1) JS将数据划分成了七种数据类型,对象是JS的数据类型之一,对象又根据不同特征进行了分类,具体分为普通对象(Object)、数组对象(Array)、函数对象(Function)、用户自定义对象类型等等。并且JS已经帮忙划分出了数组对象、函数对象、普通对象、日期对象等对象类型,并写好了该类对象的共同属性存放在其原型中,用户可以直接调用具体函数使用。
- 2) 在JS中只要是对象就有原型,并且由该对象的隐藏属性proto记录原型对象地址。
- 3) 并不是所有对象都有prototype属性,只有能创建对象的对象才有prototype属性,且该对象是以函数的方式实现。函数对象都有prototype属性,但并不是所有函数的prototype都有用。可以记忆成大写字母开头的对象名如Array有prototype属性并且有用,小写字母开头的对象如console或自定义函数对象fn等要么没有prototype属性,要么有但是没有用,相当于没有。
- 4) 用户可通过构造函数创建自定义的对象分类,并自定义其原型对象内容。
- 3. 原型定律
- 4. 原型运用
1. 什么是原型
原型这个东西真的是JavaScript原创的,和别的语言的抽象和继承不太一样,自己创了个自认为相对简单的原型链出来,不过在新版转折点的ES6标准后,增加了类class的概念,但也是在原型的基础上修改的,因此搞清楚原型的来历再用class类会更容易。
JS中的原型是针对于JS七种数据类型中的对象这一复杂数据类型设计的,原型是为对象服务的,同时原型也是对象。那么原型对象是个什么对象?其实,我们都知道世间万物都有分类,属于同一类的都有一些共同属性,如中国人这一分类,共同属性是黑眼睛、黑头发、黄皮肤等,jS就将中国人这一分类单独构成一个对象,中国人的共同属性组合到一块构成另外一个独立的对象,并将这两个对象链接起来作为中国人这一个整体,那么是如何将两个对象联系在一起的呢,那就是赋予中国人这一分类对象一个prototype属性,该属性值为中国人共同属性对象的地址,通过该prototype属性就可以访问到中国人这一分类对象的共同属性。prototype属性指向的中国人共同属性对象就叫做原型。
针对中国人这一类,只是一个分类,并不是具体到一个中国人,因此要根据中国人这个分类创建一个中国人出来,那就是通过创建对象的方式具体创建一个具体的中国人,如叫张三,(也可先确定原型再创建对象,具体创建对象方法看对象对应的博客),那么张三是一个中国人,应该具有中国人这一分类的共同属性,那么如何将张三和中国人共同属性联系在一起呢?这时中国人共同属性这个对象就派上用场了,中国人这一分类对象在创建张三这个中国人时就赋予了它一个特殊的隐藏属性proto,该属性的值为中国人共同属性对象的地址,这样就把中国人这一分类、中国人共同属性、中国人张三联系起来了。并且张三在使用某些属性介绍自己时,可以先从自己特有的属性上介绍,如张三身高180,性别男等,然后可以介绍其原型的属性,如张三是中国人,具有黄皮肤等,同时张三也可访问到其原型的原型,如中国人这一分类对象的原型是世界人类共有的属性,是个人,两条胳膊两条腿,那么张三也可以使用两条胳膊两条腿介绍自己是个人,这就形成了一个原型链,实例对象可以使用当前所在原型往上数的原型链上的所有原型包括的属性得到信息。
由以上分析可得到一个等式为:
中国人这一分类的prototype属性值 === 中国人张三的 proto值 === 中国人原型对象地址
2. 关系草图
以下为根据对象和原型间的关系绘制的草图,在看下图之前应该明白几个问题:
1) JS将数据划分成了七种数据类型,对象是JS的数据类型之一,对象又根据不同特征进行了分类,具体分为普通对象(Object)、数组对象(Array)、函数对象(Function)、用户自定义对象类型等等。并且JS已经帮忙划分出了数组对象、函数对象、普通对象、日期对象等对象类型,并写好了该类对象的共同属性存放在其原型中,用户可以直接调用具体函数使用。
2) 在JS中只要是对象就有原型,并且由该对象的隐藏属性proto记录原型对象地址。
3) 并不是所有对象都有prototype属性,只有能创建对象的对象才有prototype属性,且该对象是以函数的方式实现。函数对象都有prototype属性,但并不是所有函数的prototype都有用。可以记忆成大写字母开头的对象名如Array有prototype属性并且有用,小写字母开头的对象如console或自定义函数对象fn等要么没有prototype属性,要么有但是没有用,相当于没有。
4) 用户可通过构造函数创建自定义的对象分类,并自定义其原型对象内容。
好了,记住以上问题就可以看如下关系草图了:
以上草图将各类对象间的联系画的很清楚,也可以看出,在JS中,对象之间都是有联系的,以上只需要搞清楚三个区域即可,即构造函数区、原型区、实例区。window是属于浏览器的,不在JS世界里,不用深究。我们提到的原型就是在原型区。
而且,其实对象根本就没有名字,只有一个地址,上面赋予的对象名字其实是值等于该对象地址的属性名或者变量名,为了方便画图才给对象命名的,实际是对象没名字,只有个地址。
3. 原型定律
3.1 JS公式
对象.proto === 其构造函数.prototype
3.2 根公理
Object.prototype是所有对象的(直接或间接)原型
3.3 函数公理
所有函数都是由Function构造的
任意函数.proto === Function.prototype
以上公式是原型的通用定律,根据定律正推反推均可搞清楚原型,比如,问,一个对象的构造函数是啥,那就是问谁的prototype属性指向的对象是该对象的原型对象。
4. 原型运用
以上只是介绍了什么是原型,理解了原型是什么,就可以灵活运行原型了,这个设计到JS对象原型的操作和JS构造函数的实现,具体可看构造函数的实现。