美文网首页
前端设计模式之面向对象

前端设计模式之面向对象

作者: FConfidence | 来源:发表于2020-01-29 00:40 被阅读0次
    1. 三要素 (封装, 继承, 多态)
    • 封装class 数据的权限和保密
      • protected 只限于当前类和子类访问
      • private 仅限于当前类自己使用 (es6中, 以_开发规范, es10以#开头)
      • public 公开
      • 减少耦合, 不该外漏的不外漏
      • 利于数据接口权限的管理
    • 继承extends 子类继承父类(扩展)
      class Person {
        constructor(name, age) {
          this.name = name;
          this.age = age;
        }
      
        say() {
          console.log(`my name is ${this.name}, age is ${this.age}`)
        }
      }
      
      class Student extends People {
        public no: number;
        protected weight: string;
        // 定义private属性
        private gf: string;
        constructor(name: string, age: number, no: number) {
          super(name, age);
          this.no = no;
          this.gf = 'fe';
          this.weight = '60kg'
        }
      
        public say() {
          super.say();
        }
      
        private sayNo() {
          console.log(`and my no is ${this.no}`);
        }
      }
      
      const xiaoming = new Student('xiaoming', 22, 20200201);
      // xiaoming.gf(); // error
      
      • 将公共方法抽离出来, 提高复用, 减少冗余
    • 多态(同一接口不同的实现)
      • 保持子类的开放性和灵活性
      • 面向接口编程
      • (js中用的比较少)
    1. 为什么使用面向对象
    • 程序执行: 顺序,判断,循环 -> 结构化
    • 数据结构化
    • 对于计算机来说, 结构化易于管理
    • 编程: 简单和抽象
    1. UML(统一建模语言)
    • 关系
      • 泛华(类的继承)
      • 关联(类之间的引用)
    • 类图(类名, 属性, 方法, 关系(关联, 泛化))
      • +public属性名A:类型
      • protected属性名B:类型

      • -private属性名C:类型
      • +public方法名A(参数1):返回值类型
      • protected方法名B(参数1, 参数2):返回值类型

      • -private方法名C(参数1):返回值类型

    相关文章

      网友评论

          本文标题:前端设计模式之面向对象

          本文链接:https://www.haomeiwen.com/subject/oncvthtx.html