Javascript中Class的使用

小方很无聊

已于 2024-03-16 21:05:31 修改

阅读量590

点赞数 5

文章标签： javascript 开发语言

于 2024-03-14 23:11:52 首次发布

本文链接：https://blog.csdn.net/m0_72270036/article/details/136724606

版权

本文详细介绍了JavaScript中的类和面向对象编程，包括构造方法的使用、类的继承机制、私有属性和静态属性的区别、getter和setter的运用，以及如何实现简单的事件总线。

摘要由CSDN通过智能技术生成

一、基本使用

constructor构造方法，类似于构造函数，new的时候会调用，内部的this就是实例化的对象

  class User {
    //构造方法，类似于构造函数，new的时候会调用，内部的this就是实例化的对象
    constructor(name, age, email) {
      this.name = name;
      this.age = age;
      this.email = email;
      // console.log(age,email)
    }
    // 实例方法
    sayHi(sayName) {
      return `${sayName},你好，我叫${this.name},我今年${this.age}岁了`
    }
  }
  const Tom = new User('Tom', 100, '123@qq.com')//100, '123@qq.com'
  console.log(Tom.sayHi('小明'))//小明,你好，我叫Tom,我今年100岁了

二、继承

 class User {
    constructor(name, age, email) {
      this.name = name;
      this.age = age;
      this.email = email;
      // console.log(age,email)
    }
    sayHi(sayName) {
      return `${sayName},你好，我叫${this.name},我今年${this.age}岁了`
    }
  }

 class AdminUser extends User {
    constructor(nname, email, role) {
      //子类构造函数使用this以前必须调用super
      //this.role = role; ×错误写法，super前面不能有this操作
      super(name, undefined, email); // 调用父类的构造函数,不继承age，但必须用undefined占个位置
      this.role = role;
    }

    // 实例方法
    Job(duty) {
      return `你好,我叫${this.name},我担任的角色是${this.role},我每天的工作内容是${duty},${this.email}这是我的邮箱`
    }
  }

三、class私有,静态属性和方法

私有属性/方法:类中内部访问的属性和方法

静态属性/方法:类可以直接访问的属性和方法

  class Info {
    constructor(name) {
      this.name = name
    }
    // 通过#作为前缀添加的属性会变为私有
    // 私有属性
    #password = '123456789'
    // 私有方法
    #say() {
      // 私有属性可以在
      return '私有的say方法'
    }
    test() {
      // 在类的内部可以访问私有属性调用私有方法
      return `私有方法:${this.#say()},私有属性:${this.#password}`
    }

    // 通过 static定义静态属性/方法
    static staticMethod() {
      return `这是一个静态方法,this是${this}`
    }
    static idCard = '321341198012011212'
  }

  const p = new Info('jack')
  console.log(p['#password'])// 外部无法访问 点语法访问undefined
  console.log(p.test())//私有方法:私有的say方法,私有属性:123456789
  // 通过类访问静态属性/方法
  console.log(Info.staticMethod()) //`这是一个静态方法,this是......
  console.log(Info.idCard)//'321341198012011212'

四、getter 和 setter

getter用于获取属性的值

setter用于设置属性的值

  class Person {
    constructor(name) {
      this._name = name;
    }
    get age() {
      return 456;
    }

    set age(value) {
      this._name = value;
    }
  }
  const person = new Person('Alice');
  console.log(person.age)//456
  console.log(person._name)//Alice
  person.age = 123
  console.log(person.age)//456
  console.log(person._name)//123

五、使用class类实现事件总线

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <h2>自己实现事件总线</h2> -->
  <button class="emit">注册事件</button>
  <button class="on">监听事件</button>
  <script>
    class EventBus {
      #handlers = {}
      // 触发事件
      $emit(event, ...args) {
        this.#handlers[event] = args;
      }
      // 注册事件
      $on(event, callback) {
        const storedArgs = this.#handlers[event];
        if (storedArgs) {
          callback(...storedArgs);
        }
      }
    }

    // 简化 querySelector调用
    function qs(selector) {
      return document.querySelector(selector)
    }
    const eventbus = new EventBus()
    // 注册事件
    qs('.emit').addEventListener('click', () => {
      eventbus.$emit('sentFn', 123, 456)
    })
    // 监听事件
    qs('.on').addEventListener('click', () => {
      eventbus.$on('sentFn', (num1, num2) => {
        console.log(num1, num2)
      })
    })

  </script>
</body>

</html>

小方很无聊

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Javascript中Class的使用

constructor构造方法，类似于构造函数，new的时候会调用，内部的this就是实例化的对象。静态属性/方法:类可以直接访问的属性和方法。私有属性/方法:类中内部访问的属性和方法。getter用于获取属性的值。setter用于设置属性的值。
复制链接

扫一扫