关于javascript:原型与原型链的个人理解

10次阅读

共计 1035 个字符,预计需要花费 3 分钟才能阅读完成。

原型

1、每个对象都有着本人的原型

图中 obj 和 info 有着本人的隐式原型,而它又指向了各自的原型对象

当进行代码打印的时候,js 会先去对象 obj 或者 info 去寻找属性,就相似于

console.log(obj.name)    //peter

当 js 在对象上找不到指标属性时,他就会去对象的原型上寻找属性,而如果在原型上也没有找到的话就输入空值。

console.log(obj.address)    //undefined

原型链

1、在属性的寻找过程当中存在着一条原型链

属性的寻找会沿着这条链始终往上寻找

在这个图当中,info 的隐式原型指向了 obj 对象,而 obj 的隐式原型又指向了它的原型对象,这就造成了一条原型链

用代码的模式来形容就是:

const obj = {
    age: 18
    name: 'peter'
}

const info = {}

info.__proto__ = obj

而当咱们进行属性打印的时候:

console.log(info.name) //peter
console.log(info.age) //18

这个时候咱们会发现,在 info 上不存在 name 和 age 这两个属性,然而 js 会沿着这条原型链去进行寻找,它会在 obj 中寻找到 name 和 age,就输入了这个后果

2、原型链中存在着一个顶层原型

当咱们沿着这个原型链向下来寻找属性的时候,它会存在一个起点,这就是顶层原型,如果在顶层原型中还没有找到指标属性,就会输入空值

咱们在平时创建对象的时候,通常应用的是字面量创立,也就是以下写法:

const obj = {}

其实这种办法就是一种语法糖

js 外部所进行的其实是这种创立办法:

const obj = new Object()

js 外部本质上所进行的创立形式就是利用构造函数进行创立的
这里,咱们回顾一下利用构造函数创建对象的外部操作:
(1)创立一个实例对象
(2)把 this 指向这个实例对象
(3)实例对象的隐式原型__proto__赋值为构造函数的 prototype
(4)执行函数当中的代码
(5)将这个实例对象返回

第三步的操作就是扭转的实例对象的隐式原型的指向:

所以说 obj 的隐式原型所指向的原型对象就是顶层原型。

咱们讲下面说到的 info 和 obj 的图进行补全:

当咱们打印 info 当中的 address 的时候,js 会先去 info 中寻找,在 info 中没有找到,就会去到 obj 当中去寻找,而在 obj 没有找到,最初就去到顶层原型寻找,没有找到就输入了 undefined:

console.log(info.address) //undefined

正文完
 0