javaScript的面向对象

什么是面向对象

面向对象，Object Oritented（简称 OO）是一种目前主流的编程思想，也是学习设计模式的前提，因为设计模式就是基于面向对象思想的。即es6中新添加的class类；

---

一，class的使用

1.class的目的就是让定义类更简单

我们先回顾用函数实现Peopel的方法：

function Peopel(name) {
    this.name = name;
}
Peopel.prototype.hello = function () {
    console.log('Hello, ' + this.name + '!');
}

如果用新的class关键字来编写Peopel，可以这样写：

// 类的开头得大写
class Peopel {
	// 构造器构造属性
    constructor(name) {
        this.name = name;
    }
    // 方法
    hello() {
        console.log('Hello, ' + this.name + '!');
    }
}

比较一下就可以发现，class的定义包含了构造函数constructor和定义在原型对象上的函数hello()（注意没有function关键字），这样就避免了Student.prototype.hello = function () {...}这样分散的代码。

// 创建一个人的实例
var xiaoming = new Peopel('小明');
console.log(xiaoming.name); // 小明
xiaoming.hello(); // hello，小明！

2.class的继承

继承父类，通过extends来实现，方法可以直接调用，属性需要调用super去执行

// 父类
class Peopel {
    constructor(name) {
        this.name = name;
    }
    eat() {
        console.log(`${this.name} eat something`);
    }
}
// 子类的继承Peopel
// 注意Student的定义也是class关键字实现的，而extends则表示原型链对象来自Peopel
class Student extends Peopel {
    constructor(name, number) {
        super(name); //调用super(),代替父类构造函数，初始化与父类共同的属性
        this.number = number;
    }
    information() {
        console.log(`姓名：${this.name}， 学号：${this.number}`)
    }
}
// 子类的继承Peopel
class Teach extends Peopel {
    constructor(name, major) {
        super(name);
        this.major = major;
    }
    teach() {
        console.log(`姓名：${this.name}, 主修：${this.major}`)
    }
}

实例

// 创建一个学生的实例
const newStudent = new Student('wendy', 101);
console.log(newStudent.name); // wendy
console.log(newStudent.number); // 101
newStudent.information(); // 姓名：wendy，学号：101

// 创建一个老师的实例
const newTeacher = new Teach('温老师', '语文');
console.log(newTeacher.name); // 温老师
console.log(newTeacher.major); // 语文
newTeacher.teach(); // 姓名：温老师，主修：语文

---

二，面向对象的三要素

• 继承，子类继承父类
• 封装，数据的权限和保密
• 多态，同一接口不同实现

1.继承的关键字，extends

