乐趣区

js面向对象特征

我们都知道 js 面向对象拥有三大特征,分别为封装、继承、多态,其实在 javaScript 脚本语言中是不存在多态的,但是可以用 js 的方式实现多态中的两种效果重载、重写,那下面我们就来说一下面向对象的特征
封装
把抽象出的属性和对属性的方法封装在一起对外实现接口开放,说白了就是封装一个方法或是类可以传入参数,供相同功能的外界使用,来达到相同的目的,便于对代码的管理

代码
class Package {
constructor (animal){
this.animal = animal
}
zoo (animal) {
console.log(‘this is’+ this.animal)
}
static private () {
console.log(‘ 我是私有方法 ’)
}
}

let newPackage = new Package(‘ 大象 ’)
newPackage.zoo()
newPackage.private() // Uncaught TypeError: newPackage.private is not a function
上面的一个比较简单的封装例子,通过 animal 参数传递来达到我们想要的结果,但是 class 类里面的静态方法是不会对外开放的所以会找不到这个函数

继承
继承可以使得子类具有父类别的各种属性和方法,而不需要再次编写相同的代码。在令子类别继承父类别的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类别的原有属性和方法,使其获得与父类别不同的功能。另外,为子类追加新的属性和方法也是常见的做法。

代码
class PackageSon extends Package{
constructor(animal, food){
super(animal);
this.food = food
}
zoo () {
console.log(‘ 这是 ’+ this.animal)
}
eat () {
console.log(this.animal+this.food)
}
}

let newPackageSon = new PackageSon(‘ 大象 ’, ‘ 吃草 ’)
newPackageSon.zoo()
newPackageSon.eat()

上面的例子使用到了 es6 class 语法糖内的 super 方法,其实它是实现了在这里指向了父类中的 this 对象,然后子类的构造函数再对其进行修改,然后 zoo 函数实现了对父类的重写,eat 函数是子类新增的函数
多态
最开始我们已经知道了 js 严格讲是没有多态的,多态可以表现出我们的代码的多种状态,同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果。

重载表现 代码 // 重载
class overload {
init (callback) {
let data = {
‘go’: function () {
console.log(‘go’)
},
‘eat’: function () {
console.log(‘eat’)
},
‘sprot’: function () {
console.log(‘sprot’)
}
}
data[callback]()
}
}

var newOverload = new overload()
newOverload.init(‘go’)
newOverload.init(‘eat’)
newOverload.init(‘sprot’)

上面是一个重载的例子,它根据我们调用构造函数传入不同的参数,来实现不同的效果,其实这里也使用上面讲到了的封装,所以面向对象的特征是无处不在

重写表现 代码 // 重写
class rewrite {
go () {
console.log(‘ 我在走路 ’)
}
sport () {
console.log(‘ 我在运动 ’)
}
}
class rewriteSon extends rewrite{
go () {
console.log(‘ 我回家了 ’)
}
}

var newRewriteSon = new rewriteSon()
newRewriteSon.go()
newRewriteSon.sport()

上面是一个简单的重写例子,我们这里用到了继承,通过创建 rewrite 父类,编写了两个函数分别实现不同的操作,rewriteSon 子类继承了父类上面的两个方法,子类中又重新写了相同名字的 go 方法,所以子类会把继承过来父类中的 go 方法覆盖掉,从而实现自己想要的操作,打印 sport 方法时会依旧得出继承父类方法的操作,所以子类只重写了 go 方法

退出移动版