Javascript Prototype __proto__ constructor 三者的关系

JavaScript三大毒瘤 ——— this，原型链，作用域

在我等菜鸟一步一步升级中的过程中，这三个概念总是困扰这我们（可能只有我吧，我比较蠢）。这三个东西往往都很绕，今天我就来分享一下我对原型、原型链的理解，希望各路大神看到我有错的能纠正一下，也希望能帮助到不懂的人，能逐渐把这些弄懂。

首先要弄清楚原型链，首先要知道这三个东西 prototype [[Prototype]] constructor 。哇这都是什么鬼啊？好，现在我们就详细说说这三者分别是什么东西。

prototype（原型）

我们创建的每一个构造函数都有一个 prototype 属性，这属性是一个指针，指向一个对象。

这个对象就是我们用 new构造函数 创建的那个 对象实例 相对应继承的 原型对象，即指向自身的对象。

可能这个不太好理解那我们就写个例子理解一下。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

 </head>

 <body>

 </body>

 </html>

 <script>

     function Person(name,gender){  // 这个就是原型,也是一个构造函数,首字母大写

         this.name = name;

         this.gender = gender;

     }

     Person.prototype.eat = "哇,贼好吃.";   // 在prototype写的方法,继承他的都能使用到

     var person1 = new Person("MIse","male");  // 这个就是 对象实例 他的原型就是 Person 这个构造函数

     console.log(person1.name);  // MIse

     console.log(person1.gender); // male

     console.log(person1.eat);  // 哇,贼好吃.

 </script>

在这个例子里，Person 就是 person1 的原型， person1 可以继承到 Person 上面 eat 的方法。

所以这个prototype的主要作用就是 将一些方法或不变的属性 写在prototype上面，从而由这个原型对象所创造出来的 对象实例 可以 共享他所有的方法和属性。

这样写的好处就是，不用在构造函数里面定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。而且节省内存，把方法存在 堆内存 中，栈内存 只存放指向这个方法的指针。

简单得科普一下堆栈。

Javascript 分两种 基本类型 和 引用类型

基本类型（Undefined、Null、Boolean、Number和String）

基本类型在内存中占据空间小、大小固定 ，他们的值保存在栈(stack)空间，是按值来访问

引用类型（对象、数组、函数）

引用类型占据空间大、大小不固定, 栈内存中存放地址指向堆(heap)内存中的对象。是按引用访问的

[[Prototype]] (实例内部的一个属性)

每一个构造函数创建的对象实例都有一个[[Prototype]]属性。在JavaScript中，因为[[Prototype]]没有标准的访问方式，所以通常这个属性都是通过__proto__来代替访问。

每个 对象实例 都有一个 __proto__ 属性，这属性也是一个指针，这个指针也是指向一个对象。

这个对象就是 创建它这对象实例本身的原型对象，这个就是存在于实例与构造函数的原型对象之间的连接。

这也是为什么 person1 能够访问到 Person 的方法的原因。因为 person1（对象实例）是继承于 Person（原型对象）。

constructor(构造函数)　

每一个 构造函数 内部都会有一个 constructor 的属性，这个属性也是一个指针，指向该prototype属性所在函数的指针。

他的作用也就是往这个原型添加更多的方法或属性。

三者的关系

简单来说呢。就是。

person1.__proto__ === Person.prototype

person1.prototype.constructor 会报错

Person.prototype.constructor === Person

Person.proto === Function.prototype

Person.prototype.__proto__ === Object.prototype 因为所有函数都是由Object继承过来的

Object.prototype.proto === null

Object.proto === Function.prototype

最后

个人建议大家还是静下心来看一下这个关系图。顺着关系看多几次。一次不懂看多几次。总有一次会恍然开朗的！

因为我也是初学者。希望有写错的大家能提醒我一下，共同交流进步。谢谢！