文章序

为了彻底搞清楚JS的原型和原型链以及prototype和proto这两个属性，故在此做详细总结并举例，首先，有如下代码:

function Person () {}
var person = new Person()
var obj = new Object({name:'hpf'})
console.log('----------person的相关属性--------------')
console.log(person) //Person {}
console.log(person.prototype) //undefined
console.log(person.__proto__ ) //{constructor: ƒ}
console.log('----------Person的相关属性--------------')
console.log(Person) //Person () {}
console.log(Person.prototype) //{constructor: ƒ}
console.log(Person.__proto__ ) //ƒ () { [native code] }
console.log('----------obj的相关属性--------------')
console.log(obj) //{name: "hpf"}
console.log(obj.prototype) //undefined
console.log(obj.__proto__ ) //{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
console.log('----------Object的相关属性--------------')
console.log(Object) //ƒ Object() { [native code] }
console.log(Object.prototype) //{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
console.log(Object.__proto__) //ƒ () { [native code] }
console.log('----------Person.prototype的属性关系-------------')
console.log(Person.prototype) //{constructor: ƒ}
console.log(Person.prototype.prototype) //undefined
console.log(Person.prototype.__proto__) //{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
console.log('----------Object.prototype的属性关系-------------')
console.log(Object.prototype) //{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
console.log(Object.prototype.prototype) //undefined
console.log(Object.prototype.__proto__) //null
console.log('-----------属性关系-------------')
console.log(Person.prototype === person.__proto__) //true
console.log(Person.prototype.constructor === Person)//true
console.log(Object.prototype === obj.__proto__) //true
console.log(Object.prototype.constructor === Object)//true
console.log(Person.prototype.__proto__ === Object.prototype) //true
console.log(Object.prototype.__proto__ === null) //true

画图理解如下:

原型关系

原型链

console.log(person.__proto__.__proto__.__proto__) //null
console.log(obj.__proto__.__proto__) //null