JS继承的方法

继承的作用

继承通常的作用是用过使用继承从而得到代码的复用.

js中new的作用

举个例子,var a=new Human()

产生一个空对象a
使this=这个空对象
this.__proto__=Human.prototype
执行Human.call(this,x,y,z.....)
return this

使用prototype的两种继承方法

使用es5,用prototype实现继承

 function Human(name){
     this.name = name  //this为生成的实例对象
 }
 Human.prototype.run = function(){  //写Human的prototype
     console.log("我叫"+this.name+"，我在跑")
     return undefined  //return undefined
 }
 function Man(name){
     Human.call(this, name)
     this.gender = '男'
 }
//-----------------------------方法一-------------------------------------------------
//由JS中new的作用得到只要不让其执行第4步就可以得到结果
 var f = function(){}//生成一个空函数
 f.prototype = Human.prototype//让空函数的prtotype指向Human的prototype对应的地址
 Man.prototype = new f()//这里f里没有函数,所以不会执行内部函数,
 
//-------------------------------------------------------------------------------

 Man.prototype.fight = function(){
     console.log('糊你熊脸')
}

//------------------------------方法二-------------------------------------------------
//Man.__proto__.prototype=Human.prototype        IE不支持
//-------------------------------------------------------------------------------
var obj=new Man('Lee')

使用es6,使用关键字class,实际上内部还是在执行上述方法,js中没有类的概念.

 class Human{
     constructor(name){
         this.name = name
     }
     run(){
         console.log("我叫"+this.name+"，我在跑")
         return undefined
     }
 }
 class Man extends Human{
     constructor(name){
         super(name)  //使用关键字super
         this.gender = '男'
     }
     fight(){
         console.log('糊你熊脸')
     }
     get age(){//声明变量
          return '20'
    }
 }

两者区别:
相同点: 都能完成继承实际上都是用的prototype,因为js中没有类.
不同点: 使用prototype能更好理解js中继承的实质,即用改写原型链的方式来复用代码.当声明原型的变量时
直接写xx.prototype.yy=zz,而class要写成类似函数的方式get yy(){return zz}.另外前者使用ES5语法,后者使用ES6语法,在考虑简便性时考虑后者,在考虑兼容性问题时,优先使用前者.

最后编辑于：2019.01.02 10:29:36