JS原型、原型链 理解【实践】

本篇博客针对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__ 属性)。

猜你喜欢

转载自blog.csdn.net/jw2268136570/article/details/108068612