JavaScript设计模式-工厂设计模式(1)

165 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情

什么是设计模式

设计模式是一种编程思想或者是代码管理的思想,基于不同的设计模式可以帮助我们解决某些特定问题,也可以理解成一些问题的解决方案,我们使用设计模式的目的在于使得我们编写代码实现“高内聚”和“低耦合”,设计模式也可以让我们编写的代码提高性能,提升我们开发的效率;

工厂设计模式

工厂设计模式对应的是我们生活中常见的工厂,对一类相同的产品实现制造,打包,出厂等操作,工厂设计模式也是如此,工厂设计模式需要配合其构造函数结合new关键字进行实现,单独使用构造函数实现会出现问题

没使用new关键字

工厂设计模式其实就是一个闭包的操作,每个由工厂生产出来的数据,不同之处在于内存地址不同

function Fn() {
    function main() {
        console.log('...工厂模式');
    };
    // 添加原料
    let obj = {};
    // 加工原料
    obj.fn = main;
    obj.v = 1;
    // 出厂
    return obj;
};

function Page() {
    let obj = {};
    obj.v = 1;
    // 出厂
    return obj;
};
//调用工厂函数
let a1 = Fn();
let b1 = Fn();
let page = Page();
// 调用工厂函数返回的函数
a1.fn();
b1.fn();
console.log('a1当前的构造函数', a1.constructor); //Object
console.log('page当前的构造函数', page.constructor); //Object
console.log('对象的比较', a1.fn === b1.fn); //false,
/**
对象比较的有俩个条件
1.地址一样
2.内容一样,这里表现出了,就是当前的函每创建一次就执行一次,创建一个函数进行挂载
**/

以上没有采用new关键字使用构造函数创建出来的数据存在以下几个问题

  1. 对象识别问题,现在有俩个工厂一个是Fn一个是Page,现在的a1虽然是调用的Fn,但是他不知道他是属于Fn工厂的还是page工厂的,page也是一样的,constructor返回对创建此对象的函数
  2. 性能问题,就是说当前的函数每执行一次就要调用一次,就有又开辟出来一块空间

这里我们可以采用new关键字进行解决目前所遇到的问题

使用new关键字

我们首先要知道new关键字做了那些事情

  1. 执行函数;
  2. 自动创建一个空对象;
  3. 把创建的对象指向另外一个对象;
  4. 把空对象和函数里的this 衔接起来;(this指向实例化对象)
  5. 隐式返还this;
function Tab(name = '前端若水', age = '20') {
//由于new运算符会帮我们自动创建空对象所以免得创建了,由于new运算符会帮我们把空对象和this链接起来所以可以不用对象名直接用this
    this.name = name;
    this.age = function() {
            console.log(`我是${this.name},今年${age}岁!`);
        }
        // 由于new运算符会隐式返还this,所以我们不需要去return
};
// 使用构造函数
let a1 = new Tab();
let a2 = new Tab();
// 使用构造函数的方法
a1.age();
/*会有一个公共空间prototype原型,他会去开辟一个空间去存放我们的方法,prototype和__proto__是一样的 */
Tab.prototype.psf = function() {
        console.log(`原型方法`);
    }
    // 如果是未使用new 关键字,调用多少次,就开辟出多少个函数内存进行执行,但是使用了new关键字,把方法挂载在了prototype上面,这样的话,函数就放在了公共空间里面
console.log(`同一个构造函数,且挂载到了peototype上的方法${a1.psf===a2.psf}`);
// 这样没有挂载的,函数每执行一次就创建一个空间,但是挂载到原型上面的就只会创建一个空间,更节约性能
console.log(`同一个构造函数,没有挂载的方法${a1.age===a2.age}`);
// 查看当前的构造函数是哪个
console.log(a1.constructor);

使用new关键字就可以轻松解决工厂模式的对象识别问题和性能问题,所以工厂设计模式是需要使用构造函数结合new关键字进行实现的!

坚持努力,无惧未来!