继承

关注

发布于: 2021 年 03 月 30 日

本人就个人理解所写的几种继承方式，若有错误，欢迎指正：

1.类式继承

function Animal(){  this.name='dog'  this.age = 18}// 将run方法挂载在Animal的原型上
Animal.prototype.run= function() {   console.log('跑啊跑')}// 声明一个子函数function son(){  this.color="black"}// 如果son想要继承Animalson.prototype = new Animal()var p1 = new son()console.log(p1.name) // dog

复制代码

但是，在使用上述方法继承的时候存在一个弊端，弊端如下

function Animal(){  this.name='dog'  this.age = 18  this.type= ['pig','dog']}// 将run方法挂载在Animal的原型上Animal.prototype.run= function() {   console.log('跑啊跑')}// 声明一个子函数function son(){  this.color="black"}// 如果son想要继承Animalson.prototype = new Animal()var p1 = new son()p1.type.push('wangcai')console.log(p1.type) // ["pig", "dog", "wangcai"]var p2 = new son()console.log(p2.type) // ["pig", "dog", "wangcai"]

复制代码

我们在改变实例化 p1 对应的 type 时，同样的我们也修改了实例 p2 对应的 type，这样就存在了弊端

2.使用构造函数的方式继承

// 构造函数的继承方式function Animal(color){  this.name='dog'  this.color = color  this.type= ['pig','dog']}// 将run方法挂载在Animal的原型上Animal.prototype.run= function() {   console.log('跑啊跑')}//  声明一个子方法function son(color){  Animal.apply(this,arguments)}var p1 = new son('black')p1.type.push('duck')console.log(p1.color) // blackconsole.log(p1.type) //  ["pig", "dog", "duck"]var p2 = new son('white')console.log(p2.color) // whiteconsole.log(p2.type)  //  ["pig", "dog"]

复制代码

但是使用以上方法存在一个缺陷，我们无法访问父元素的公共方法

p2.run() // menu.html:90 Uncaught TypeError: p2.run is not a function

复制代码

构造函数的继承方式相当于改变了 this 的指向

3.混合式继承

混合式继承就是把类式继承与构造函数继承混合起来

function Animal(color){  this.name='dog'  this.color = color  this.type= ['pig','dog']}// 将run方法挂载在Animal的原型上Animal.prototype.run= function() {   console.log('跑啊跑')}//  声明一个子方法function son(color){  Animal.apply(this,arguments)}// 类式继承son.prototype = new Animal('red')// 声明一个子对象的实例var p1 = new son('black')p1.type.push('duck')console.log(p1.color) // blackconsole.log(p1.type) //  ["pig", "dog", "duck"]var p2 = new son('white')console.log(p2.color) // whiteconsole.log(p2.type)  //  ["pig", "dog"]p2.run() // '跑啊跑'

复制代码

采用混合式继承就改变了已上两种继承方式的弊端

发布于: 2021 年 03 月 30 日阅读数: 8

y

关注

还未添加个人签名 2019.08.05 加入

还未添加个人简介

发布

暂无评论

创作场景

继承

y

评论