aiyoudiao aiyoudiao
  • JavaScript
  • Vue
  • React
  • 低代码
  • 线性系统
  • 暂未分类
  • LeetCode
  • 算法
  • 数据结构
  • 设计模式
  • Other
  • PMP
  • Office
  • 面试
  • Bash
  • 流年往事
  • 经验片段
  • 读书杂感
  • 归档
  • 分类
  • 标签
  • 简介
  • 收藏
  • 有趣
  • 文档

码二

扫微信二维码,认识一下码二吧😉。
  • JavaScript
  • Vue
  • React
  • 低代码
  • 线性系统
  • 暂未分类
  • LeetCode
  • 算法
  • 数据结构
  • 设计模式
  • Other
  • PMP
  • Office
  • 面试
  • Bash
  • 流年往事
  • 经验片段
  • 读书杂感
  • 归档
  • 分类
  • 标签
  • 简介
  • 收藏
  • 有趣
  • 文档
  • LeetCode

  • 算法

  • 数据结构

  • 设计模式

    • 浅聊设计理念
    • 谈一谈设计原则
    • 工厂方法模式
    • 抽象工厂模式
    • 建造者模式
    • 原型模式
      • 前言
      • 原型模式
    • 单例模式
    • 桥接模式
    • 代理模式
    • 装饰器模式
    • 适配器模式
    • 享元模式
    • 组合模式
    • 外观模式
    • 观察者模式
    • 模板方法模式
    • 策略模式
    • 职责链模式
    • 状态模式
    • 迭代器模式
    • 访问者模式
    • 备忘录模式
    • 命令模式
    • 解释器模式
    • 中介者模式
  • Other

  • vue3设计与实现

  • 算法与设计
  • 设计模式
aiyoudiao
2022-02-21

原型模式

# 前言

原型模式属于创建型模式,这个类型的设计模式是将 对象的创建和使用解耦了,花式的去创建对象。

# 原型模式

应用场景:克隆已有对象,分为浅克隆、深克隆。意在减少创建重复对象的成本,有时你要创建的对象可能与已创建对象仅有细微差别,这时候你可以直接克隆已存在的对象,然后再变更你克隆的对象的数据,最终快速达到你预期的结果。

理解:复杂对象的创建和使用解耦了,通过对象克隆可以很简单的获得一个一摸一样的对象,内部还是进行了对象创建的操作。克隆对象的操作分为浅克隆和深克隆,浅克隆操作比较简单,而深克隆相对来说复杂一些,通过以上的代码示例可以看出来。浅克隆只能克隆一些皮毛,而且有时你修改了浅克隆后的对象会影响之前被你克隆的对象,这样的副作用很不友好,所以一般都使用深克隆。当然实际开发中一个复杂的对象会比代码示例中复杂几倍、十几倍、几十倍等等,所以一般都会采取三种方式:一、通过js动态语言的特性以及递归循环判断类型的方式来进行深克隆 (opens new window)。二、通过 JSON.parse(JSON.stringify(obj))的方式,这种方式会将对象序列化为json字符串然后再反序列化为js对象,不过这种方式只能克隆数据,遇到复杂的就会有副作用,比如无法克隆对象的函数。三、采用面向对象的方式针对性的去硬编码完成这个复杂对象的克隆操作,虽然很标准,但是用在动态语言上就显得不那么灵活了,比如下面的代码示例。

namespace creative_mode_04 {

    // 产品类
    class Student {

        name: string = ''
        age: string = ''
        height: string = ''
        // classNum: string = ''
        // levelNum: string = ''
        // teacher: string = ''
        // father: string = ''
        // mother: string = ''
        dog?: Dog 
        cat?: Cat
    }

    class Dog {
        dogName: string = ''
        dogIQ?: number
    }

    class Cat {
        catName: string = ''
        catIQ?: number
    }

    // 浅克隆、深克隆的接口
    interface ICloneStudentable {
        clone (student: Student): Student
        deepClone (student: Student): Student
    }

    // 克隆机器
    class CloneMachine implements ICloneStudentable {
        // 浅克隆
        clone(student: Student): Student {
            if (!student || !(student instanceof Student)) {
                throw new Error("param is null or not Student instance.")
            }

            const newStudent = new Student()
            newStudent.name = student.name
            newStudent.age = student.age
            newStudent.height = student.height
            newStudent.dog = student.dog
            newStudent.cat = student.cat

            return newStudent
        }
        // 深克隆
        deepClone(student: Student): Student {
            if (!student || !(student instanceof Student)) {
                throw new Error("param is null or not Student instance.")
            }

            const newStudent = new Student()
            newStudent.name = student.name
            newStudent.age = student.age
            newStudent.height = student.height
            newStudent.dog = new Dog()
            newStudent.dog.dogName = student.dog?.dogName || ''
            newStudent.dog.dogIQ = student.dog?.dogIQ
            newStudent.cat = new Cat()
            newStudent.cat.catName = student.cat?.catName || ''
            newStudent.cat.catIQ = student.cat?.catIQ

            // const newStudent = JSON.parse(JSON.stringify(student))
            return newStudent
        }
    }

    // 复杂对象初始化
    const student1 = new Student()
    student1.name = '马文'
    student1.age = '8岁'
    student1.height = '120cm'
    student1.dog = new Dog()
    student1.dog.dogName = '黄元帅'
    student1.dog.dogIQ = 20
    student1.cat = new Cat()
    student1.cat.catName = '毛牙'
    student1.cat.catIQ = 12

    // 使用
    const cloneMachine = new CloneMachine()

    // 浅克隆
    const newStudent1 = cloneMachine.clone(student1)
    newStudent1.name = '马子明' // 部分修改
    console.log('newStudent1 === student1 ===>>> ', newStudent1 === student1) // false
    console.log('newStudent1.dog === student1.dog ===>>> ', newStudent1.dog === student1.dog) // true
    console.log('newStudent1.cat === student1.cat ===>>> ', newStudent1.cat === student1.cat) // true

    // 深克隆
    const newStudent2 = cloneMachine.deepClone(student1)
    newStudent2.name = '江钰' // 部分修改
    console.log('newStudent2 === student1 ===>>> ', newStudent2 === student1) // false
    console.log('newStudent2.dog === student1.dog ===>>> ', newStudent2.dog === student1.dog) // false
    console.log('newStudent2.cat === student1.cat ===>>> ', newStudent2.cat === student1.cat) // false
}
#设计模式
上次更新时间: 10年18月2023日 01时57分53秒
建造者模式
单例模式

← 建造者模式 单例模式 →

最近更新
01
01.数据结构导论一览.md
10-16
02
30.2023年06月04日.md
06-04
03
08.与测量相关.md
05-06
更多文章>
Theme by Vdoing | Copyright © 2017-2023 aiyoudiao 码二 备案号: 鄂ICP备2022002654号-1