夯实基础，彻底掌握js的核心技术(二)：面向对象编程（Object Oriented Programming）

淩亂°似流年 2023-02-26 02:24 14阅读 0赞

### 单例设计模式（Singleton Pattern） ###

#### 1. 单例模式解决的问题： ####

表现形式：

Var obj = { 
    xxx; xxx,
    …
    }

#### 2. 作用： ####

#### 把描述同一件事物的属性和特征进行“分组、分类”（存储在同一个推内存空间中），因此避免了全局变量之间的冲突和污染 ####

var pattern1 = { name: ‘xxx’}
    var pattern2 = {  name: ‘xxx’}
    //name值并不是一个值，属于两个堆内存空间中

在单例设计模型中，obj不仅仅是对象名，它被称为”命名空间\[NameSpace\]”,  
把描述事务的属性存放到命名空间中，多个命名空间是独立分开的，互不冲突

#### 3. 单例设计模式命名的由来 ####

每一个命名空间都是js中Object这个内置基类的实例，而实例之间是相互对立不干扰的，所以我们称它为“单例”：单独的实例

#### 4. 高级单例模式 ####

1.  在给命名空间赋值的时候，不是直接赋值一个对象，而是先执行匿名函数，形成一个私有作用域AA（不销毁的栈内存），在AA中创建以爱国堆内存，把内存地址赋值给命名空间
2.  这种模式的好处：我们完全可以在AA中创造很多内容（变量或者函数），哪些需要供外面的调取使用的，我们暴露到返回的对象中（模块化实现的一种思想）

如下图例子：

var nameSpace = (function () { 
    	var n = 12
    	function fn () { }
    	return { 
    	fn: fn
    	}
    })

this:

1.  给当前元素的某个事件绑定方法，当事件触发方法执行的时候，方法中的this是当前元素操作的元素对象
2.  普通函数执行，函数中的this取决于执行的主体，谁执行的，this就是谁（执行主体：方法执行，看方法名前面是否有“点”，有的话，点前面是谁this就是谁，没有this是window）

function fn () { 
    	console.log(1)
    }
    var obj = { fn:fn}
    
    // 执行的是相同的方法，但是this指向不同
    obj.fn(); // this=> obj
    fn(); // this指向window
    
    // 自执行函数，方法的this指向window
    ~function() { 
     // this => window
    } ()

