《六》Javascript 中的原型和原型链

对象的原型：

普通对象的原型：

JS 中所有的对象都有一个 __proto__ 属性，指向其构造函数的显式原型，是对象类型，称之为对象的隐式原型。

var person = {
	name: 'Lee',
	age: 18
}
console.log(person)

获取对象的隐式原型的方法：

1. 对象.__proto__：非标准方法。__proto__ 是浏览器自己添加的属性，因此使用前需要判断一下该属性是否存在。
2. Object.getPrototypeOf(对象)：标准方法。

对象的隐式原型的作用：

对象的隐式原型的作用：当要获取一个对象的属性值时，会先在对象本身查找，如果找到就直接返回；如果没有找到，那么就会去对象的隐式原型中查找。

var person = {
	name: 'Lee',
	age: 18
}
console.log(person.message) // undefined
person.__proto__.message = 'Hello World'
console.log(person.message) // Hello World

函数对象的原型：

JS 中所有的函数都有一个 prototyoe 属性的，是对象类型，称之为函数的显式原型。

箭头函数没有显式原型。

function Person() {}
console.log(Person.prototype)

JS 中函数也是对象，因此函数也有 __proto__ 属性，函数作为对象，是由 Function 构造函数创建出来的，因此 所有函数.__proto__ === Function.prototype。

function Person() {}
console.log(Person.__proto__ === Function.prototype) // true

也就是说：JS 中所有对象都只有 __proto__ 隐式原型；所有函数都既有 prototype 显式原型，也有__proto__ 隐式原型。

获取函数的显式原型的方法：

通过 函数.prototype 来获取函数的显式原型。

函数的显式原型的 constructor 属性：

函数的显式原型上默认有一个 constructor 属性，就指向当前的函数本身。

function Person() {}
console.log(Person.prototype)
console.log(Person.prototype.constructor === Person) // true

函数的显式原型的作用：

函数的显式原型的作用：在通过 new 构造函数创建对象时，会将函数的显式原型赋值给对象的隐式原型。这样就可以保证通过构造函数创建出来的所有对象，都有相同的隐式原型，都可以访问到在构造函数的显示原型对象上定义的属性和方法。

function Person() {
	// 1. 创建一个空的新对象 {}
	// 2. this = {}
	// 3. {}.__proto__ = Person.prototype
	// 4. 执行代码
	// 5. 返回对象
}

var p1 = new Person()
console.log(p1.__proto__ === Person.prototype) // true。在 new 构造函数的第三步，会将函数的显式原型赋值给对象的隐式原型

var p2 = new Person()
console.log(p1.__proto__ === p2.__proto__) // true。通过 new 构造函数生成的对象，隐式原型都等于函数的显式原型，因此都相等

对象的原型链：

对象的隐式原型对象和隐式原型对象之间会形成一条链条，就是对象的原型链。

对象的原型链的作用：用来查找对象的属性和方法。当访问一个对象的某个属性或方法时，首先会在自身查找，找到就返回；如果自身找不到属性和方法，就会沿着 __proto__ 隐式原型链一级一级向上查找，找到就返回，如果最终都找不到，返回 undefined 。

Object 构造函数的显式原型 Object.prototype 是原型链的尽头，因为再往上， Object.prototype.__proto__ === null。

Object.prototype 是绝大多数对象的最终原型，为什么说是绝大多数对象呢？因为 Object.create() 中可以是对象或者 null，如果是 null 的时候就没有原型。

var person = {
	name: 'Lee',
	age: 18
}
// 就相当于
var person = new Object()
person.name = 'Lee'
person.age = 18

console.log(person.meaasge)

查找 person.meaasge 的流程：

1. 首先会在 person 对象自身查找，没有找到。
2. 然后会去 person 的隐式原型 person__proto__ 上查找，还是没有找到；
3. 因为 person__proto__ 也是一个对象，是通过 Object 构造函数来创建的，也有 __proto__ 隐式原型。因此会接着去 person__proto__ 的隐式原型 person__proto__.__proto__ ，也就是其构造函数 Object 的显式原型 Object.prototype 上查找，还是没有找到。
4. 因为 Object.prototype.__proto__ === null ，最终也没有找到，返回 undefined。
   

原型关系图解：

结论：

1. p1 是 Person 构造函数的实例。
2. Person、Object、Function 都是 Function 构造函数的实例。
3. 函数的显式原型是一个对象，是 Object 构造函数的实例，其隐式原型默认都是指向 Object 构造函数的显式原型。Object 的显式原型除外，其隐式原型指向 null。
4. Person.prototype 指向 Person 构造函数的显式原型，Person 构造函数的显式原型.__proto__ 指向 Object 构造函数的显式原型，因此可以说，Object 是 Person 的父类。Function 同理。
5. 结合第 2 点和第 4 点，可以得出：Function 是 Object 的构造函数，Object 是 Function 的父类。
6. Function 的显式原型和隐式原型都指向 Function.prototype。