JavaScript 基础中的原型/原型链详解（结合实例）

如果想深入理解，可以看看工厂模式、构造函数、对象等相关知识（简单粗暴：《javascript高级程序设计 第3版》第6章）

知识准备

• js是基于原型的语言。es6提供了class等关键字便于实现类，不过那只是语法糖，核心还是基于原型

原型（模式）

• 原型不是单独的概念，而是脱胎于 ”原型模式“ 。
• 我们创建的每一个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象（这个对象是 “原型对象”），而这个对象包含了所有实例共享的属性和方法。（js定义类有一种方法是用函数function定义，这种函数被称作 “构造函数” ）
• 简单理解（不严谨）：比如湘江是长江的支流，所以湘江的原型就是长江

湘江.[[prototype]] == 长江

原型链

每个对象都有一个对象原型，对象以其原型为模板，从原型继承方法和属性，而原型对象也可能有原型，以此类推，形成了一个原型链。

• 所有函数的默认原型都是 Object 的实例，而Object的原型对象是null，null没有原型

• js对象有一个指向原型对象的链，当试图访问该对象属性时，会先在该对象上查找，如果没有，则沿着原型链查找，直到找到该属性返回或到达原型链末尾返回undefined

• 构造函数、原型、实例的关系！！！：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。（所以要注意：构造函数不是原型对象，实例的原型对象并不是构造函数，而是构造函数的原型对象，此处容易混淆）

function f () { // 构造函数
	this.a = 1
	this.b = 2
}
let o = new f() // 创建对象o，它的原型是f，o是{a: 1,b: 2}
// 在f的原型上定义属性
// 注意：f函数不是o的原型对象，f的原型对象才是，同时，f并没有获得b、c属性
f.prototype.b = 3
f.prototype.c = 4

console.log(o.a) // 1

console.log(o.b) // 2，o的原型对象也有b，但会被o的b覆盖，称作“属性遮蔽”

console.log(o.c) // 4，o没有c，查看o的原型，有c，返回

console.log(o.d) // undefined
// o没有d
// o的原型没有
// o的原型的原型（Object）也没有
// o的原型的原型的原型（null）也没有
// 停止搜索，返回undefined

• 在浏览器控制台可做如下尝试，非常有助于理解

// 所有对象的__proto__都指向其构造器的prototype
// 所有构造器/函数的__proto__都指向Function.prototype（鼻祖）
o                               // {a: 1,b: 2}
o.__proto__                     // {b: 3,c: 4...}
o.__proto__.__proto__           // {...}(Object)
o.__proto__.__proto__.__proto__ // null
f                               // f(){ this.a = 1; this.b = 2}
f.__proto__                     // f(){ [native code] },所有函数原型
f.__proto__.__proto__           // {...}(Object)，函数的原型是对象
f.__proto__.__proto__.__proto__ // null
f.prototype                     // {b: 3,c: 4...}，同o.__proto__