面向对象 - 什么是面向对象 - 《前端杂记》

一、概念
- 1.1 类
- 1.2 对象(实例)
二、三要素
四、面向对象的意义

一、概念

1.1 类

类，即模板。

// 类，即模板
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}`);
  }
}

1.2 对象(实例)

// 创建实例
let li = new People('li', 20);
li.eat();
li.speak();
// 创建实例
let wang = new People('wang', 21);
wang.eat();
wang.speak();

二、三要素

2.1 继承

继承：子类继承父类。特征：

继承可将公共方法抽离出来(抽离出来放置父类中)，提高复用，减少冗余； ```javascript // 父类 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 is ${this.age}); } }

// 子类继承父类 class Student extends People { constructor(name, age, number) { super(name, age); // 传递给父类的构造函数进行执行

this.number = number; // 学号

}

study() { alert(${this.name} is study); } }

// 创建实例 let xiaoming = new Student(‘xiao ming’, 20, ‘A12345’); xiaoming.study(); xiaoming.speak(); console.log(‘学号:’, xiaoming.number);

由上述代码可知，实例不仅可以执行子类的方法，也可以执行**父类的方法**。
举例：在React框架中，继承应用如下：
```javascript
class Category extends React.Component {
  // ...
}

2.2 封装

封装：利于数据的权限和保密。特征如下：

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

在封装中，有重要的三个关键字，如下：

public: 完全开放；
protected: 对子类开放；
private：对自己开放；

而 JS 中，并没有上述三个关键字，无法体现封装特性，故需借用 TypeScript 来完成封装特性。

// 父类
class People {
  name; // 默认是 public 属性
  age;
  protected weight; // 受保护的属性，只有自己或者子类可以访问
  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 is ${this.age}`);
  }
}
// 子类继承父类
class Student extends People {
  number;
  private girlfriend; // 定义 private 属性
  constructor(name, age, number) {
    super(name, age); // 传递给父类的构造函数进行执行
    this.number = number; // 学号
    this.girlfriend = 'Han MeiMei';
  }
  study() {
    alert(`${this.name} is study`);
  }
  getWeight() {
    alert(`weight is ${this.weight}`);
  }
}
// 创建实例
let xiaoming = new Student('xiao ming', 20, 'A1234');
xiaoming.study();
xiaoming.getWeight();
console.log('学号:', xiaoming.number);
// 报错：无法访问 protected 属性
// alert(xiaoming.weight);
// 报错：无法访问 private 属性
// alert(xiaoming.girlfriend);

注：

ES6 目前不支持，一般认为**_**开头的属性是 private。

2.3 多态

多态：同一个接口不同实现。特征：

可保持子类的开发性和灵活性(注：子类对父类接口进行重写)；
面向接口编程(注：有时不需要管下面子类是怎么实现的，只需管父类有多少接口，实现相应接口就行)； ```javascript class People { constructor(name) { this.name = name; }

say() {} }

class A extends People { constructor(name) { super(name); // 传递给父类的构造函数进行执行 }

// 多态：多态的核心含义就是定义一个接口，但是可以在子类中实现不同的功能 say() { alert(I am class A); } }

class B extends People { constructor(name) { super(name); }

// 多态：多态的核心含义就是定义一个接口，但是可以在子类中实现不同的功能 say() { alert(I am class B); } }

const a = new A(‘a’); a.say();

const b = new B(‘b’); b.say();

在JS语言中，针对多态：
- 同一个接口，可以有不同表现；
- JS 应用极少；
<a name="LvKTd"></a>
## 三、应用举例
jQuery 是一个 **class**，而 `$('div')`是 jQuery 的一个**实例**，如下所示：
```javascript
class jQuery {
  constructor(selector) {
    const slice = Array.prototype.slice;
    /**
    *    document.querySelectorAll 返回的是 NodeList，但 NodeList 不是一个数组。
    * 借助 Array.prototype.slice 可以将 NodeList 转成数组。
    * Array.prototype.slice can now convert certain host objects.
    * (e.g. NodeList’s) to arrays — something that majority of modern browsers have been able to do for quite a while.
    */
    const doms = slice.call(document.querySelectorAll(selector));
    for (let i = 0; i < doms.length; i++) {
      this[i] = doms[i];
    }
    this.selector = selector || '';
  }
  addClass(name) {}
  append(node) {}
  html(data) {}
  //.... 省略 N 个 API
}
window.$ = function (selector) {
  // 通过工厂模式，返回 jQuery 实例
  return new jQuery(selector);
};
var $div = $('div');
console.log($div);
console.log($div.addClass);

参考：

jQuery源码

四、面向对象的意义

对于计算机来说，结构化的才是最简单的。

程序执行：顺序、判断、循环 —— 结构化
面向对象 —— 数据结构化

结构化编程与面向对象编程 面向对象编程（OOP）和结构化编程是两种编程范式。编程范式是计算机编程的一种基本样式。编程范例不同于如何表示程序的每个元素以及如何定义解决问题的步骤。顾名思义，OOP专注于使用真实世界的对象及其行为来表示问题，而结构化编程则处理在逻辑结构中组织程序。

什么是结构化编程？ 假定结构化编程的诞生年份是1970年。结构化编程被认为是命令式编程的一个子集。结构化程序由简单的程序流结构组成，这些结构是分层组织的。它们是顺序、选择和重复。序列是语句的顺序。选择是指根据程序的当前状态从一组语句中选择一个语句（例如使用if语句），重复是指执行一个语句直到达到某个状态（例如使用for或while语句）。ALGOL、Pascal、Ada和PL/I是当今使用的一些结构化编程语言。

什么是面向对象编程？ 在OOP中，重点是从现实世界的元素来思考要解决的问题，并用对象及其行为来表示问题。类描述真实世界对象的抽象表示。类类似于蓝图或模板，它们收集可以组合在一起的类似项或事物。类具有称为属性的属性。属性被实现为全局变量和实例变量。类中的方法表示或定义这些类的行为。类的方法和属性称为类的成员。类的实例称为对象。因此，对象是一种与真实世界中的对象非常相似的数据结构。

有几个重要的OOP概念，如数据抽象、封装、多态性、消息传递、模块化和继承。通常，封装是通过使属性私有化来实现的，同时创建可用于访问这些属性的公共方法。继承允许用户从其他类（称为超级类）扩展类（称为子类）。多态性允许程序员用一个类的对象代替它的超类的对象。通常，在问题定义中找到的名词直接成为程序中的类。同样，动词变成了方法。一些最流行的OOP语言是Java和C。

注：编程应该简单 & 抽象。