一、面向对象编程
1. 什么是面向对象编程?
面向对象是⼀种编程思想,经常被拿来和面向过程⽐比较。
其实说的简单点,
-
面向过程
关注的重点是动词,是分析出解决问题需要的步骤,然后编写函数实现每个步骤,最后依次调用函数。 -
面向对象
关注的重点是主谓,是把构成问题的事物拆解为各个对象,而拆解出对象的⽬的也不是为了实现某个步骤,而是为了描述这个事物在当前问题中的各种行为。
2. 面向对象的特点是什么?
封装
:让使⽤用对象的⼈不考虑内部实现,只考虑功能使用把内部的代码保护起来,只留出⼀ 些 api 接口供⽤户使⽤继承
:就是为了代码的复用
,从⽗类
上继承
出⼀些⽅法和属性,⼦类也有⾃己的⼀些属性多态
:是不同对象
作用于同⼀操作
产⽣不同的效果
。多态的思想实际上是把“想做什么”和“谁去 做“分开
⽐如下棋的过程,
① 面向过程是这样的:开局 → ⽩方下棋 → 棋盘展示 → 检查胜负 → 黑⽅下棋 → 棋盘展示 → 检查 → 胜负 → 循环
用代码表示可能是⼀连串函数的调⽤
init();
whitePlay(); // ⾥面实现一遍下棋的操作
repaint(); // 棋盘展示
check();
blackPlay(); // 再单独实现⼀遍下棋的操作
repaint(); // 棋盘展示
check();
② 面向对象是这样的:棋盘→ 开局 → 选⼿.下棋 → 棋盘.重新展示 → 棋盘.检查胜负 → 选手.下棋 → 棋盘.重新展示 → 棋盘.检查胜负
⽤代码表示可能是这样的
const checkerBoard = new CheckerBoard(); // CheckerBoard 类内部封账了了棋盘的操作,⽐比 如初始化棋盘,检查胜负关系等
const whitePlayer = new Player(‘white’); // Player 类内部封装了了各种玩家的操作,⽐比如等待, 落棋,悔悔棋
const blackPlayer = new Player(‘black’);
whitePlayer.start(); // start ⽅方法的结束,内部封装了了或者通过事件发布触发 checkerBoard.repaint(), checkerBoard.check()的调⽤
blackPlayer.start();
你只需要调用 new ⼀个 player, 然后调用 start 方法,也就是说我们只需要关注行为,⽽不需要知道内部到底做了什么。
⽽且如果要加⼀些新功能,比如悔棋,⽐如再加一个玩家,⾯向对象都很好扩展。
在上⾯的例子中,面向对象的特性是怎么表现出来的呢?
- 封装:Player, CheckerBoard 类,使用的时候并不需要知道内部实现了什么,只需要考虑暴露 出的 api 的使用
- 继承:whitePlayer 和 blackPlayer 都继承⾃自 Player,都可以直接使用 Player 的各种方法和属性
- 多态:whitePlayer.start() 和 blackPlayer.start() 下棋的颜色分别是白色和⿊色
什么时候适合使⽤⾯向对象
可以看出来,在⽐较复杂的问题面前,或者参与⽅较多的时候,⾯向对象的编程思想可以很好的简化问题,并且能够更好的扩展和维护。
而在⽐较简单的问题⾯前,⾯向对象和面向过程其实差异并不明显,也可以⼀步⼀步地按照步骤来调⽤。
二、JS 中的⾯向对象
1. 对象包含什么
- ⽅法
- 属性
2. ⼀些内置对象
Object
Array
Date
Function
RegExp
3. 创建对象
3.1 普通⽅式
每一个新对象都要重新写一遍 color 和 start 的赋值
const Player = new Object();
Player.color = "white";
Player.start = function () {
console.log("white下棋");
};
或者⼯厂模式,这两种方式都⽆法识别对象类型,比如 Player
的类型只是 Object
function createObject() {
const Player = new Object();
Player.color = "white";
Player.start = function () {
console.log("white下棋");
};
return Player;
}
3.2 构造函数 / 实例
通过 this
添加的属性和⽅法总是指向当前对象的,所以在实例化的时候,通过 this
添加的属性和⽅法都会在内存中复制⼀份,这样就会造成内存的浪费。
但是这样创建的好处是即使改变了了某⼀个对象的属性或⽅法,不会影响其他的对象(因为每⼀ 个对象都是复制的⼀份)
function Player(color) {
this.color = color;
this.start = function () {
console.log(color + "下棋");
};
}
const whitePlayer = new Player("white");
const blackPlayer = new Player("black");
Tips. 怎么看函数是不是在内存中创建了多次呢?
⽐如 3.2 构造函数中,我们可以看到 whitePlayer.start === blackPlayer.start; // 输出 false
3.3 原型
通过原型继承的⽅法并不是⾃身的,我们要在原型链上⼀层一层的查找,这样创建的好处是只在内存中创建⼀次,实例化的对象都会指向这个 prototype
对象。
function Player(color) {
this.color = color;
}
Player.prototype.start = function () {
console.log(color + "下棋");
};
const whitePlayer = new Player("white");
const blackPlayer = new Player("black");
3.4 静态属性
是绑定在构造函数上的属性方法,需要通过构造函数访问
⽐如我们想看一下⼀共创建了多少个玩家的实例
function Player(color) {
this.color = color;
if (!Player.total) {
Player.total = 0;
}
Player.total