面向对象编程＜前端学习笔记＞

一.什么是面向对象编程？

编程思想：
面向过程：关注的是动词，分析解决问题所需的步骤，针对所有步骤一一实现一些函数，安装顺序来调用函数。
面向对象：关注的是主谓，是把构成这个问题的所有事物，拆解成一个个的对象，这一个个的对象是为了描述这个对象在问题中的各种行为方式。

面向对象编程的特性

1.封装：让使用对象的人不用去考虑内部实现，对象对外暴露出一些API，提供给用方使用。
2.继承：为了代码复用，从父类上继承它允许继承的属性和方法。
3.多态：不同的对象作用于同一操作，然后产生不同结果。多态思想实际上是把“做什么”和“谁去做”这两者分离开。

面向对象编程的特性表现

⽐如下棋的过程--
⾯向过程是这样的：开局 ⽩⽅下棋 棋盘展示 检查胜负 ⿊⽅下棋 棋盘展示 检查胜负 循环⽤代码表示可能是⼀连串函数的调⽤
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 ⽅法，也就是说我们只需要关注⾏为，⽽不需要知道内部到底做了什么。⽽且如果要加⼀些新功能，⽐如悔棋，⽐如再加⼀个玩家，⾯向对象都很好扩展

1.封装：Player, CheckerBoard 类，使⽤的时候并不需要知道内部实现了什么，只需要考虑暴露出的 api 的使⽤
1.继承：whitePlayer 和 blackPlayer 都继承⾃ Player，都可以直接使⽤ Player 的各种⽅法和属性
2.多态：whitePlayer.start() 和 blackPlayer.start() 下棋的颜⾊分别是⽩⾊和⿊⾊

什么场景适合面向对象编程

面向过程：简单的场景下，协同人员较少
面向对象：中型或者大型项目中，协同人员较多，迭代频繁，健壮

二.JS中的面向对象

object-based

方法
属性

JS中的一些内置对象

Array Date Function RegExp  

JS中怎么创建对象

1.普通方式

每⼀个新对象都要重新写⼀遍 color 和 start 的赋值

const Player = new Object();
Player.color = "white";
Player.start = function () {
 console.log("white下棋");
};

工厂模式（用函数封装）

function createObject(color) {
    const Player = new Object();
    Player.color = color;
    Player.start = function () {
        console.log(color + "下棋");
    };
    return Player;
}

const red = new createObject('red');
const black = new createObject('black');

console.log(red);
console.log(red.constructor);//不知道继承了谁，无法识别对象类型

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");

console.log(whitePlayer);
console.log(whitePlayer.constructor);//可以知道继承了谁，识别类型
whitePlayer.start();
blackPlayer.start();
console.log(blackPlayer.start === whitePlayer.start);//false start方法在不同内存地址

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");

console.log(whitePlayer.constructor);//知道继承了谁，知道类型
console.log(whitePlayer.start === blackPlayer.start);//true 同一个原型上的方法 ，不重新分配内存

4.静态属性

是绑定在构造函数上的属性⽅法，需要通过构造函数访问⽐如我们想看⼀下⼀共创建了多少个玩家的实例

function Player(color) {
    this.color = color;
    if (!Player.total) {
        Player.total = 0;
    }
    Player.total++;
}
let p1 = new Player("white");
console.log(Player.total); // 1
let p2 = new Player("black");
console.log(Player.total); // 2