class People {
    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}`)
    }
}

class Student extends People {
    constructor(name, age, number) {
        super(name, age)
        this.number = number
    }
    study() {
        alert(`${this.name} study`)
    }
}

let xiaoming = new Student('xiaoming', 10, 'A1')
xiaoming.study()
console.log(xiaoming.number)
let xiaohong = new Student('xiaohong', 11, 'A2')
xiaohong.study()

上述代码中，

• People是一种公共的抽离，不仅仅服务于Student
• 继承的意义就在于将底层的、公共的属性抽离出来，单独存放，提高复用，极少冗余

2.封装

封装特性涉及到几个关键字，用于规定属性或者方法的开放程度

• public 开放性访问
• protected 只有继承的子类可访问
• private 只有自身可访问

这是 java 中最基本的知识，不过在 ES6 中不支持，而在 typescript 是支持的。以下代码可在 http://www.typescriptlang.org/play/ 在线测试

// ts 代码，放在在线解析器中解析为 es5
class People {
    name
    age
    protected weight  // 定义 protected 属性
    constructor(name, age) {
        this.name = name
        this.age = age
        this.weight = 120
    }
    eat() {
        alert(`${this.name} eat something`)
    }
    speak() {
        alert(`My name is ${this.name}, age ${this.age}`)
    }
}

class Student extends People {
    number
    private girlfriend  // 定义 private 属性
    constructor(name, age, number) {
        super(name, age)
        this.number = number
        this.girlfriend = 'xiaoli'
    }
    study() {
        alert(`${this.name} study`)
    }
    getWeight() { 
        alert(`${this.weight}`)
    }
}

let xiaoming = new Student('xiaoming', 10, 'A1')
xiaoming.getWeight()
// console.log(xiaoming.girlfriend) // 注意，编译时会报错，直接会编译不通过！！！

• 减少耦合，不该外露的不外露
• 利于数据、接口的权限管理

问： ES6 中不支持怎么办？
一般有一个不成为的约定，即以_开头的属性或者方法，都是私有的，其他的都是开放的，这样即可按照约定分开public和private。
另外，如果 ES6 要实现绝对的“私有”，就得用闭包了，但是闭包不会自动清理内存的，这一点就不如private专业了。
用闭包，但问题是：
- 理解复杂，学习成本高，不够简单
- 不符合面向对象思想，因为闭包的数据不是对象的某个属性
- 无法清理内存

3.多态

多态即执行同样的方法，不同对象会有不同表现。前端用的比较少，因为这个特性一般要结合接口、重载、重写等 java 的特性去使用。举个例子说明：

class People {
    constructor(name) {
        this.name = name
    }
    saySomething() {

    }
}
class A extends People {
    constructor(name) {
        super(name)
    }
    saySomething() {
        alert('I am A')
    }
}
class B extends People {
    constructor(name) {
        super(name)
    }
    saySomething() {
        alert('I am B')
    }
}
let a = new A('a')
a.saySomething()
let b = new B('b')
b.saySomething()

用 js 只能简单演示，但是无法 100% 体现这种特性，用 java 的接口是最好的体现方式（如下两点）。但是 js 无法体现，也就说明平时用不到，也就不详细追究了。

• 类必须实现接口的方法
• 可以定义接口类型的变量，面向接口编程
  多态的好处：保持子类的开放性和灵活性，面向接口编程。

---

三，应用场景

jQuery是面向对象的典型代表，执行$('p')其实就是创建了一个实例，可以模拟一下jQuery的源码。

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) {

    }
    // 此处省略若干 API
}
window.$ = function (selector) {
    return new jQuery(selector)
}

测试代码

var $p = $('p')
console.log($p)
console.log($p.addClass)

另外，React和 vue中用到的组件，也是面向对象的实例。面向对象无处不在，当你需要设计、开发一个功能的时候，一定要考虑面向对象。

四，为何要用面向对象

经过半个多世纪发展，现在程序执行上抽象出了三种执行方式 —— 顺序、判断、循环 ，你不要以为这是理所当然本来就有的，它是经过长久摸索才出来的。例如之前还有 goto 语句，后来因为过于繁琐复杂，渐渐不再支持了。

列举这个例子的用意是为了说明，编程应该变得简单、有规律、结构化，而不是复杂、无章可循。程序中的数据也一样，也应该是结构化的、有规律的，因此就有了面向对象。这句话如果你现在看不明白，不着急，后面的课程根据实例慢慢消化。

数据结构化的重要性：如 babel 解析 JS ，vue 解析模板 ，所以的编译行为，都需要将字符串转化为 AST（抽象语法树，结构化数据），再执行接下来操作。

无论你理解与否，都要记住“编程应该 简单 & 抽象”，这两个词看似矛盾，却目的一样。无论是面向对象还是设计模式，都是为了这个目的。

最后引用刘慈欣《球状闪电》中的一句话 —— 早期的人们之所以没有实现计算机，不是因为他们想的不够复杂，而是因为想的不够简单，其实就 0 1 两个数而已。

五，其他

关于 typescript 的补充：

• 强类型语言，类型判断
• 属性判断，JS 中是大坑
• vue 源码用了 flow 做类型判断
• 做大型项目，多人协作，需要严格的标准规定，推荐使用 ts ；做小型临时性项目，不推荐