JavaScript 面向对象之工厂模式与构造函数详解

朱雀 2023-07-24 14:56 128阅读 0赞

# 面向对象 #

### 什么是面向对象？ ###

所谓的面向对象，是一种编程思想，编程思路，代码的书写格式。

之前为了简化代码，我们是将程序封装为函数的形式来调用  
函数会有一些小问题:：  
函数内部定义的局部作用域变量，函数外部无法直接调用  
函数调用使用时，会占用大量的系统内存，容易造成数据溢出数据泄露，容易被黑客攻击  
函数一般只是封装一些模块化的功能

复杂程序的封装会 封装成其他形式，使用面向对象的方式来封装程序。

### 面向对象的基本思想 ###

基本思路就是，创建一个对象，给这个对象，添加上属性和属性值，还有函数等方法  
之后通过操作这个对象，来完成需要的效果

##### 实例 #####

// 先通过一个函数的方法,来创建对象
    
    function createObj(){ 
        // 创建对象
        const obj = { };
    
        // 给对象添加属性和属性值
        obj.name = '张三';
        obj.age = 18;
        obj.addr = '北京';
        obj.sex = '男';
    
        // 给对象添加方法
        obj.funNameAge = function(){ 
            console.log(this.name , this.age);
        };
        obj.funNameAddr = function(){ 
            console.log(this.name , this.addr);
        };
        obj.funSexAge = function(){ 
            console.log(this.sex , this.age);
        };
        obj.funAll = function(){ 
            console.log(this.name, this.sex , this.age, this.addr);
        };
    
        // 返回这个创建好的对象
        return obj;
    }
    
    // 调用函数,函数创建对象,并且作为返回值
    // 变量中存储的就是函数创建的对象
    const obj = createObj();
    
    // 可以通过调用obj中存储的对方的方法,来实现功能
    obj.funAll();

# 工厂模式 #

所谓的工厂模式，是一种书写函数的语法形式，语法规范  
就向工厂中的流水线一样，按照步骤来执行需要的操作。

### 规则 ###

步骤1：创建对象
    步骤2：给对象定义属性和属性值
    步骤3：给对象添加方法
    步骤4：定义对象为返回值

### 实例 ###

// 标准的工厂模式,会有对应的参数
    
    function createDumpling(pi,mian,xian,tioliao){ 
        // 创建包饺子对象
        const dumpling = { };
    
        // 给包饺子对象,添加属性
        dumpling.pi = pi;
        dumpling.xian = xian;
        dumpling.mian = mian;
        dumpling.tiaoliao = tiaoliao;
    
        // 给包饺子对象,添加方法
    
        // 和面
        dumpling.huomian = function(){ 
            console.log(this.mian);
        };
    
        // 和饺子馅
        dumpling.huoxian = function(){ 
            console.log(this.xian);
        };
    
        // 包饺子
        dumpling.bao = function(){ 
            console.log(this.xian,this.pi,this,mian);
        };
    
        // 煮饺子
        dumpling.zhu = function(){ 
            console.log('煮饺子了,等着吃吧');
        };
    
        // 返回包饺子对象
        return dumpling;
    }
    
    // 要开始包饺子
    
    // 创建一个执行包饺子功能的对象,并且输入参数
    
    const baojiaozi1 = createDumpling('薄皮' , '白面粉' , '猪肉大葱');
    
    const baojiaozi2 = createDumpling('厚皮' , '玉米面' , '鱼香肉丝');
    
    
    console.log(baojiaozi1);
    // 可以调用任意的封装的方法
    baojiaozi1.huoxian();   // 调用和饺子馅方法
    baojiaozi1.huomian();     // 调用和面方法

# 构造函数 #

所谓的构造函数，实际也是一种函数  
构造函数专门用于生成，定义对象的  
通过构造函数生成的对象，称为实例化对象。  
例如：

创建对象的方法，有两种：
    字面量  const obj = {};
    构造函数  const obj = new Object();
    这个构造函数，就是JavaScript程序定义好的构造函数，我们直接使用就可以了。

### 强调 ###

**构造函数：** 就是一种函数，是专门用于生成对象的函数  
**实例化对象：** 就是通过构造函数生成的对象，称为实例化对象

### 分类 ###

构造函数分为两种：  
一种是JavaScript程序定义好的构造函数，称为 **内置构造函数**  
一种是程序员自己定义的构造函数，称为 **自定义构造函数**

### 构造函数和普通函数的区别 ###

1. 构造函数一定要和 关键词 new 一起使用
     	new 关键词具有特殊的功能,
     	会自动的给 构造函数中 定义一个对象,并且返回这个对象
     	我们只要对这个对象设定属性,设定方法就可以了
    2. 构造函数为了和其他函数区别
     	语法规范规定,构造函数,函数名称,第一个字母必须大写,使用大驼峰命名法
    3. 构造函数,给对象定义属性和方法的语法,与一般函数不同

**注：实例化对象和普通的对象，没有任何的区别，只是建立方式不同而已。**

### 如何自定义构造函数 ###

注意：1. 函数名称要使用大驼峰命名法
    	 2. 自定义构造函数中，不要 定义对象 和 定义return
        new 关键词会执行，如果定义了，会产生冲突

##### 实例 #####

##### 总结 #####

**new 的作用**

1. 在构造函数中，自行创建一个对象，并且返回这个对象
    2. 因为new 关键词创建了对象，此时，构造函数中的this，才会指向这个对象
       也就是将来生成的实例化对象
    3. 所有的构造函数中，this的指向，都是将来通过这个构造函数生成的实例化对象

# 构造函数中的小问题 #

### 问题的产生 ###

##### 实例 #####

// 自定义构造函数
    function CrtObj(name, age, sex, addr) { 
        // 定义属性
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.addr = addr;
        // 定义方法
        this.funAll = function () { 
            console.log(this.name, this.age, this.sex, this.addr);
        }
    }
    
    // 定义了构造函数,可以生成实例化对象
    const obj1 = new CrtObj('张三',18,'男','北京');
    const obj2 = new CrtObj('李四',19,'女','上海');
    const obj3 = new CrtObj('王五',20,'不详','火星');
    
    // 每个实例化对象中,都有属性和方法
    
    console.log(obj1);
    console.log(obj2);
    console.log(obj3);

通过同一个构造函数，生成的实例化对象  
属性相同，属性值可能不同  
定义的方法的程序，是相同的  
但是，如果做一个比较判断，结果是 false

console.log( obj1.funAll == obj2.funAll );

##### 原因 #####

每次创建对象，都会在对象上定义一个新的方法，也就是新的函数
    函数存储时会生成一个独立的存储空间，不同函数有不同的存储空间

这表示 不同的实例化对象中，定义的是不同的方法/函数  
不同的方法和函数，会占用过多的内存空间  
要想办法，让使用同一个构造函数，生成的实例化对象，都是相同的方法。

### 解决的方式 ###

**将构造函数需要定义给实例化对象的方法，定义在函数的 prototype 属性中。**

##### 实例 #####

function CrtObj2(name, age, sex, addr) { 
        // 定义属性
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.addr = addr;
    }
    // 在构造函数的 prototype 属性中,来定义实例化对象的方法
    CrtObj2.prototype.fun = function(){ 
        console.log(this.name, this.age, this.sex, this.addr);
    };
    
    const obj4 = new CrtObj2('张三',18,'男','北京');
    const obj5 = new CrtObj2('李四',19,'女','上海');
    
    console.log(obj4);
    console.log(obj5);
    
    obj4.fun();
    
    console.log( obj4.fun === obj5.fun );