目录
- 1. 原型对象和对象原型
- 2. 原型继承
- 3. 原型链
1. 原型对象和对象原型
- 作用: 以前通过构造函数实例化的对象，每个实例化的对象的属性和方法都是独立的，会造成内存浪费。通过prototype对象原型能实现不同实例化对象共享公用的属性和方法，减少内存的使用
- 定义: 每个构造函数，都自动会有对应的一个prototype原型对象，可以通过prototype原型对象声明公用的属性和方法；而原型对象又有一个constructor属性指向构造函数。prototype原型对象的this都指向实例化的对象
- 使用: 通过构造函数实例化的对象，都会有一个
__proto__对象原型，__proto__对象原型也有一个constructor属性指向构造函数；同时__proto__对象原型指向prototype原型对象(由Javascript底层实现)，这样可以直接通过实例化的对象访问prototype原型对象的公用的属性和方法。注意: 有的浏览器不是__proto__而是[[prototype]]
使用示例1：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><script>// 构造函数function Star(uname) {this.uname = uname}// 原型对象Star.prototype.sing = function () {console.log('唱歌')}console.log(Star.prototype.constructor) // ƒ Star(uname) {this.uname = uname}// 实例化对象const lily = new Star('lily')const tom = new Star('tom')console.log(lily.sing === tom.sing) // true。减少了内存使用console.log(lily.__proto__.constructor) // ƒ Star(uname) {this.uname = uname}console.log(lily.__proto__ === Star.prototype) // true</script>
</body>
</html>
使用示例2。可以声明原型对象prototype为一个对象，同时声明多个共享的属性和方法。但需要通过constructor重新指向构造函数Star，否则指向Object就找不到构造函数Star了
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><script>// 构造函数function Star(uname) {this.uname = uname}// 原型对象Star.prototype = {constructor: Star, sing: function () {console.log('唱歌')}}</script>
</body>
</html>
2. 原型继承
可以定义一个父类，然后通过原型继承来继承父类，最后实现子类自有的属性和方法
使用示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><script>// 父类function Person() {this.eyes = 2this.head = 1}// 继承父类。然后添加子类独有的方法function Woman() {}Woman.prototype = new Person()Woman.prototype.constructor = WomanWoman.prototype.baby = function () {console.log('生孩子')}</script>
</body>
</html>
3. 原型链
- 构造函数的prototype原型对象也是一个对象，该对象的
__proto__对象原型指向Object构造函数的prototype原型对象 - Object构造函数的prototype原型对象也是一个对象，该对象的
__proto__对象原型指向null
原型链的查找规则如下。可以使用instanceof运算符，检测构造函数或实例化对象是否出现在某个实例化对象的原型链上
- 访问一个对象的属性和方法，先查找对象自身
- 在查找对象的prototype原型对象
- 再查找Object构造函数的原型对象
- 如果还查不到，就返回null
示例：
console.log([1, 2, 3] instanceof Array) // trueconsole.log(Array instanceof Object) // // true
