【JS设计模式2】面向对象

面向对象的概念

类

类就是模板
比如说

class Person{
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  eat() {
    alert(`${this.name} eat something`)
  }
  speak() {
    alert(`My name is ${this.name}, age ${this.age}`)
  }
}

这里将Person做成一个模板，name和age就是它的属性，Person还有很多动作，比如说这里的动作行为是eat和speak。
所以在类里面一般分为两个：

• 属性：一般是指一些静态的值（字符串或者数字）
• 函数或方法：动作要执行一些逻辑

实例（对象）

通过类可以实例化很多对象，比如说：

let babao = new Person('八宝君', 25);
babao.eat();
babao.speak();

babao.eat()

babao.speak()

三要素：继承，封装，多态

继承：子类继承父类

定义一个父类

再定义一个子类

学生是一个子类，继承自Person, 然后学生一般都有一个号码，用super将name和age传递给父类的构造函数来执行。自己处理number，为什么呢？因为学号只有学生才有。
然后另外定义了一个study方法。
子类继承了父类之后，创建一个实例。

定义实例

依次会弹出下面4个弹窗

弹窗1

弹窗2

弹窗3

弹窗4

【PS】

• People是父类，公共的，不仅仅服务于Student
• 继承可将公共方法抽离出来，提高复用，减少冗余

---

封装：数据的权限和保密

public 完全开放  protected 对子类及自己开放
private 对自己开放
ES6尚不支持，可以用typescript来演示

这部分是TypeScript里的，什么都不写默认是public公开的。
protected和private都是不允许在外面访问的。
比如说new了一个实例，然后打印或者alert一下protected或privatae的属性，会发现编译不通过。

【特点】:

• 减少耦合，不该外露的不外露
• 利于数据、接口的权限管理
• ES6目前不支持，一般认为_开头的属性是private(自己设计的时候可以根据这个规则来)

---

多态：同一接口不同实现

• 同一个接口，不同表现
• JS应用极少

• 需要结合java等语言的接口、重写、重载等功能

  
  
  定义了一个people的父类
  
  
  然后A和B都继承了它，并且拥有了各自的实例
  
  

  执行是依次弹出这两个窗口

  
  
  我是A的实例a
  
  
  我是B的实例b
  
  父类中定义了一个接口，但是可以在子类中实现不同的功能。
  【特点】
• 保持子类的开放性和灵活性
• 面向接口编程
• (JS引用极少，了解即可)

---

JS的应用举例

• jQuery是一个class
• $('p')是jQuery的一个实例
  
  这一块是我从视频上截下来的
  
  简单的说一下：
  左侧的大图，先是jQuery的构造函数，然后就是jQuery的常用API了。

window.$ = function(selector) {
  return new jQuery(selector)
}

这个是什么意思呢，jquery是一个构造函数，return new jquery也就是返回它的一个实例，然后下面的：

var $p = $('p')

是说将p传进去，上面的selector也就是p，$p也就是jQuery的一个实例，$p.addClass也就是实例上的方法。

---

面向对象的意义

程序执行：顺序、判断、循环------结构化
面向对象-------数据结构化
对于计算机，结构化的才是最简单的
编程应该 简单&抽象