javascript面向对象编程(二):继承

上一章节讲述了面向对象编程【封装】相关的知识,还没看上一章节的同学点这里>>>传送门<<<先看上一篇,这一章节聊一聊面向对象编程的【继承】

一、什么时候需要继承?

当现有构造函数(类)属性和方法是自身所需要的但还不能满足自身的要求时,这时候就需要继承了,然后定义自身特有的一些属性或方法。

还拿上一章节的电脑来说,电脑是一个统称,它还可以细分为笔记本电脑,和台式机电脑(在这里就不提其他其他方面的电脑(机械设备的电脑等等))

比如,台式机电脑另外拥有屏幕尺寸,颜色,cpu之外的一个东西——机箱,同样机箱也有机箱的一些属性,长,宽,高等等。这时候可以抽象出一个台式机电脑的类,它拥有机箱的一些属性之外,同样继承了电脑所共有的屏幕尺寸,颜色,cpu。

示例代码:

//创建一个电脑的构造函数
function Computer(screenSize,color,cpu){
    this.screenSize = screenSize;
    this.color = color;
    this.cpu = cpu;
}
Computer.prototype.playVideo = function(){
    console.log('我具有播放音视频的功能')
}
Computer.prototype.writeWord = function(){
    console.log('我具有编辑文稿的功能')
}
//创建一个台式电脑的构造函数,让他继承电脑的属性和方法
function deskTypeComputer(screenSize,color,cpu,crateLong,crateWidth,crateHeight){
    this.crateLong = crateLong
    this.crateWidth = crateWidth
    this.crateHeight = crateHeight
    //继承电脑的共有属性
    Computer.apply(this,arguments)
}
//继承电脑原型上的方法
deskTypeComputer.prototype = Object.create(Computer.prototype);
//要把子类的constructor指向自身的constructor,否则实例对象就没办法准确判断出是具体哪个类实例化出来的
deskTypeComputer.prototype.constructor = deskTypeComputer

//生成的普通window电脑实例
const windowComputer = new Computer('1320*768','black','i5')
windowComputer.playVideo();//我具有播放音视频的功能
console.log(windowComputer.screenSize)//1320*768
console.log(windowComputer.color)//black
console.log(windowComputer.cpu)//i5

//生成window台式电脑实例
const windowDeskTypeComputer = new deskTypeComputer('1960*1280','white','i7','50cm','24cm','55cm');
windowDeskTypeComputer.writeWord();//我具有编辑文稿的功能
console.log(windowDeskTypeComputer.screenSize)//1960*1280
console.log(windowDeskTypeComputer.color)//white
console.log(windowDeskTypeComputer.cpu)//i7
console.log(windowDeskTypeComputer.crateLong)//50cm
console.log(windowDeskTypeComputer.crateWidth)//24cm
console.log(windowDeskTypeComputer.crateHeight)//55cm

二、apply和call的区别

在这里再简单的说一下apply和call的区别,这是function下的两个方法,这两个函数都可以用来改变this的指向:

apply()方法 :

function.apply(thisObj[, argArray])

A.apply(B,arguments)
代码的意思就是A对象的代码体将会在B对象中执行一遍,apply函数只接收两个参数,第一个是对象,第二个是数组。在函数内,arguments就是函数参数的数组集合。

call()方法:

function.call(thisObj[, arg1[, arg2[, [,...argN]]]])

A.call(B,parma1,parma2,parma3)
实现过程和apply一样,不同的是call函数接收多个参数,第一个是对象,第1+n个参数都是需要传递的实参

三、用ES6的calss类实现继承

同样再用ES6的语法来实现继承,代码如下

class Computer {
  constructor(screenSize, color, cpu){
    this.screenSize = screenSize
    this.color = color
    this.cpu = cpu
  }
  playVideo(){
    console.log('我具有播放音视频的功能')
  }
  writeWord(){
    console.log('我具有编辑文稿的功能')
  }
}
//使用extends关键字 deskTypeComputer 继承 Computer
class deskTypeComputer extends Computer{
  constructor(screenSize, color, cpu,crateLong, crateWidth, crateHeight){
    //继承父类的属性,super要放在第一行
    super(screenSize, color, cpu)
    //定义自己的属性
    this.crateLong = crateLong
    this.crateWidth = crateWidth
    this.crateHeight = crateHeight
  }
}
//生成的普通window电脑实例
const windowComputer = new Computer('1320*768', 'black', 'i5')
windowComputer.playVideo();//我具有播放音视频的功能
console.log(windowComputer.screenSize)//1320*768
console.log(windowComputer.color)//black
console.log(windowComputer.cpu)//i5

//生成window台式电脑实例
const windowDeskTypeComputer = new deskTypeComputer('1960*1280', 'white', 'i7', '50cm', '24cm', '55cm');
windowDeskTypeComputer.writeWord();//我具有编辑文稿的功能
console.log(windowDeskTypeComputer.screenSize)//1960*1280
console.log(windowDeskTypeComputer.color)//white
console.log(windowDeskTypeComputer.cpu)//i7
console.log(windowDeskTypeComputer.crateLong)//50cm
console.log(windowDeskTypeComputer.crateWidth)//24cm
console.log(windowDeskTypeComputer.crateHeight)//55cm

 以上便是面向对象编程【继承】相关的内容,欢迎大家踊跃发言。

猜你喜欢

转载自blog.csdn.net/m0_37792354/article/details/82500471