侧边栏壁纸
博主头像
@小佑前端

学而不厌 不耻下问

  • 累计撰写 61 篇文章
  • 累计创建 81 个标签
  • 累计收到 11 条评论

目 录CONTENT

文章目录

JavaScript面向对象和设计模式

@小佑前端
2022-04-07 / 1 评论 / 2 点赞 / 661 阅读 / 391 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-08-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

面向对象

面向对象编程可以理解为‘对象’,‘类’,‘实例’之间的关系,例如:类的封装继承和多态等信息

image-1649325146157

构造原型模式(正统面向对象编程)

自己能够创造出自定义类和对应的实例,构建起一套完整的面向对象模型。

function CreatePerson(name, age) {
	this.name = name;
    this.age = age
    // return 100; 返回的还是实例/没有影响
    // 如果手动return的是一个是一个应用的类型之,会默认返回的实例给替换掉(所以在构造函数模式执行下,我们一般不要手动return,防止会返回的实例替换掉)
}  
  let person1 = new CreatePerson('xxx', 18)
  // 1. new 这种执行方式叫做构造函数执行模式, 此时的CreatePerson不仅仅是一个函数名,
  // 被称为类,而返回的结果(赋值给person1的)是一个对象,我们称之为,‘’实例‘’,而函数体中出现的 this 都是这个实例

image-1649326299340

设计模式

发布订阅模式
function Subject(){
    this.observers = [];
  }
  Subject.prototype = {
    add(observer){  // 添加
      this.observers.push(observer);
    },
    notify(){  // 通知
      var observers = this.observers;
      for(var i = 0;i < observers.length;i++){
        observers[i].update();
      }
    },
    remove(observer){  // 删除
      var observers = this.observers;
      for(var i = 0;i < observers.length;i++){
        if(observers[i] === observer){
          observers.splice(i,1);
        }
      }
    },
  }

  // Observer 对象
  function Observer(name){
    this.name = name;
  }
  Observer.prototype = {
    update(){  // 更新
      console.log('my name is '+this.name);
    }
  }

  var sub = new Subject();
  var obs1 = new Observer('ttsy1');
  var obs2 = new Observer('ttsy2');
  sub.add(obs1);
  sub.add(obs2);
  sub.notify();  //my name is ttsy1、my name is ttsy2
2

评论区