1. 前言

今天的重点复习的是JavaScript原型链。所谓是"基础不牢，地动山摇"，原型链作为继承等相关知识的基础，就显得尤为重要了。接下来以手绘原型链为基础，详解讲解下原型链以及相关的属性

原型链

2. 原型以及原型链

2.1 prototype

其实函数在被创建时，会存在两个内容。一个是函数本身，另一个是函数.prototype. 可以理解为函数天生就是双胞胎
每个函数上都会存在一个属性prototype，这个属性指向函数.prototype
函数.prototype上存在属性constructor，该属性指向函数本身

function User() {}

console.log(User.prototype.constructor === User); // true

2.2 proto

每个实例都会存在属性**__proto__, 实例.__proto__** 会指向函数的原型对象

2.2.1 特例：

具体构造函数.__proto__ === Function.prototype。停停停!!! 不是只有实例上才有属性**__proto__** 吗，为什么函数也可以调用呢？
- 是因为具体的构造函数也是 Function 的实例

function Person() {}
const person = new Person();

// 实例.__proto__ 指向构造函数.prototype
console.log(person.__proto__ === Person.prototype); // true
console.log(person.__proto__ === Object.getPrototypeOf(person)); // true

// 特例：具体函数.__proto__ 指向了Function.prototype
console.log(Person.__proto__ === Function.prototype); // true

// 特例：函数本身.__proto__ === 指向了Function.prototype
console.log(Function.__proto__ === Function.prototype); // true

2.3 constructor

原型对象 prototype 存在属性constructor, 该属性指向构造函数本身

constructor指向

function Person() {}
const person = new Person();

// 原型对象上存在属性<constructor> 指向
console.log(Person === Person.prototype.constructor);

// 实例的构造函数
console.log(person.constructor);
// person本身没有constructor属性
console.log(Object.prototype.hasOwnProperty.call(person, "constructor")); // false
// 其实是通过原型继承来的
console.log("constructor" in person); // true

2.4 实例以及原型

实例是通过属性__proto__一直向上寻找属性，先是实例自己属性 => 原型属性 => 父类实例属性 => 父类原型属性… 以此类推

function User() {
  this.name = "xxx1";
}

const u = new User();
console.log(u.name); // xxx1

function User1() {}

User1.prototype.name = "xxx2";
const u1 = new User1();
console.log(u1.name); // xxx2

function User2() {}
// User2.prototype.name = 'xxx3'
const u2 = new User2();
// 最起码保证u2.__proto__ 没有被重写
u2.__proto__.__proto__ = u;
console.log(u2.name); // xxx1

function User3() {}
const u3 = new User3();
u3.__proto__.__proto__ = u1;
console.log(u3.name); // xxx2