js原型及原型链解析

时间：2021-10-24 15:49:15

js原型、原型链

这几天闲了看了下js的原型，以下内容为个人理解，如有错误，尽请指正。

首先，明确一点：js中的对象分为普通对象和函数对象，一般我们自定义的可以被new的函数称作函数对象，另外js内置了譬如：Array、Date、Object、Function、Number、String、Boolean、RegExp、Error等这些函数对象：

js原型及原型链解析

1、只有函数对象才有prototype属性，该属性指向的俗称“原型”或者“原型对象”，举个栗子：

function Person() {}

console.log(Person.prototype)       // {constructor: Person, __proto__: Object}

2、每个原型或者原型对象还有一个constructor属性，即上面的Person.prototype.constructor，该属性指向该函数的构造，这里指向Person自身，即：

Person.prototype.constructor === Person     // true

3、所有对象，不论普通对象还是函数对象都有一个__proto__属性，该属性指向其构造的原型，使用__proto__将所有对象联系起来，才形成了所谓的原型链，举个栗子：

function Person() {}

const p1 = new Person()

console.log(p1.__proto__ === Person.prototype)    // true, p1是由Person构造的

console.log(Person.prototype.__proto__ === Object.prototype) // true, Person的原型是由Object构造的，因为Person.prototype是一个普通对象，普通对象的构造都是Object

console.log(Person.__proto__ === Function.prototype)    // true, Person是由Function构造的

console.log(Function.__proto__ === Function.prototype)    // true, Function是由自身构造的

console.log(Function.prototype.__proto__ === Object.prototype)    // true, Function的原型是由Object构造的

console.log(Object.__proto__ === Function.prototype)    // true, Object是由Function构造的，类似Person.__proto__

console.log(Date.__proto__ === Function.prototype)    // true, Date是由Function构造的，类似Person.__proto__

console.log(String.__proto__ === Function.prototype)    // true, String是由Function构造的，类似Person.__proto__

console.log(Boolean.__proto__ === Function.prototype)    // true,Boolean是由Function构造的，类似Person.__proto__

console.log(Object.prototype.__proto__ === null)    // true, Object的原型是由null"产生"的，null处于原型链顶端

这个从根本上印证了道德经那句：道（null）生一，一生二，二生三，三生万物。无，名天地之始。

4、一般我们通过.操作符获取一个对象的属性或方法的时候，会首先在当前对象自身上查找该属性或方法，找不到的话会继续顺着__proto__也就是原型链向上查找，直到找到，否则返回undefined，举个栗子：

function Person() {

  this.name = 'Nicholas'

  this.age = 29

  this.job = 'Software Engineer'

  this.sayName = function() {

    console.log(this.name)

  }

}

const person1 = new Person()

const person2 = new Person()

person1.sayName()

person2.sayName()

js原型及原型链解析

[[Prototype]]即上面所说的_proto_，由上图可以直接得出如下结论：

Person.prototype.constructor == Person;

person1.__proto__ == Person.prototype;

person1.constructor == Person;

当我们获取person1.age时，发现person1自身并无age属性，所以会自动向上查找person1.proto.age，发现有并为29，则直接返回29，即person1.age === 29

function Person() {

  this.name = 'Nicholas'

  this.age = 29

  this.job = 'Software Engineer'

  this.sayName = function() {

    console.log(this.name)

  }

}

const person1 = new Person()

console.log(person1.age === 29)   // true

同理，查找person1.constructor时会自动查找到Person自身，所以如下是恒等的：

function Person(name) {

    this.name = name

}

var p = new Person('jack')

console.log(p.__proto__ === p.constructor.prototype) // true

下一节的话讲下js中的继承~

相关文章