当前位置:首页 > js javascript面向对象继承的几种方法

js javascript面向对象继承的几种方法

发布于 2018-04-17 阅读 623 次 面向对象 Javascript
比如现在有一个 Animal类 function Animal () { this.name = "动物"; this.eat = function(){ console.log('动物可以吃'); } } Animal.prototype.say = function(){ console.log(this.name +' 发出声音') } 有一个猫类 ```javascript function Cat (){ this.name = "猫"; } ``` 现在要实现猫类继承动物类。 ####原型继承方式 将父类的一个实例赋值给子类的原型 ```javascript Cat.prototype = new Animal(); Cat.prototype.constructor = Cat; ``` Cat.prototype = new Animal();这行会改变Cat.prototype 的constructor指向,由于实例的constructor也是调用prototype的constructor,而由Cat类创建的实例constructor本应该是Cat所以需要重新将Cat.prototype.constructor指向Cat `缺点:`无法像父类构造函数传参,无法实现多重继承。 ####构造继承 在子类的构造函数中调用父类构造函数 ```javascript function Cat(){ Animal.apply(this, arguments); this.name="猫"; } ``` 缺点:这种继承方式只能继承实例属性和方法不能继承父类原型上的方法 ####直接继承prototype 我们可以让子类的prototype直接继承父类的prototype ```javascript Cat.prototype = Animal.prototype; ``` 缺点:这种方法有问题,Cat.prototype 和 Animal.protype会指向同一个空间,修改一个都会影响另一个。 ####通过空函数做媒介,实现组合继承 ```javascript F = function(){} F.prototype = Animal.prototype; function Cat(){ this.name = "猫"; Animal.apply(this,arguments); //得到父类的实例属性和方法 } Cat.prototype.constructor = Cat; Cat.prototype = new F(); //得到父类的原型属性和方法 //可以封装成一个函数,方便使用 function extend(Child, Parent){ var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); } ``` ####拷贝继承 ```javascript function Cat(name){ var animal = new Animal(); for(var p in animal){ Cat.prototype[p] = animal[p]; } Cat.prototype.name = name || 'Tom'; } ``` 这里可能会涉及到一个深度拷贝的问题,拷贝的时候需要判断类型,如果是基本类型就直接赋值,如果不是需要进行深度拷贝。 ####相关知识: [对象的浅复制和深度克隆](https://www.w2le.com/p/48 "对象的浅复制和深度克隆")
共 2 条评论