JavaScript学习笔记之constructor,prototype,proto解惑

最新推荐文章于 2024-09-28 12:21:53 发布

weixin_33958366

最新推荐文章于 2024-09-28 12:21:53 发布

阅读量100

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5a31faf151882560e356a6ea

版权

引言

在学习JavaScript时，不可避免的接触到了原型和原型链的概念，结果被constructor，prototype，__proto__这些属性搞得一脸懵逼，这些都是什么鬼！！！通过谷歌浏览器调试时，看对象实例的内部结构，这三个属性也是你中有我，密不可分，完全理不清头绪。最后通过理清概念，不断验证，最终有了一些思路。

概念

要想真正弄清楚constructor，prototype，__proto__这些属性的之间的区别和联系，首先我们要明确定义：

constructor属性始终指向创建当前对象的构造函数。
prototype属性是每个函数对象都具有的属性，被称为原型对象，因为其本身也是个对象。
__proto__属性是每个对象具有的属性。一旦原型对象被赋予属性和方法,那么由相应的构造函数创建的实例对象会继承prototype上的属性和方法。

事例

下表列出了实例对象和函数对象的区别：

	constructor	prototype	__proto__
A	✔︎	✔︎	✔︎
a	✔︎	✘	✔︎

由上表可以看出实例对象是没有prototype属性的，只有函数对象才有（这一点很重要！！！），下面用代码来具体解释下以上三个属性的关系：

<script type="text/javascript">
    function A() {};
   
    var a = new A();
</script>
复制代码

JavaScript实际上执行的是：

<script type="text/javascript">
    function A() {};

    var a = new Object();
    a.__proto__ = A.prototype;
    A.call(a);
</script>
复制代码

其中A.prototype也是个对象，它由constructor和__proto__属性组成（这一点很重要！！！），它的构造过程如下：

A.prototype = new Object();
A.prototype.constructor = A;
A.prototype.__proto__ = Object.prototype;
复制代码

Object和Function原型对象

JavaScript中的所有对象都来自Object，所有对象从Object.prototype继承方法和属性，尽管它们可能被覆盖。例如，其他构造函数的原型将覆盖constructor属性并提供自己的toString()方法。Object原型对象的更改将传播到所有对象，除非受到这些更改的属性和方法沿原型链进一步覆盖。它的构造过程如下：
```
Object.prototype = new Object();
Object.prototype.constructor = Object;
Object.prototype.__proto__ = null;

...

Object.__proto__ = Function.prototype;
复制代码
```
全局的Function对象没有自己的属性和方法, 但是, 因为它本身也是函数，所以它也会通过原型链从Function.prototype上继承部分属性和方法。Function实例从Function.prototype 继承了一些属性和方法。同其他构造函数一样，你可以改变构造函数的原型从而使得所有的Function实例的属性和方法发生改变。它的构造过程如下：
```
Function.prototype = new Function();
Function.prototype.constructor = Function;
Function.prototype.__proto__ = Object.prototype;

...

Function.__proto__ = Function.prototype;
复制代码
```