JS 原型链理解

原型链、原型对象等概念理解

一些概念：

1. JS的对象（除了null和undefined），都有__proto__属性；__proto__属性也是一个对象（JS一切皆对象），包含了constructor和__proto__两个属性
2. 只有函数对象有prototype属性，包含了一个默认的constructor属性，指向了实例的构造函数
3. ES5新增了获取对象的原型对象方法：Object.getPrototypeOf()； obj.__proto__是获取obj对象的原型对象的非标准方法。

原型链图： 原型链图的理解：

function Person(name, age) {
  this.name = name
  this.age = age
}
const p1 = new Person('aa', 10)
Person.prototype.city = 'Shanghai'

• 1. 实例的__proto__ 和 原型对象（Person.prototype）指向同一个地方

  p1.__proto__ === Person.prototype

• 2. 原型对象（即Person.prototype）的constructor指向构造函数本身

Person.prototype.constructor === Person

• 3. 函数的原型对象也是一个普通对象，几乎所有的JavaScript对象都是Object的实例就是Object.prototype，由1可得：

Person.prototype.__proto__ === Object.prototype

• 4. Object.prototype.__proto__为null, 原型链到此停止

Object.prototype.__proto__ === null

• 5. 函数（如上的Person）都是Function函数的实例，由1，3可得：

Person.__proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype

• 6.由于 Object函数、Function函数还是普通函数（Person），都是函数，由5可得：

Person.__proto__ === Function.prototype
Function.__proto__ === Function.prototype
Object.__proto__ === Function.prototype
// 结合3
Function.prototype.__proto__  === Object.prototype

原型链相关其他的方法

• isPrototypeOf

isPrototypeOf() 是 Object函数（类）的下的一个方法，用于判断当前对象是否为另外一个对象的原型，如果是就返回 true，否则就返回 false。

Person.prototype.isPrototypeOf(p1) // true

• hasOwnProperty

hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中。这个方法只在给定属性存在于对象实例中时，才返回true

p1.hasOwnProperty('name') // true
p1.hasOwnProperty('age') // true
p1.hasOwnProperty('city') // false

例子

function Person() {}
Person.prototype.name = 'abc'
Person.prototype.age = 18
Person.prototype.getAge = function() {
    console.log(this.age)
}
const p1 = new Person()
console.log(p1.name) // abc
p1.age = 28
p1.getAge() // 28