// 类,即模版
class People {
constructor(name, age) {
this.name = name
this.age = age
}
eat() {}
speak() {}
}
三要素
继承,子类继承父类
// 父类
class People {
constructor(name, age) {
this.name = name
this.age = age
}
eat() {}
speak() {}
}
// 子类继承父类
class Student extends People {
constructor(name, age, number) {
super(name, age)
this.number = number
}
study() {}
}
封装,数据的权限和保密
// 父类
class People {
name
age
protected weight // 受保护的属性,只有自己或者子类可以访问
constructor(name, age) {
this.name = name
this.age = age
this.weight = 120
}
eat() {}
speak() {}
}
// 子类 继承父类
class Student extends People {
number
private girlfriend
constructor(name, age, number) {
super(name, age)
this.number = number
this.girlfriend = 'xiaoli'
}
study() {}
getWeight() {
console.log(this.weight)
}
}
多态,同一接口不同实现
class People {
constructor(name) {
this.name = name
}
saySomething() {}
}
class A extends People {
constructor(name) {
super(name)
}
saySomething() {
console.log("A")
}
}
class B extends People {
constructor(name) {
super(name)
}
saySomething() {
console.log("B")
}
}
JS应用
class jQuery {
constructor(selector) {
let slice = Array.prototype.slice
let dom = slice.call(document.querySelectorAll(selector))
let len = dom ? dom.length : 0
for(let i = 0; i < len; i++){
this[i] = dom[i]
}
this.length = len
this.selector = selector || ''
}
append(node) {}
addClass(name) {}
html(data) {}
}
window.$ = function(selector) {
// 工厂模式
return new jQuery(selector)
}
面向对象的意义
程序执行:顺序、判断、循环——结构化
面向对象——数据结构化
对于计算机,结构化的才是最简单的
UML类图
泛化,表示继承
关联,表示引用
class People {
constructor(name, house) {
this.name = name
this.house = house
}
saySomething() {}
}
class A extends People {
constructor(name, house) {
super(name, house)
}
saySomething() {
console.log("A")
}
}
class B extends People {
constructor(name, house) {
super(name, house)
}
saySomething() {
console.log("B")
}
}
class House {
constructor(city) {
this.city = city
}
showCity() {
console.log(this.city)
}
}
let aHouse = new House('上海')
let a = new A('a', aHouse)
let b = new B('b')