设计模式理解

151 阅读2分钟

工厂模式·抽象工厂-----抽象类约定的是功能,具体功能实现由后面继承的具体类来实现,游戏类代码会常见该设计模式
代码实现

  class baseSystem {
      createSystem () {
          // 定义整体的功能,具体类必须重写该方法
      }
  }
  class androidSystem extends baseSystem { // 具体实现的类
      createSystem () {
          // 用安卓的方式去操作系统
      }
  }
  class iosSystem extends baseSystem {
    createSystem () {
          // 用ios的方式去操作系统
    }
  }

单例模式---保证一个类仅🈶️一个实例,并提供一个访问它的全局访问点(vuex的实现模式就是单例模式)
代码实现

  class Storage {
      constructor () {
         this.instance: ''
      }
      static getInstance () {
        if (!this.instance) {
          this.instance = new Storage()
        }
        return this.instance
      }
      setItem (key, val) {
        return localStorage.setItem(key, val)
      }
      getItem (key) {
        return localStorage.getItem(key)
      }
    }
    let s1 = Storage.getInstance()
    let s2 = Storage.getInstance()
    s1.setItem('name', '张三')
    s2.getItem('name') // 张三
    s1 === s2 // true

原型模式
     对于原型链的理解
          es6中的class类本质上是原型链继承的一种语法糖,并不是新的对象继承模型

   class cat {
       constructor (name) {
           this.catName= name
       }
       meow () {
           console.log(this.catName + '喵喵喵')
       }
   }
   let cat = new Cat('小白')
   cat.meow() // 小白喵喵喵

等价于es5的

  function Cat (name) {
      this.catName = name
  }
  Cat.prototype.meow = function () {
    console.log(this.catName + '喵喵喵')
  }
  let cat = new Cat('小白')
  cat.meow() // 小白喵喵喵
graph TD
cat-构造函数 --> |prototype|原型对象-meov
原型对象-meov -->|constructor| cat-构造函数
cat-构造函数 --> |new| 新对象
新对象 --> |__proto__| 原型对象-meov

上面调用
        cat.meow() // 小白喵喵喵
        cat.toString() // "[object Object]"

我们在没有写toString的情况下依然能够调用到该方法,是因为我们在访问一个js实例的属性和方法时,它会搜索实例本身,当没有找到时就会去该实例的原型对象中去找,如果没有找到,会顺着原型对象的原型对象去寻找,这个搜寻的轨迹就叫原型链

几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例,除了Object.prototype(当然,如果我们手动用Object.create(null)创建一个没有任何原型的对象,那它也不是 Object 的实例)