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

面向对象

什么是面向对象？

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

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

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

面向对象的基本思想

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

实例

// 先通过一个函数的方法,来创建对象

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 关键词会执行，如果定义了，会产生冲突

实例

function CrtObj(name,age,sex,addr){
    // 在构造函数中,使用this,来指代对象
    // 这个对象,就是我们使用构造函数,生成的实例化对象
    
    // 定义属性
    // 给实例化对象,添加name属性,属性值是输入的name参数
    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 )
    };
    this.funNameAge = function(){
        console.log(this.name,this.age)
    };
    this.funSexAddr = function(){
        console.log(this.sex,this.addr )
    }

}

// 通过自定义构造函数来生对象,实例化对象
// 调用执行构造函数时,都必须要和new 关键词一起使用
const obj1 = new CrtObj('张三',18,'男','北京');
console.log(obj1);
// 调用 对象/实例化对象 中的方法
obj1.funAll();
obj1.funNameAge();
obj1.funSexAddr();

总结

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