JavaScript中原型与原型链

构造对象

function Person() {}

let person = new Person()

上面程序建立了一个Person类型的实例

原型

function Person() {}

Person.prototype.name = "ztq"
Person.prototype.sayHi = function () {console.log("hello world")}

let person1 = new Person()
let person2 = new Person()

console.log(Person.prototype) // { name: 'ztq', sayHi: [Function (anonymous)] }
console.log(person1.name) // ztq
console.log(person2.name) // ztq

每个构造函数都有一个prototype属性指向实例原型，那什么是实例原型？你可以理解为值为与实例对象相关联的一个原始状态的对象。实例中无法获取到的属性值会去原型中找，这也是后面实现继承的最重要的特性。

constructor

function Person() {}

Person.prototype.name = "ztq"
Person.prototype.sayHi = function () {console.log("hello world")}

let person1 = new Person()
let person2 = new Person()

console.log(person1.constructor) // [Function: Person]
console.log(person2.constructor) // [Function: Person]
console.log(person1.constructor === person2.constructor) // true

实例原型的constructor指针会指向构造函数

proto

在每个实例对象中都有一个[[prototype]]属性，这个属性我们无法通过标准方式直接访问到，但在chrome、firefox、safria浏览器中有__proto__属性。在现在的标准中，getPrototype和setPrototypeOf可以获取和设置__proto__，__proto__属性实际是指向[[prototype]]的引用。

function Person() {}

Person.prototype.name = "ztq"
Person.prototype.sayHi = function () {console.log("hello world")}

let person1 = new Person()
let person2 = new Person()

console.log(person1.__proto__)  // { name: 'ztq', sayHi: [Function (anonymous)] }
console.log(Object.getPrototypeOf(person1)) // { name: 'ztq', sayHi: [Function (anonymous)] }

原型链

实例对象通过__proto__获取实例原型，但实例原型也是一个对象，那么它也有自己的实例原型

function Person() {}

Person.prototype.name = "ztq"
Person.prototype.sayHi = function () {console.log("hello world")}

let person1 = new Person()
let person2 = new Person()

console.log(person1.__proto__)  // { name: 'ztq', sayHi: [Function (anonymous)] }
console.log(person1.__proto__.__proto__) // [Object: null prototype] {}

由原型的原型这么连接而成的链就成了原型链，在图片中由蓝色的线构成，实例对象可以获取原型中的属性，这就构成了由原型链实现继承的重要特性。