隐式原型和显示原型

隐式原型

1. 什么是隐式原型?
   定义: 每一个对象都有一个隐式原型([[prototype]])
2. 作用
   用来继承构造函数中的prototype(显示原型)指针
3. 如何获取这个隐式原型?
   (1) 绝大部分浏览器都给对象内置了__proto__属性,可以通过__proto__获取对象的原型

   const obj  = { name: 'nano' }
   const objProto = obj.__proto__
   console.log(objProto)  --> Obejct的prototype

   缺点: 部分浏览器可能不支持

(2) Object.getPrototypeOf() [ES5之后出现的方法]

const obj  = { name: 'nano' }
const objProto = Object.getPrototypeOf(obj)
console.log(objProto) --> Obejct的prototype

显示原型

1. 什么是显示原型?
   定义: 函数对象的专有属性(prototype)
2. 作用
   用来存储一些公用的方法和变量,并传递指针地址给调用该构造函数创建出来的对象的[[prototype]] (隐式原型)
   每个prototype中都含有一个constructor属性,该属性指向构造函数本身
3. Q: 如何巧妙添加的在prototype添加多个属性?
   A: 将prototype指向新对象

   function Vue(){}
   Vue.prototype = {
     constructor: Vue,    // 原本prototype中就含有constructor属性,并且指向这个函数本身
     name:'nano',
     age:18
   }
   let Vue = new Vue()
   console.log(Vue.age) --> 18

   注意: 其实这里不应该直接在新对象中添加添加constructor属性,因为在原始的prototype中它是一个不可枚举的属性,所以需要单独使用Object.defineProperty()进行添加

function Vue(){}
Vue.prototype = {
  name:'nano',
  age:18
}

Object.defineProperty(Vue.prototype,'constructor',{
  value: Vue,
  configure: true,
  enumerable: false,
  writable: true
})