constructor.prototype 与 __proto__ 的区别与联系

阅读时长 4 分钟读完

在 JavaScript 中,每一个对象都有一个 __proto__ 属性,指向其原型对象。而每个构造函数都有一个 .prototype 属性,也指向其原型对象。这两个属性间有什么区别呢?

区别

constructor.prototype

constructor.prototype 是一个指针,指向了该构造函数所创建的实例的原型对象。也就是说,如果使用 new 关键字创建一个实例,那么该实例的原型对象就是构造函数的 .prototype

举个例子:

-- -------------------- ---- -------
-------- ------------ -
  --------- - -----
-
---------------------- - ---------- -
  ---------------- --- ---------------
-

----- ---- - --- ---------------
-------------------------- --- ------------------ -- ----

上面的代码中,john 是通过 Person 构造函数创建的实例,其原型对象就是 Person.prototype。因此,john.__proto__ 指向了 Person.prototype

__proto__

__proto__ 是每个对象都具有的属性,指向该对象的原型对象。当访问一个对象的某个属性时,如果该对象本身没有这个属性,就会去它的原型对象中查找,直到找到该属性或者返回 undefined

举个例子:

-- -------------------- ---- -------
-------- ------------ -
  --------- - -----
-
---------------------- - ---------- -
  ---------------- --- ---------------
-

----- ---- - --- ---------------
-------------------------- -- --- --- ----
-------------------------- --- ------------------ -- ----

上面的代码中,john.sayHi() 实际上是先在 john 对象本身查找 sayHi 属性,没有找到,则会去它的原型对象 Person.prototype 中查找,并成功调用了 Person.prototype.sayHi 方法。

联系

constructor.prototype__proto__ 之间的联系在于它们都指向同一个原型对象。举个例子:

-- -------------------- ---- -------
-------- ------------ -
  --------- - -----
-
---------------------- - ---------- -
  ---------------- --- ---------------
-

----- ---- - --- ---------------
-------------------------- --- ------------------ -- ----
-------------------------------------- --- ------------------ -- ----

上面的代码中,我们通过 john 对象的 .constructor 属性获取了构造函数 Person,然后又利用 .prototype 获取了 Person.prototype,证明了它们都指向同一个对象。

指导意义

  • 在理解 JavaScript 原型继承机制时,需要深入理解 constructor.prototype__proto__ 的区别和联系。
  • 如果需要判断某个对象的原型是否为某个构造函数的原型对象,可以使用 __proto__.constructor.prototype 进行比较。
  • 在编写更高效的代码时,可以利用 __proto__ 属性来实现原型链查找。

示例代码

-- -------------------- ---- -------
-------- ------------ -
  --------- - -----
-
---------------------- - ---------- -
  ---------------- --- ---------------
-

-------- --------- ------ -
  ---------- - ------
  ----------------- ------
-
------------- - --------------------------------
------------------------- - ----

----- --- - --- ------------ ------- ------------
------------------------- --- --------------- -- ----
------------------------------------- --- --------------- -- ----
----------------------------------- --- ------------------ -- ----

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/9701

纠错
反馈