js原型和原型链

js原型和原型链

实例 ---> 原型 ---> ... ---> Object

特别说明

• 本篇文章仅是本人对js的一些理解，欢迎指正
• 为了便于区分和理解，采用如下：
  • 原型 代替 原型对象
  • 实例 代替 对象
  • 指向 代替 继承
• 本内容参考 MDN
• ES6的class仅是语法糖，本质还是基于原型
• prototype 原型；proto 原型；instance 实例；

js是基于原型的语言

• Object是创建实例的构造函数,存在于Object.prototype的原型上

  •  typeof Object // function 
    

• 每一个实例都至少有一个原型
• 所有的原型都指向构造函数Object.prototype的原型
• 原型也可能拥有原型
• 原型的属性和方法可以被实例指向
  • 实例 ---> 原型 ---> ... ---> Object
  • 即实例可以指向原型的属性和方法
  • 指向的原型是链条上的就近存在属性或方法的原型
  • 实例最终指向原型Object
• 原型和原型链只是针对原型的方法

概念梳理

• 结构
  • js的对象原型（假设命名为original，真实名为Object，为和构造函数区分）
    • 构造函数constructor，名为Object
      • prototype指向original
      • 属性和方法，只能在构造函数Object自身调用
      • this指向实例firstInstance
    • 属性/方法
    • proto,不存在__proto__

    ---

    • 实例 firstInstance
      • 由上层构造函数Object创建
      • 指向原型original的属性/方法
      • 属性/方法
        • 构造函数Object中通过this添加的属性/方法
        • 自定义属性或方法
      • __proto__指向original

    ---

    • 原型 P（抽象）
      • 构造函数constructor，命名为ConstructFunc
        • this指向实例 secondInstance
        • prototype指向此原型 P
        • 属性和方法，只能在构造函数ConstructFunc自身调用
      • 属性和方法
      • __proto__指向original

      ---

      • 实例 secondInstance
        • 由上层构造函数ConstructFunc创建
        • 指向原型P的属性/方法
        • __proto__指向原型P

      ---

      • 原型 ...
      • 以此类推

原型

• __proto__可以访问原型，等同于原型的构造函数的prototype属性来访问
  • proto 该特性已经从web标准中删除
  • 可使用Object.getPrototypeOf(instance)
• Object的原型是一个原型（位于原型链顶端）

构建函数

• constructor
  • 类型function
  • 用来创建实例的构造函数
  • 存在prototype属性
  • prototype指向当前原型
  • 构造函数中的属性或方法只能在当前构造函数上调用
  • 一个函数方法是一个实例的构造函数，函数中this指向实例
    • func(){*}
    • new func()

实例

• 一个对象是一个实例，eg: const obj = {}

• 创建

  • 构造函数

      function Instance(){
        }; //原型
  
      const instance = new Instance(); //实例
  

  • Object.create(instance)可以构建instance原型的实例

• 实例可以访问原型的属性或方法，沿着__proto__链查找，直到找到最近一个方法

• 实例会继承原型的属性或方法

原型链

• 实例 ---> 原型 ---> ... ---> Object
• 实例或原型可以通过__proto__访问或改变就近的原型（该原型存在就近的属性或方法）
• 原型的属性或方法可以被实例继承
• 实例/原型意味着独立的存储位置（引用数据类型，存储在堆中）

注意

• 创建实例的构造函数constructor中的方法，只能在当前构造函数自身上调用，实例不会继承