本篇博客针对Chrome环境下,博客内容是局限于个人实践和理解,如若有误,敬请指正
实践总结
- 对象都有proto属性
- 函数类型对象是一种特殊的对象。它们都有prototype属性,并且它们的proto属性都指向Function原型对象(因为构造函数对象都是Function内置对象的实例,而Object、Function等内置函数类型对象的proto属性也指向Function原型对象是因为内置规则)。
- 原型对象是一个普通对象,它的proto属性指向Object原型对象。原型对象随着函数类型对象创建而创建,内置的函数类型对象通常都会有内置原型对象,附带一些内置的属性,而普通的Function的实例函数类型对象的原型对象则会是一个带有constructor和proto属性的空对象容器。
- 原型链就是proto这条链(下图蓝色那根线)
- 在Java中,Object是所有类的祖宗。在JavaScript中,Object原型是所有原型在原型链中的终点。
一图表千言
1.一般对象:Object(内置)
查看Object对象
分析Object对象(上图展示全则会太长,以下结论可自行console窗口debugger验证)
- Object对象是JavaScript四个基本对象之一,可以用来创建普通对象,属于函数类型对象,有prototype属性和_proto_ 属性。
- Object.prototype是一个有很多内置属性的普通对象,不同的是它没有proto属性(原型链终点)。
- Object._ proto _指向Function.prototype
2.函数对象:Function(内置)
查看Function对象
分析Function对象
- Function对象是JavaScript四个基本对象之一,可以用来创建构造函数对象,属于函数类型对象,有prototype属性和_proto_ 属性。
- Function.prototype是内置的,Function.prototype.proto指向Object原型对象。
- Function._ proto _指向Function.prototype
3.构造函数对象
得到构造函数对象
let Person = function(name){
this.name=name}
查看构造函数对象
- 构造函数对象是内置对象Function的实例。
分析构造函数对象
- 所有构造函数对象都是内置对象Function的实例,属于函数类型对象,有prototype属性和_proto_ 属性。
- Person.prototype是一个空的普通对象,其proto属性指向Object,不同的是它还会自带一个constructor属性指向构造函数对象Person。
- Person._ proto_ 指向Function.prototype(如下图,佐证第一点)
4.构造函数原型对象
得到构造函数原型对象
无需创建,构造函数对象是JavaScript中的一种特殊类型对象,创建构造函数对象时即会创建一个原型对象,并且建立二者一对一的关系,如图例关系有 Person = Person.prototype.constructor,但注意这引用关系是可以随着赋值改变的。
查看构造函数原型对象
分析构造函数原型对象
- 是一个普通对象,有_proto__属性,默认生成时自带constructor属性。
- Person.prototype.constructor默认指向Person。
- Person.prototype._ proto_ 默认指向Object.prototype。
5.实例对象
得到实例对象
let p = new Person('zhangsan')
查看实例对象
分析实例对象
- 是一个普通对象,有proto属性。
- p.proto指向构造Person.prototype
6.原型链
JavaScript执行器(Chrome环境)在搜索对象属性时的搜索规则就是沿着 proto_ 这条链逐步向上搜索,直到遇到null为止(在上面探讨Object后可知,内置的Object.prototype没有_proto__ 属性)。