解析如下图：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0FpCDWm-1594650877968)(https://cdn.nlark.com/yuque/0/2020/png/148146/1594520569024-f2ffeb80-2d05-425c-8ec4-be5785044520.png\#align=left&display=inline&height=384&margin=%5Bobject%20Object%5D&name=image.png&originHeight=768&originWidth=1858&size=536805&status=done&style=none&width=929)\]\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9kNh0vA6-1594650877970)(https://cdn.nlark.com/yuque/0/2020/png/148146/1594520727798-261bb33a-195d-494d-b546-d23685fde946.png\#align=left&display=inline&height=395&margin=%5Bobject%20Object%5D&name=image.png&originHeight=790&originWidth=1604&size=531226&status=done&style=none&width=802)\]][img-Q0FpCDWm-1594650877968_https_cdn.nlark.com_yuque_0_2020_png_148146_1594520569024-f2ffeb80-2d05-425c-8ec4-be5785044520.png_align_left_display_inline_height_384_margin_5Bobject_20Object_5D_name_image.png_originHeight_768_originWidth_1858_size_536805_status_done_style_none_width_929_img-9kNh0vA6-1594650877970_https_cdn.nlark.com_yuque_0_2020_png_148146_1594520727798-261bb33a-195d-494d-b546-d23685fde946.png_align_left_display_inline_height_395_margin_5Bobject_20Object_5D_name_image.png_originHeight_790_originWidth_1604_size_531226_status_done_style_none_width_802]

#### 5. 基于单例的模块化开发 ####

1.  团队协助开发的时候，会把产品按照功能板块进行划分，每个功能板块都有专人负责开发
2.  把各个版块之间公用的部分进行提取封装，后期在想实现这些功能，直接的调取即可

### 工厂模式（Factory Pattern） ###

工厂模式（Factory Pattern）

1.  把实现相同功能的代码进行‘封装’，以此来实现‘批量生产’（后期想要实现这个功能，我们只需执行函数即可）
2.  ‘低耦合高内聚’：减少页面中的冗余代码，提高代码的重复使用率

function createPerson (name, age) { 
    	var obj = { }
      obj.name = name;
      obj.age = age;
      return obj
    }
    var p1 = createPerson('xxx', 25)
    var p2 = createPerson('xxx', 25)
    console.log()

### 拥抱面向对象 ###

面向对象编程，我们需要掌握“对象、类、实例”的概念  
对象：万物皆对象  
类： 对象的具体细分（按照功能特点进行分类：大类、小类）  
实例：类中具体的一个事物（拿出类别中的具体一个实例进行研究，那么当前类别下的其他实例也具备这些特点和特征）  
js中内置类  
object 对象类 （基类）

1.  Number数字类 String Boolean Null Undefined Array RegExp Function Date …
2.  HTMLCollection 每一个元素集合都是它的实例
3.  NodeList
4.  EventTarget
    
        Node: Element:HTMLBodyElement HTMLDivElement<br />       WindowProperties: Window: window对象就是它的实例
5.  基于基类，我们可以创建很多自己的类（自定义类）

结构如下图：  
![image.png][]

### 构造函数（constructor） ###

#### 1. 基于构造函数创建自定义类（constructor） ####

1.  在普通函数执行的基础上“new xxx()”,这样就不是普通函数执行了，而是构造函数执行，当前函数名称称之“类名”，接收返回的函数结果是当前类的一个实例
2.  自己创建的类名，最好第一个单词首字母大写
3.  这种构造函数设计模式执行，主要用于组件、类库、插件、框架等的封装，平时编写业务逻辑一般不用这样处理

function Fn() { }
    var f1 = new Fn()  //Fn是类 f1是类的一个实例
    var f2 = new Fn()   // f2也是Fn的一个实例
    // f1和f2是独立的，互不影响

#### 2. JS中创建值有两种方式： ####

1.  字面量方式

var obj = { }

1.  构造函数模式

var obj = new Object()

不管哪一种方式创造出来的都是Object类的实例，而实例之间是独立分开的，所以var xxx = \{\} 这种模式也是js中的单例模式.

#### 3. 基本数据类型基于两种不同的模式创建出来的值是不一样的 ####

*  基于字面量方式创建出来的值是基本类型值
 *  基于构造函数创建出来的值是引用类型

var num1 = 12; // 数字类Number实例，数字类的特殊表达方式之一
    var num2 = new Number(12); // 数字类的实例
    console.log(typeof num1) // "number"
    console.log(typeof num2)  // "object"

#### 4. 构造函数运行机制 ####

普通函数执行：

1.  形成一个私有的作用域
2.  行参赋值
3.  变量提升
4.  代码执行
5.  栈内存释放问题

普通函数执行流程如下图：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PeIVDwOX-1594650877973)(https://cdn.nlark.com/yuque/0/2020/png/148146/1594610009317-c06bea64-a992-4168-881b-10915b310d57.png\#align=left&display=inline&height=288&margin=%5Bobject%20Object%5D&name=image.png&originHeight=576&originWidth=1918&size=57493&status=done&style=none&width=959)\]][img-PeIVDwOX-1594650877973_https_cdn.nlark.com_yuque_0_2020_png_148146_1594610009317-c06bea64-a992-4168-881b-10915b310d57.png_align_left_display_inline_height_288_margin_5Bobject_20Object_5D_name_image.png_originHeight_576_originWidth_1918_size_57493_status_done_style_none_width_959]  
  
构造函数执行：  
既有普通函数执行的一面，也有构造函数执行的一面

function Fn(name, age) { 
    	var n = 10;
      this.name = name;
      this.age = age + n;
    }
    var f1 = new Fn('xxx', 20);
    var f2 = new Fn('aaa', 30)
    console.log(f1=== f2); // false:两个不同的实例（两个不同的堆内存地址）
    console.log(f1.age)  //30
    console.log(f2.name) // 'aaa'
    console.log('name' in f1) // true name和age在两个不同的实例都有存储，但是都是每个实例自己的私有属性
    console.log(f1.n) // undefined 只有this.xxx =xxx 的才和实例有关系，n是私有作用域的一个私有变量而已

1.  像普通函数执行一样，形成一个私有作用域（栈内存）

行参赋值、变量提升，都是私有变量

1.  【构造函数独有操作】在js代码自上而下执行之前，首先在当前形成的私有栈中创建一个对象（创建一个堆内存：暂时不存储任何东西），并且让函数中的执行主体（this）指向这个新的堆内存（this === 创建的对象）
2.  代码开始自上而下执行
3.  【构造函数执行独有】代码执行完成，把之前创建的堆内存地址返回（浏览器默认返回）

![image.png][image.png 1]  
![image.png][image.png 2]

#### 5. 构造函数中的一些细节问题 ####

1.  构造函数执行，不写return ,浏览器会默认返回创建的实例，如果自己写了return

*  return 是一个基本值，返回的结果依然是类的实例
 *  直接return是结束代码执行，不会覆盖实例
 *  如果返回的是引用值，则会把默认值返回的实例覆盖，此时接收到结果就不再是当前类的实例了

所以**构造函数执行的时候，尽量减少return使用，防止覆盖实例**  
\*\*

1.  在构造函数执行的时候，如果不需要传递实参数，我们可以省略小括号，还是创建实例（和加小括号是没有区别的）
2.  instanceof: 检测某一个实例是否隶属于这个类
3.  in:检测当前对象是否存在某个属性（不管当前这个属性是对象的私有属性还是公有属性，只要有结果就是true）
4.  hasOwnProperty: 检测当前属性是否为对象的私有属性（不仅要有这个属性，而且必须还是私有的才可以）

### 原型链设计模式（prototype & **proto**） ###

#### 1. 原型链机制 ####

原型（prototype）、原型链（**proto**）  
\[函数\]  
普通函数、类（所有的类：内置类、自己创建的类）  
\[对象\]  
普通对象、数组、正则、Math  
实例是对象类型的（除了基本类型的字面量创建的值）  
prototype的值也是对象类型的  
函数也是对象类型  
…

1.  所有的函数数据类型都是天生自带一个属性：prototype（原型），这个属性的值是一个对象，浏览器会默认给它开辟一个堆内存
2.  在浏览器给prototype开辟的堆内存中，有一个天生自带的属性：constructor,这个属性存储的值是当前函数本身
3.  每一个对象都有一个\_\_proto\_\_的属性，这个属性指向当前实例所属类的prototype

![image.png][image.png 3]  
原型链：  
它是一种基于\_\_proto\_\_向上查找的机制。当我们操作实例的某个属性或者方法的时候，首先找自己空间中私有属性或者方法

*  找到了，则结束查找，使用自己私有的即可
 *  没有找到，则基于\_\_proto\_\_找所属类的prototype,如果没找到，基于原型上的\_\_proto\_\_继续，向上查找，一直找到Object.prototype的原型为止，如果再没有，操作的属性或者方法不存在

function Fn() { 
    	var n = 10;
      this.AA = function () { 
      	console.log('AA')
      }
      this.BB = function () { 
      	console.log('BB')
      }
    }
    Fn.prototype.AA = function () { 
    	console.log('AA[公]')
    }；
    var f1 = new Fn;
    var f2 = new Fn

解析如下图：![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hPw53hoY-1594650877977)(https://cdn.nlark.com/yuque/0/2020/png/148146/1594649468888-b7feb737-e1e0-4397-8fde-084310ca8ae3.png\#align=left&display=inline&height=385&margin=%5Bobject%20Object%5D&name=image.png&originHeight=770&originWidth=1944&size=683618&status=done&style=none&width=972)\]][img-hPw53hoY-1594650877977_https_cdn.nlark.com_yuque_0_2020_png_148146_1594649468888-b7feb737-e1e0-4397-8fde-084310ca8ae3.png_align_left_display_inline_height_385_margin_5Bobject_20Object_5D_name_image.png_originHeight_770_originWidth_1944_size_683618_status_done_style_none_width_972]

### 总结： ###

本篇文章主要分享了面向对象的一些知识，如果想了解更多，请扫下面二维码，关注公众号  
![qrcode\_for\_gh\_4d3763fa9780\_258 (1).jpg][qrcode_for_gh_4d3763fa9780_258 _1_.jpg]

[img-Q0FpCDWm-1594650877968_https_cdn.nlark.com_yuque_0_2020_png_148146_1594520569024-f2ffeb80-2d05-425c-8ec4-be5785044520.png_align_left_display_inline_height_384_margin_5Bobject_20Object_5D_name_image.png_originHeight_768_originWidth_1858_size_536805_status_done_style_none_width_929_img-9kNh0vA6-1594650877970_https_cdn.nlark.com_yuque_0_2020_png_148146_1594520727798-261bb33a-195d-494d-b546-d23685fde946.png_align_left_display_inline_height_395_margin_5Bobject_20Object_5D_name_image.png_originHeight_790_originWidth_1604_size_531226_status_done_style_none_width_802]: /images/20230209/38324fd2809642c892a9dcedccedca0c.png
[image.png]: /images/20230209/bb67a241115a4d0288c53c73503fb719.png?
[img-PeIVDwOX-1594650877973_https_cdn.nlark.com_yuque_0_2020_png_148146_1594610009317-c06bea64-a992-4168-881b-10915b310d57.png_align_left_display_inline_height_288_margin_5Bobject_20Object_5D_name_image.png_originHeight_576_originWidth_1918_size_57493_status_done_style_none_width_959]: /images/20230209/70690304ca5748f6ab7df97ae019016b.png
[image.png 1]: /images/20230209/ec090cd6b8154aa1bb2a40402a246157.png
[image.png 2]: /images/20230209/638474d160334aca87320bfbee802888.png
[image.png 3]: /images/20230209/81c1984b15f24097ba6e96499637fb0d.png?
[img-hPw53hoY-1594650877977_https_cdn.nlark.com_yuque_0_2020_png_148146_1594649468888-b7feb737-e1e0-4397-8fde-084310ca8ae3.png_align_left_display_inline_height_385_margin_5Bobject_20Object_5D_name_image.png_originHeight_770_originWidth_1944_size_683618_status_done_style_none_width_972]: /images/20230209/053dc9e3644d43ab9e385646569406bc.png
[qrcode_for_gh_4d3763fa9780_258 _1_.jpg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9qcGVnLzE0ODE0Ni8xNTk0NjUwNzk4NzEyLWFjYWY4MGQ4LWRhZDAtNDRjMS1hNzZiLThlZjg4ZTg3MzVkMi5qcGVn