JS原型(js的原理)

原型对象相关概念解析

1.对象中的__proto__

• js中万物皆对象，每个数据都会有一个__proto__的属性，这个属性叫隐式原型
• 一个对象(obj)的隐式原型(__proto__)指向构造该对象(obj)的构造函数(object())的原型属性(prototype)
• 这样做的原因是为了能够保证实例(obj)能够访问到在构造函数(object())的原型属性(prototype)中定义的属性和方法

2.函数中的prototype

原型对象

• 指针 constructor 表示当前函数属于谁，用来指向当前原型所属的函数

• 原型指针 [[prototype]] __proto__ 相当于一根原型指针，指向当前对象的“父级”

• 可以在当前函数的原型身上添加各种属性和方法，以供使用

• JS中万物皆对象，所有内容的指针终点都指向Object

• 函数(Function)是一个特殊的对象，除了和其他对象一样有上述__proto__属性之外，还有自己特有的属性——原型（prototype）

• 这个属性被描述成指针，他指向一个对象类型的数据，用途：包含所有将来使用该函数构造出来的可被共享的属性和方法（我们把这个对象叫做原型对象）

• 原型对象内也有一个属性，叫做constructor，这个属性包含了一个指针，指回原函数（类似于arguments.callee。但是arguments只能在函数内部获得，而函数原型对象内的constructor属性，可以在任何能访问到这个函数的位置使用）

3.构造函数，原型，实例之间的关系

• 构造函数Fn身上有属性prototype为原型对象，原型对象内有constructor属性指向当前prototype所在的构造函数Fn
• 在new执行构造函数Fn时，创造了一个实例对象f，实例对象f的__proto__指向构造函数Fn的原型prototype
• 因为实例对象f的__proto__指向构造函数Fn的原型prototype，所以实例对象f可以间接访问到Fn原型prototype的方法

4.javascript解析器访问属性顺序

• 当访问实例 f 的属性或方法时，会先在当前实例对象 f 中查找，如果没有，则沿着__proto__继续向上寻找，如果找到最顶头的Object还是找不到，则会抛出undefined。如果在实例中找到，或某层原型中找到，就会读取当前值并执行，同时停止向上找寻
• 解析器的解析顺序遵循就近原则，如果在最近的位置发现属性存在，便不会继续向上找寻

5.查看实例对象f是否有指针指向构造函数Fn的原型

• isPrototypeOf()用于检测两个对象之间似乎否存在这种关系，使用方法如下：
  • Fn.prototype.isPrototypeOf(f)
  • 查看 Fn 的 prototype 对象，是否是 f 原型
• 类似的还有instanceof运算符，使用方法如下：
  • console.log(f instanceof Fn)
  • 查看 f 对象是否是构造函数 Fn 的实例
  • console.log(f instanceof Object)
• 两种使用，如果是返回ture，如果不是返回false
• 注意：instanceof运算符右侧为构造函数，并且js中所有原型都来自Object构造函数

实例可见继承