13.JavaScript的面向对象3-原型链

原型链

当我们从一个对象中获取一个属性的时候，它会触发[[get]]操作：

1.在当前对象obj中查找此属性，如果找到，就返回对应的值
2.如果没有找到，会去此对象的原型对象obj.__proto__上查找此属性，如果找到，就返回对应的值
3.如果没有找到，继续去原型对象的原型对象obj.__proto__.__proto__上查找此属性，如果找到，就返回对应的值
....
4.直到找到Object.prototype为止，,此时Object.prototype.__proto__为null,则停止查找，返回undefined
整个查找的过程,形成一个链条,因为是一路沿着原型对象去查找的,所以是原型链

顶层原型对象是什么?

顶层原型对象是Object.property,可以通过Object.property查看顶层原型对象的值

console.log(Object.prototype) //[Object: null prototype] {}

var obj = {
  name: 'why'
}
//字面量定义对象的方式本质上是通过new Object()创建对象
//所以obj.__proto__指向Object.prototype原型对象

console.log(obj.__proto__) //[Object: null prototype] {}
console.log(Object.prototype) //[Object: null prototype] {}
console.log(obj.__proto__ === Object.prototype) //true

console.log(Object) //[Function: Object]   Object是一个构造函数
console.log(Object.prototype.constructor) //[Function: Object]
console.log(Object.prototype.constructor === Object) //true

image.png

Object.prototype原型对象上的属性

console.log(Object.prototype)
console.log(Object.getOwnPropertyDescriptors(Object.prototype))

[Object: null prototype] {}
{
  constructor: {
    value: [Function: Object],
    writable: true,
    enumerable: false,
    configurable: true
  },
  __defineGetter__: {
    value: [Function: __defineGetter__],
    writable: true,
    enumerable: false,
    configurable: true
  },
  __defineSetter__: {
    value: [Function: __defineSetter__],
    writable: true,
    enumerable: false,
    configurable: true
  },
  hasOwnProperty: {
    value: [Function: hasOwnProperty],
    writable: true,
    enumerable: false,
    configurable: true
  },
  __lookupGetter__: {
    value: [Function: __lookupGetter__],
    writable: true,
    enumerable: false,
    configurable: true
  },
  __lookupSetter__: {
    value: [Function: __lookupSetter__],
    writable: true,
    enumerable: false,
    configurable: true
  },
  isPrototypeOf: {
    value: [Function: isPrototypeOf],
    writable: true,
    enumerable: false,
    configurable: true
  },
  propertyIsEnumerable: {
    value: [Function: propertyIsEnumerable],
    writable: true,
    enumerable: false,
    configurable: true
  },
  toString: {
    value: [Function: toString],
    writable: true,
    enumerable: false,
    configurable: true
  },
  valueOf: {
    value: [Function: valueOf],
    writable: true,
    enumerable: false,
    configurable: true
  },
  ['__proto__']: {
    get: [Function: get __proto__],
    set: [Function: set __proto__],
    enumerable: false,
    configurable: true
  },
  toLocaleString: {
    value: [Function: toLocaleString],
    writable: true,
    enumerable: false,
    configurable: true
  }
}

Object是所有类的父类

function foo() {}
console.log(foo.prototype) // {}
console.log(Object.getOwnPropertyDescriptors(foo.prototype))

//函数的原型对象prototype也是一个对象,此原型对象也有一个内置的[[prototype]]属性
console.log(foo.prototype.__proto__) //[Object: null prototype] {} 是Object.prototype顶层原型对象
console.log(foo.prototype.__proto__.__proto__) //null

image.png
image.png