侧边栏壁纸
博主头像
小佑Blog| 小佑前端 | WEB前端博客 | WEB前端笔记 博主等级

未来属于那些相信梦想,并愿意为之付诸行动的人

  • 累计撰写 68 篇文章
  • 累计创建 91 个标签
  • 累计收到 67 条评论

目 录CONTENT

文章目录

JavaScript面向对象和设计模式

@小佑前端
2022-04-07 / 1 评论 / 3 点赞 / 1658 阅读 / 0 字 / 正在检测是否收录...

面向对象

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

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
3
new

评论区