js - __proto__ 、 prototype和constructor

零.资料与前言

0x1 材料:

  1.帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

0x2 前言

  之前也尝试总结过 js 中的 __proto__ 、 prototype 以及原型链相关的资料(JS 中的原型 -- prototype、__proto__ 以及原型链),不过彼时受限于经验等因素,没有多少条理,同时也存在诸多的的疑点。

  学习嘛,就是一个不断推翻自己的过程,本次总结如下:

 

一、总览

  以下例子贯穿全文...

function Foo(age) {
    this.age = age;   
}

let f1 = new Foo(16);

 

  先来张整体图解(原图较大,建议新标签页内观看):js - __proto__ 、 prototype和constructor_第1张图片

 

  看着这花花绿绿的线条,头真的很大...不过没关系,分解过来看。

  注意: 图中的 '()' 仅代表这是一个函数对象,并非执行函数运算符。

 

二、__proto__

  __proto__ 在 ECMA 标准中是 [[Prototype]] ,各家浏览器的实现不一样,在 chrome 中就是 __proto__ ,稍微留意下即可。

  __proto__ 属性,当中存放(指向)着的是一个对象,粗略地讲就是以 “{ key: value }” 这种形式存在的对象(这里主要的为和 js 中的函数对象区分开来)。

  __proto__ 这个属性,理应是 “{k: v}” 对象所独有的,但是因为 js 中万物皆对象,所以 js 函数也是一种对象,所以函数也同样拥有这个属性,也正是因为这样,极容易产生困惑。

  我们从总图中把 __proto__ 单独抽出来:js - __proto__ 、 prototype和constructor_第2张图片

  如上图所示,一个对象(f1)的 __proto__ 指向的另一个对象的,即指向它们的原型对象(也可以理解为父对象)。

  这个属性的作用是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(父对象)里找,如果父对象也不存在这个属性,则继续往父对象的 __proto__ 属性所指向的那个对象(爷爷对象)里找,如果还没找到,则继续往上找…直到原型链顶端null(原始人。。。),再往上找就相当于在null上取值,会报错。

  通过这样一种链条式的值查找,就是我们常见的原型链,同时,这也是我们模拟继承的常用方法。

三、prototype 属性

  prototype 属性,函数独有,其存放(指向)的同样是一个对象

  从总图中将 prototype 抽出来:

js - __proto__ 、 prototype和constructor_第3张图片

 

  prototype 中存放的同样是一个对象,这个对象的含义是函数的原型对象,也就是以这个函数作为构造函数(其实所有函数都可以作为构造函数)所创建的实例原型对象,即 f1.__proto__ === Foo.prototype,这两个属性均指向同一个对象。

  prototype 的作用是包含可以由特定类型的所有实例共享的属性和方法,也就是让该函数所实例化的对象们都可以找到公用的属性和方法。任何函数在创建的时候,其实会默认同时创建该函数的prototype对象。

 

四、 constructor 属性(函数)

  constructor 属性,和 __proto__ 一样,理应是对象独有,不过嘛,因为 js 所以 函数也有,但是不常用,故留意下即可。

  constructor 属性(变量),当中存放(指向)的是一个函数

js - __proto__ 、 prototype和constructor_第4张图片

  constructor 中存放的这个函数,就是该对象的构造函数,如对象 f1 以 Foo 为构造函数,那么  f1.constructor == Foo // true

  从上图中可以看到,所有的箭头都指向 Function 这个函数,并且 Function 的 constructor 是指向自己,故 constructor 属性的重点就是 Function 这个函数。如: Foo.constructor == Function // true

  从第 三 点我们知道,任何函数在创建的时候,其实会默认同时创建该函数的prototype对象。而在创建的这个 prototype 对象的时候,其中的 constructor 会显示指向这个函数,即上图中的  Foo.prototype.constructor == Foo 

 

五、总结

  1. __proto__ 和 constructor 是对象独有(伪)的;prototype 则是函数独有的;
  2. __proto__ 和 prototype 本身(存储的)是对象,constructor 本身(存储的)是函数;
  3. __proto__ 的常见作用是提供原型链, 以模拟继承特性;
  4. prototype 的常见作用是(自)定义其子代对象的公用属性和方法,并配合原型链提供给所有子代,即  f1.__proto__ == Foo.prototype ;
  5. constructor 的含义是存储(指向)该对象的构造函数;

 

  以上为本次总结的内容,如有缺陷,还望斧正。

 

转载于:https://www.cnblogs.com/cc-freiheit/p/11412433.html

你可能感兴趣的:(js - __proto__ 、 prototype和constructor)