javascript常见设计模式和方法补充

前言

内容提示:在本文中添加js常见方法的使用进行补充,了解js中常见的设计模式和使用场景

---

一、js常见方法补充

1.instanceof

解释:判断一个实例是否属于某个类型的实例 得到布尔值

class Person {}
let person = new Person()
console.log(person instanceof Person) //true
let arr = []
console.log(arr instanceof Array) //true

2.isPrototypeOf()

解释:判断一个原型对象是否在某个实例的原型链上

function A() {}
function B() {}
B.prototype = new A()
let b = new B()
let a = new A()
console.log(B.prototype.__proto__ == a.__proto__) //true
console.log(b.__proto__ == B.prototype) //true
console.log(b.__proto__.__proto__ == a.__proto__) //true
console.log(A.prototype.isPrototypeOf(b)) //true
console.log(A.prototype.isPrototypeOf(a)) //true
// 注意在es6中直接使用extends关键字实现继承

3.hasOwnProperty()

解释:判断一个实例自身是否存在某个属性和方法,注意(唯一一个查找属性不查找原型链的方法)

function A() {
  this.a = '添加本身属性'
}
A.prototype.b = '添加原型链属性'
let a = new A()
console.log(a.hasOwnProperty('a')) //true
console.log(a.hasOwnProperty('b')) //false

4.Object.assign()

解释:将一个或者多个源对象的可枚举(遍历,不包含__proto__属性)复制给目标对象,属于浅拷贝

let obj1 = { a: 1, b: 2 }
let obj2 = { c: [3], d: 4 }
let obj3 = {}
Object.assign(obj3, obj1, obj2)
//将obj1和obj2的值复制给obj3,为浅拷贝
console.log(obj3)

Object.defineProperty()

解释:对一个对象的属性进行配置

let obj = {}
Object.defineProperty(obj, 'a', {
  value: 10,
  writable: true, //可重写
  enumerable: true, //可枚举(遍历)
  configurable: true, //属性可删除
})
obj.a = 20
console.log(obj.a)  //20
for (let k in obj) {
  console.log(k, obj[k]) //a 20
}
delete obj.a
console.log(obj)  //{}

---

二、常见设计模式

1.单例模式

解释:保证一个类只有一个实例,并提供一个访问它的全局访问点(例如电脑任务管理器)

let create = (function () {
  let newInstance = null
  function Dog() {
    this.name = 'bai'
  }
  Dog.prototype.bar = function () {
    console.log(this.name)
  }
  return {
    Instance() {
      if (!newInstance) {
        newInstance = new Dog()
      }
      return newInstance
    },
  }
})()
console.log(create.Instance() == create.Instance())

2.观察者模式

解释:观察者模式（发布-订阅模式）：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

class Observer {
  constructor() {
    // 定义观察者
    this.message = {}
  }
  on(eventName, callback) {
    // 判断盒子是否有该事件类型
    if (this.message[eventName]) {
      this.message[eventName].push(callback)
    } else {
      this.message[eventName] = [callback]
    }
  }
  emit(eventName) {
    // 判断是否是否存在该事件
    if (this.message[eventName]) {
      for (let i = 0; i < this.message[eventName].length; i++) {
        this.message[eventName][i]()
      }
    }
  }
  off(eventName, callback) {
    // 移除事件
    if (this.message[eventName]) {
      for (let i = 0; i < this.message[eventName].length; i++) {
        if (this.message[eventName][i] == callback) {
          this.message[eventName].splice(i, 1)
        }
      }
    }
  }
}
const list = new Observer()
function fn1() {
  console.log('函数1执行')
}
function fn2() {
  console.log('函数2执行了')
}
list.on('a', fn1)
list.on('a', fn2)
list.emit('a')

3.适配者模式

解释: 将一个类（对象）的接口（方法或者属性）转化成另外一个接口以满足用户需求，使类（对象）之间接口的不兼容问题通过适配器得以解决。

function foo(a, b, c, d) {}
let obj1 = { a: 1, b: 2, c: 3, d: 4 }
let obj2 = { a: 1, b: 2, c: 3, d: 4 }
function Adapter(obj) {
  foo(obj.a, obj.b, obj.c, obj.d)
}
Adapter(obj1)
Adapter(obj2)

4.组合模式

解释:组合模式又称部分-整体模式，将对象组合成树形结构以表示“部分整体”的层次结构

class Hotel {
  create() {
    console.log('创建宾馆订单')
  }
}
class Ticket {
  create() {
    console.log('创建票务订单')
  }
}
class Order {
  constructor() {
    this.orders = []
  }
  //添加不同订单
  add(addOrderList) {
    this.orders.push(addOrderList)
    //返回Orderd对象本身实现链式编程效果
    return this
  }
  // 通过对不同构造函数中create()函数的调用,实现对不同订单的创建
  create() {
    for (let i = 0; i < this.orders.length; i++) {
      this.orders[i].create()
    }
  }
}
let list = new Order()
list
  .add(new Ticket())
  .add(new Hotel())
  .add(new Hotel())
  .add(new Ticket())
  .create()

5、其他设计模式

三、总结