【设计模式】构造器模式和原型模式

构造器模式

如果我们系统中有多个员工,创建每一个员工都需要 new 一下,出现很多重复代码,所以我们可以将他们写成一个构造函数,然后通过传入的不同参数创建不同的员工。

js 复制代码
function Employee(name, age) {
    this.name = name
    this.age = age
    this.toString = function() {
        return `name: ${this.name}, age: ${this.age}`
    }
}

const employee1 = new Employee('张三', 18)
console.log("=>(index.js:7) employee1", employee1); 
//=>(index.js:7) employee1 Employee { name: '张三', age: 18, toString: [Function (anonymous)] }

原型模式

以上代码中toString 方法,每次 new 一个对象都需要重新创建一个,而这个方法却是每一个 Employee 共有的,所以能不能把这个方法提取到一个公共的地方捏?

此时就需要我们使用原型模式,将 toString 方法挂载到 Employee 的原型上。

js 复制代码
function Employee(name, age) {
    this.name = name
    this.age = age
}

Employee.prototype.toString = function () {
    return `name: ${this.name}, age: ${this.age}`
}

const employee1 = new Employee('张三', 18)
console.log("=>(index.js:7) employee1", employee1);
//=>(index.js:7) employee1 Employee { name: '张三', age: 18 }
console.log(employee1.toString())
// name: 张三, age: 18

那假如我们使用 ES6 写法呢?

js 复制代码
class Employee {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    toString() {
        return `name: ${this.name}, age: ${this.age}`
    }
}
const employee1 = new Employee('张三', 18)
console.log("=>(index.js:7) employee1", employee1);
//=>(index.js:7) employee1 Employee { name: '张三', age: 18 }
console.log(employee1.toString())
// name: 张三, age: 18

很神奇!toString 直接被挂载到原型上!

所以说,es6 类的写法同时兼顾了构造器模式和原型模式。

应用场景有比如组件的复用,状态管理等。

相关推荐
何大春13 分钟前
【弱监督语义分割】Self-supervised Image-specific Prototype Exploration for WSSS 论文阅读
论文阅读·人工智能·python·深度学习·论文笔记·原型模式
吾与谁归in14 分钟前
【C#设计模式(13)——代理模式(Proxy Pattern)】
设计模式·c#·代理模式
吾与谁归in15 分钟前
【C#设计模式(14)——责任链模式( Chain-of-responsibility Pattern)】
设计模式·c#·责任链模式
闲人一枚(学习中)23 分钟前
设计模式-创建型-原型模式
设计模式
Iced_Sheep1 小时前
干掉 if else 之策略模式
后端·设计模式
哪 吒8 小时前
最简单的设计模式,抽象工厂模式,是否属于过度设计?
设计模式·抽象工厂模式
Theodore_10228 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
转世成为计算机大神11 小时前
易考八股文之Java中的设计模式?
java·开发语言·设计模式
小乖兽技术12 小时前
23种设计模式速记法
设计模式
小白不太白95014 小时前
设计模式之 外观模式
microsoft·设计模式·外观模式