new操作符

  1. function Person(name,age){
  2.   this.age = age;
  3.   this.name = name;
  4. }
  6. let man = new Person("Jack",18);

我们通过函数创建了一个构造函数Person，然后使用new操作符将该函数进行了实例化。
使用关键字new创建新实例对象经过了以下几步：

  1. 创建一个新对象
  2. 将新对象的proto指向构造函数的prototype对象
  3. 将构造函数的作用域赋值给新对象 （也就是this指向新对象）
  4. 执行构造函数中的代码（为这个新对象添加属性）
  5. 返回新的对象

20191119212535220.png

proto、prototype、constructor属性讲解

4888929-d2e1166fb30c2681.webp

proto属性

首先，我们需要牢记两点：

  • proto和constructor属性是对象所独有的；
  • prototype属性是函数所独有的。

但是由于JS中函数也是一种对象，所以函数也拥有proto和constructor属性，这点是致使我们产生困惑的很大原因之一。
这里我们仅留下 proto 属性，它是对象所独有的，可以看到proto属性都是由一个对象指向一个对象，即指向它们的原型对象（也可以理解为父对象），那么这个属性的作用是什么呢？它的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的proto属性所指向的那个对象（可以理解为父对象）里找，如果父对象也不存在这个属性，则继续往父对象的proto属性所指向的那个对象（可以理解为爷爷对象）里找，如果还没找到，则继续往上找…直到原型链顶端null（可以理解为原始人。。。），再往上找就相当于在null上取值，会报错（可以理解为，再往上就已经不是“人”的范畴了，找不到了，到此结束，null为原型链的终点），由以上这种通过proto属性来连接对象直到null的一条链即为我们所谓的原型链。
其实我们平时调用的字符串方法、数组方法、对象方法、函数方法等都是靠proto继承而来的。

prototype

prototype属性，别忘了一点，就是我们前面提到要牢记的两点中的第二点，它是函数所独有的，它是从一个函数指向一个对象。它的含义是函数的原型对象，也就是这个函数（其实所有函数都可以作为构造函数）所创建的实例的原型对象，由此可知：f1.proto === Foo.prototype，它们两个完全一样。那prototype属性的作用又是什么呢？它的作用就是包含可以由特定类型的所有实例共享的属性和方法，也就是让该函数所实例化的对象们都可以找到公用的属性和方法。任何函数在创建的时候，其实会默认同时创建该函数的prototype对象。

constructor属性

constructor属性也是对象才拥有的，它是从一个对象指向一个函数，含义就是指向该对象的构造函数，每个对象都有构造函数（本身拥有或继承而来，继承而来的要结合proto属性查看会更清楚点，如下图所示），从上图中可以看出Function这个对象比较特殊，它的构造函数就是它自己（因为Function可以看成是一个函数，也可以是一个对象），所有函数和对象最终都是由Function构造函数得来，所以constructor属性的终点就是Function这个函数。