原型的表现形式有两种,prototype和proto。prototype只有函数具有,普通对象是没有该属性的,而prototype指向原型对象的指针,原型对象包含该构造函数实例化出的所有对象共享的方法和属性。proto是作为对象时的共享的属性和方法。

  1. function Title(){
  2. console.log("Title")
  3. }
  4. console.dir(Title)

捕获.PNG

prototype—-作为构造函数的原型对象

  1. function Title(){
  2. }
  3. Title.prototype.show=function(){
  4. console.log("show")
  5. }
  6. //在prototype上定义的方法和属性会被作为实例化对象的原型__proto__
  7. let hd = new Title()
  8. hd.show()//show
  9. console.log(hd.__proto__ == Title.prototype)//true

proto作为对象的原型对象

  1. function Title(){
  2. }
  3. Title.prototype.show=function(){
  4. console.log("prototype:show")
  5. }
  6. Title.show = function(){
  7. console.log("__proto__:show")
  8. }
  9. let hd = new Title()
  10. hd.show()//"prototype:show"
  11. Title.show()//"__proto__:show"

捕获.PNG

原型中的constructor属性

constructor属性是构造函数中独有的,虽然普通函数和构造函数在本质上没什么区别,只是为了区分他们把构造函数的首字母大写了。constructor属性是函数prototype中的属性,他的作用通过他可以找到原来的构造函数。通过构造函数实例化的对象中的proto中的constructor也是指向创建他的构造函数
捕获-1.PNG

call、apply方法借用原型的方法

通过call和apply可以调用本来在自己原型链上没有函数来执行。

  1. function Sum(){
  2. this.sum1 = function(arr){
  3. return arr.reduce((pre,cur)=>{
  4. return pre+cur
  5. },0)
  6. }
  7. }
  8. let hd = new Sum()
  9. //求a中的所有科目的总分
  10. let a = {
  11. lesson:{js:87,css:90,html:95},
  12. get data(){
  13. return Object.values(a.lesson)
  14. }
  15. }
  16. console.log( hd.sum1.call(null,a.data) )//输出272

Object.create()

通过Object.create 方法可以创建对象,在这里有两个参数,第一个参数是对象,第二个参数是该对象的属性特征设置,这个方法可以拷贝对象,但是只能浅拷贝

Object.setPrototypeOf()

Object.setPrototypeOf()方法用于将指定对象的原型对象设置到一个新的对象或null上。