原型
在类继承的语言中, 比如 Java , 使用了类来描述实例对象的行为 JavaScript 中没有类, 所以也没有使用类继承采用的是原型继承的方式
原型继承使用对象来描述实例对象的行为, 这个描述行为的对象就是原型对象(prototype)
prototype
prototype 是所有函数都具有的属性当一个函数被作为构造函数生成一个实例对象时, prototype 就是这个实例对象的原型对象
constructor
constructor 表示生成该实例对象的构造函数 但是实例对象是不存在 constructor 属性的, 这个属性被保存在了原型对象中
来看实例:
- function Foo(){}
- var foo1 = new Foo()
- console.log(foo1)
- console.log(Foo.prototype)
- console.log(foo1.constructor === Foo.prototype.constructor)
结果如下:
我们可以看到 foo1 对象中是不包含 constructor 属性的, 而 Foo.prototype 中存在 constructor 属性但是 foo1 的 constructor 值和 Foo.prototype 的 constructor 值却是相等的说明 foo1 的 constructor 属性其实是从 Foo.prototype 继承过来的这种将属性不保存在自身, 却能通过自身访问得到的设计被称为行为委托
__proto__
在上图中, 我们看到在 foo1 对象和 Foo.prototype 对象中都有一个属性 __proto__
那么 __proto__ 是什么呢? 在继承中, 我们需要一种向上查找的能力去维持继承关系对于 JavaScript 来说就是实例对象查找实例原型, 子原型对象查找父原型对象, 父原型对象继续向上查找直到根原型对象, 也就是 Object.prototype,Object.prototype 向上查找会得到一个 null 值, 指示查找结束整个查询路径构成了原型链
在浏览器的实现中, 使用了 __proto__ 属性来缓存原型对象, 所有的对象都拥有这个属性这样对象通过查询 __proto__ 属性便能实现向上查找
来看实例:
- function Foo(){}
- var foo1 = new Foo()
- console.log(foo1.__proto__ === Foo.prototype) // true
- console.log(Foo.prototype.__proto__ === Object.prototype) // true
实例对象 foo1 的 __proto__ 属性缓存着原型对象 Foo.prototype 子原型对象 Foo.prototype 的 __proto__ 属性缓存着父原型对象 Object.prototype
图示
从 constructorprototype__proto__ 这三个角度去思考, 我们便能很快的画出整个图示
先来思考 constructor , 原型对象的构造函数表示生成实例对象的构造函数, 由此得出下图:
再来思考 prototype, 构造函数的 prototype 就是原型对象补充得出下图:
最后来思考 __proto__, 实例对象的 __proto__属性缓存着原型对象, 原型对象的 __proto__缓存着父原型对象 实例对象是由构造函数使用 new 操作符生成的补充得出下图:
原型相关
instanceof
instanceof 运算符用来检测一个对象的原型链中是否存在指定构造函数的原型对象
用法如下:
object instanceof constructor
来看实例:
- function Foo(){}
- var foo1 = new Foo()
- console.log(foo1 instanceof Foo) // true
- console.log(foo1 instanceof Object) // true
通过图示, 我们可以清楚地看到 Foo.prototype 和 Object.prototype 都位于原型链中
Object.getPrototypeOf
ECMAScript 5 提供的 Object.getPrototypeOf 可以用来查看实例对象的原型
- function Foo(){}
- var foo1 = new Foo()
- console.log(Object.getPrototypeOf(foo1 ) === Foo.prototype) // true
- console.log(Object.getPrototypeOf(foo1 ) === Object.prototype) //false
内建对象和内建函数
关于内建对象:
所有的内建对象都是由 Object() 创建而来
关于内建函数:
所有的内建函数都是由 Function() 创建而来
理解上面的两个要点, 就能理解下面的例子了
- Function.__proto__ === Function.prototype // true
- Object.__proto__ === Function.prototype // true
Function 是内建函数是由 Function() 创建而来, 所以它的 __proto__ 属性中缓存着 Function.prototype 同理可得
- Object.__proto__ === Function.prototype
- Function.__proto__.__proto__ === Object.prototype // true
- Object.__proto__.__proto__ === Object.prototype // true
- Object.__proto__.__proto__.__proto__ === null // true
Function.__proto__是一个内建原型对象, 是由 Object() 创建而来的所以它的 __proto__属性中缓存着 Object.prototype 同理可得
Object.__proto__.__proto__ === Object.prototype
既然
Object.__proto__.__proto__ === Object.prototype
, 而 Object.prototype.__proto__ === null , 所以
Object.__proto__.__proto__.__proto__ === null
总结
prototype 是所有函数都具有的属性
__proto__ 是所有对象 (包括函数) 都具有的属性
JavaScript 采用行为委托的方式, 来继承 prototype 对象中的属性实例对象本身并不包含这些属性, 是通过原型链查找来获得这些属性的值
在浏览器实现中, 使用了 __proto__ 属性来缓存 prototype 对象, 整个 __proto__ 查询路径构成了原型链
constructor 表示生成该实例对象的构造函数实例对象没有 constructor 属性, 这个属性被保存在了原型对象中
相关知识点
继承
classextendssuperstatic
理性分析 JavaScript 中的 this
来源: https://juejin.im/post/5aa13ee26fb9a028c71e0877