我爱编程

js里面的原型与原型链

2018-05-17  本文已影响0人  lvzhiyi

原型与原型链算是js里面的一个老生常谈的问题,面试的中奖率也是很高,他到底是个什么鬼

原型是什么?原型有什么作用?

   const am1 = { 
         name : 'dog',
         sea  : function(){{ console.log(this.name) }},
         run  :  function(){{ console.log(this.name) }}
   }
   const am2 = { 
         name : 'cat',
         sea  :  function(){{ console.log(this.name) }},
         run  :  function(){{ console.log(this.name) }}
   }
   ……
   ……
   ……

首先js里面万物皆对象,对象的分为静态属性和原型属性(实例属性);上面对象里面的name等属性都是对应对象的静态属性;每个对象都含有toString()等方法实例属性,上面对象都是 Object的实例,相当于const am1 = new Object({name:'dog',……})

上面创建的对象都含有相同的方法函数,方法函数的代码没有形成共用,并且所有的对象各占各的内存;为了更节约内存和代码的复用,我们引入prototype优化一下

   Object.prototype.sea =  function(){{ console.log(this.name) }};
   Object.prototype.run =  function(){{ console.log(this.name) }};
   const am1 = {
         name : 'dog'
   }
   am1.sea()  //'dog'

现在不管创建多少个对象,只需要new出来实例化就行了,sea run 两个函数始终是指向构造函数的 prototype 属性,共用一个内存;而prototype就是实例化对象的原型属性

原型链

原型有了,原型链可以通俗的理解成以原型连接起来的“链条”,而“链条”的连接点就是对象的__proto__属性;

  class A {
  }
  class B extends A {
  }
  console.log(A.__proto__=== Function.prototype, A.prototype.__proto__ === Object.prototype)
  console.log(B.__proto__=== A, B.prototype.__proto__ === A.prototype)

通过继承B继承了A的prototype属性,这里的B的prototype与A的prototype指向同一个内存;B.proto指向继承过来的构造函数类A,B.prototype.proto指向继承过来的A的prototype属性;

而处于原型链的顶端的是 Object.prototype.__proto__指向null

js规定__proto__指向对象的原型链引用,此例中

 B.prototype.__proto__ === A.prototype 
A.prototype.__proto__ === Object.prototype
Object.prototype.__proto__  === null

构成了所谓的原型链

这里class类为构造函数对象,子类的__proto__指向继承的父类;因此存在另外一条继承链

B.__proto__ === A
A.__proto__ === Function.prototype
Function.prototype.__proto__   === Object.prototype
上一篇 下一篇

猜你喜欢

热点阅读