文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画
❥❥❥❥点个赞，让我知道你来过~❥❥❥❥

0 / 单例设计模式

假设：你需要录入两个人的信息：李雷和韩梅梅。不要问我他们是谁

我本来想举个例子，叫"妈妈喊你去相亲"。后来一想，换个例子吧，被妈妈说也就算了，看个代码还要被扎心，太可怜了吧

在最开始学代码时候，我可能会这样写▽

let name = '李雷';let age = 26;let sex = '男';
let name = '韩梅梅';let age = 28;let sex = '女';

but，如果要把这两段代码放在一个js文件里，肯定会冲突啊怎么办？分个组吧：

let person1 = {    name:'李雷',    age:26,    sex:'男'};let person2 = {    name:'韩梅梅',    age:28,    sex:'女'};

△ 这样把信息分组归类了

person1和person2是一个对象，也叫命名空间，可以减少全局变量的污染。

以上的person1和person2也是单例设计模式（singleton pattern），即：只有一个实例的对象。

在JS中，以对象字面量的方式和构造函数模式是可以创建单例对象的。

单例设计模式：把描述事务的信息放到一个命名空间中进行归类，防止全局变量污染

高级单例模式：你在开发中也经常用，比如：公共模块都写在utils里面、页面模块单独写在一个JS文件里面

let utils = (function (){    function deepCopy(){        //.....CODE    }    function addHandler(){        //....CODE    }        //...CODE        return {        deepCopy,        addHandler    };})();

△ 高级单例模式

高级单例模式使用闭包的保护机制，让里面的代码不受外界的干扰。

函数执行会形成一个全新的私有作用域，保护里面的代码不受到外界的干扰，这种保护机制就是闭包。闭包有两个作用：保护和保存。传送门：图解 | 理解闭包

1 / 工厂模式

写一两个人的信息好弄，如果班里有30个人，这样一个个写得累蒙圈了，而且会产生大量的重复代码。

于是，可以造一个工厂出来，批量可以把属性都造出来：

function person(name, age, sex){    let person = {};        person.name = name;    person.age = age;    person.sex = sex;        return person;}let p1 = person('李雷', 26, '男');let p2 = person('韩梅梅', 28, '女');let p3 = person('莉莉', 26, '女');//....余下的人信息

△ 在单例的基础上可以批量产出属性，录入信息了

person就是个函数，函数的意义在于什么？封装

工厂模式：用函数来封装以特定的方式来创建对象的细节。

（1）低耦合：可以减少一个个创建对象这些冗余的代码

（2）高内聚：提高代码的重复使用率

2 / 面向对象

【PS:这个概念很大，以我目前的知识储备和文字表达能力可能说的不是很清楚的，请见谅~】

面向对象编程（Object Oriented Programming）

还记得第一次面试，面试官问：什么是对象？答：万物皆对象~【PS：那时候真勇敢呀~】

△ 20.1_自然中的分类【PS：请原谅我的生物知识都还给老师了~~】

"万物皆对象"中的"对象"本身只是一个泛指，任何事物都是一个对象，都可以是我们研究和面对的。

把抽象的“对象”，按照特点来进行分类（大类/小类）后，把共同的东西抽取出来，放到对应的类别中。即：“类”是对“对象”一种细分和公共部分的封装。

通过类别派生出来的具体事务叫做：类的“实例”

实例既有属于自己私有的东西，也会继承各个类别中的公有信息

面向对象编程需要掌握“对象”“类”“实例”之间的关系


△ 20.2_画个草图

比如，之前写的一个选项卡：

    <div id="tabBox" class="tabBox">        <ul id="navBox" class="navBox">            <li class="active">代码</li>            <li>看书</li>            <li>运动</li>        </ul>        <div class="active">            读读代码            <p>公号：朝霞的光影笔记</p>            <p>ID：zhaoxiajingjing</p>        </div>        <div>            书中自有颜如玉            <p>公号：朝霞的光影笔记</p>            <p>ID：zhaoxiajingjing</p>        </div>        <div>            瘦子生活模式，好好吃饭，好好生活            <p>公号：朝霞的光影笔记</p>            <p>ID：zhaoxiajingjing</p>        </div>    </div>


△ 20.3_查看元素

△ 20.4 研究一个实例

研究一个实例：

1、私有的信息

2、所属类公有的信息

3、一层层从小类别一直找到Object为止，研究属性和方法

dir(tabBox)|=>__proto__:HTMLDivElement.prototype|=>__proto__:HTMLElement.prototype|=>__proto__:Element.prototype|=>__proto__:Node.prototype|=>__proto__:EventTarget.prototype|=>__proto__:Object.prototype

3 / 预告

请问：原型和原型链是啥？