封装、继承、多态——简介

封装

封装将属性或方法隐藏,对外开放接口。

在写项目的时候,我们经常会在不同的地方需要用到相同的方法或属性,倘若每个地方都要写一遍,不仅代码量大而且也会浪费我们的时间,这时候我们就可以将这些方法或属性封装起来

//  定义一个运算的函数
class Operation{
  constructor(){}
  // 写一个加法函数
  add(x, y){
    return x + y
  }
  // 写一个减法函数
  subtraction(x, y){
    return x - y
  }
}
// 需要的时候,我们只需要实例化就可以调用写好的函数
let num = new Operation()
console.log(num.add(1,5))   // 6
console.log(num.subtraction(1,5))   //-4

继承

子类可以继承父类的属性和方法,而不需要再次编写,子类也可以有自己的属性和方法

// 定义一个父类,里面存在一个说话的方法
class Person{
  constructor(){}
  say(name, age){
    return `我叫${name},今年${age}岁`
  }
}
// 实例化父类并调用方法
let people = new Person()
console.log(people.say('小明',14))

// 定义一个字类继承父类
class Exercise extends Person{
  constructor(){
    super()
  }
  // 定义一个爱好的方法
  like(name, love){
    return `我是${name},我喜欢${love}`
  }
}

// 实例化子类
let children = new Exercise()
// 子类的实例化对象可以直接调用父类的方法
console.log(children.say('小花', 11))
// 子类的实例化对象调用自己的方法
console.log(children.like('小花', '写代码'))

多态

字面意思即‘多种状态’,可以理解为相同的方法,相同的参数,结果不同

多态的表现形式重写与重载

重写

子类继承父类后可以使用父类的方法,当子类想用父类的方法但需要一些改变时,子类可以对父类的方法进行重写

// 定义一个父类,里面存在一个说话的方法
class Person{
  constructor(){}
  say(name, age){
    return `我叫${name},今年${age}岁`
  }
}
// 实例化父类并调用方法
let people = new Person()
console.log(people.say('小明',14)) // 我叫小明,今年14岁

// 定义一个字类继承父类
class Exercise extends Person{
  constructor(){
    super()
  }
  // 重写父类说话方法
  say(name, age){
    return `你好,我是${name},今年${age}岁`
  }
}

// 实例化子对象
let children = new Exercise()
// 调用重写方法
console.log(children.say('小花', 11)) // 你好,我是小花,今年11岁

重载

相同的方法,接收的参数不同,返回的结果不一样

严格来讲,js并没有重载的概念,但我们可以进行模拟

// 定义一个类,通过判断参数的类型来返回不同的结果
class Person{
  constructor(adjustment){
    switch(typeof adjustment){
      case 'number':
        console.log('数字')
        break;
      case 'string':
        console.log('字符串')
        break;
      case 'boolean':
        console.log('布尔')
        break;
    }
  }
}
new Person(123)     // 数字
new Person('abc')   // 字符串
new Person(true)    // 布尔

最后,关于封装、继承、多态还有很多更细的知识没有写到,这次只是简单的了解,以后会详细的介绍每一个o( ̄▽ ̄)ブ

原文地址:https://www.cnblogs.com/loveyt/p/10422900.html