js原型和原型链

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

特别说明

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

  • 原型继承模型本身实际上比经典模型更强大

js是基于原型的语言

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

概念梳理

  • 结构
    • 构造函数constructor，名为Object
    • 属性/方法
    • proto,不存在__proto__
    • prototype指向original
    • 属性和方法，只能在构造函数Object自身调用
    • this指向实例firstInstance
    • 实例 firstInstance
    • 构造函数Object中通过this添加的属性/方法
    • 自定义属性或方法
    • 由上层构造函数Object创建
    • 指向原型original的属性/方法
    • 属性/方法
    • __proto__指向original
    • 原型 P（抽象）
    • 原型 ...
    • 以此类推
    • 由上层构造函数ConstructFunc创建
    • 指向原型P的属性/方法
    • __proto__指向原型P
    • 实例 secondInstance
    • this指向实例 secondInstance
    • prototype指向此原型 P
    • 属性和方法，只能在构造函数ConstructFunc自身调用
    • 构造函数constructor，命名为ConstructFunc
    • 属性和方法
    • __proto__指向original
    • js的对象原型（假设命名为original，真实名为Object，为和构造函数区分）

原型

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

构建函数

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

实例

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

  • 创建

        function Instance(){
      }; //原型

    const instance = new Instance(); //实例复制代码
    • Object.create(instance)可以构建instance原型的实例
    • 构造函数

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

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

原型链

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

注意

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