关于javascript: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] {}

由原型的原型这么连贯而成的链就成了原型链，在图片中由蓝色的线形成，实例对象能够获取原型中的属性，这就形成了由原型链实现继承的重要个性。