带你读《现代Javascript高级教程》十三、面向对象编程与Class(4)

简介: 带你读《现代Javascript高级教程》十三、面向对象编程与Class(4)

带你读《现代Javascript高级教程》十三、面向对象编程与Class(3)https://developer.aliyun.com/article/1349607?groupCode=tech_library


9. 类的封装

封装通过将数据和操作数据的方法封装在一个对象中,实现了数据的保护和访问的控制。类的属性和方法可以使用不同的访问修饰符来控制其可见性。

 

class Rectangle {
  width;  // 私有属性
  height;
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  getArea() {    // 公共方法
    return this.width * this.height;
  }}
const rect = new Rectangle(5, 3);
console.log(rect.width);  // 报错:SyntaxError: Private field 'width' must be declared in an enclosing class
console.log(rect.getArea());  // 输出:15

 

在上述示例中,Rectangle类具有私有属性width和height,只能在类的内部被访问。通过定义公共方法getArea()来访问私有属性,从而实现了封装。

10. 类的多态

多态允许不同的对象对相同的消息作出不同的响应。通过继承和方法的覆盖,不同的子类可以对父类的方法进行不同的实现,从而实现多态性。

class Animal {
  makeSound() {
    console.log('Animal makes sound');
  }}
class Dog extends Animal {
  makeSound() {
    console.log('Dog barks');
  }}
class Cat extends Animal {
  makeSound() {
    console.log('Cat meows');
  }}
const animal = new Animal();const dog = new Dog();const cat = new Cat();
animal.makeSound();  // 输出:Animal makes sound
dog.makeSound();     // 输出:Dog barks
cat.makeSound();     // 输出:Cat meows

 

在上述示例中,Animal类是基类,Dog和Cat类是子类。它们都具有makeSound()方法,但不同的子类对该方法进行了不同的实现,实现了多态性。

 

通过封装、继承和多态,面向对象编程提供了一种更加灵活和可扩展的编程方式,使得代码的组织和管理更加直观和高效。

11. 结语

ES6引入的Class机制为JavaScript提供了一种更直观、更简洁的面向对象编程方式。通过Class,我们可以更方便地定义和使用类,实现封装、继承和多态等面向对象编程的基本原理。同时,ES6还提供了许多其他的语法糖和特性,使得JavaScript在面向对象编程方面更加强大和灵活。

12. 参考资料

相关文章
|
26天前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
26 2
2024年5月node.js安装(winmac系统)保姆级教程
|
5月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
216 0
|
3月前
|
Web App开发 JavaScript 前端开发
JavaScript 类(class)
JavaScript 类(class)
23 2
JavaScript 类(class)
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
42 4
|
2月前
|
JavaScript 前端开发 Java
JavaScript中的面向对象编程(OOP) - 终极指南
本文介绍了 JavaScript 的面向对象编程 (OOP) 概念,包括继承、多态、封装和抽象等关键要素,并通过代码示例帮助开发者理解和应用 OOP 思维。
42 5
|
3月前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
|
3月前
|
JavaScript 前端开发 Java
js面向对象编程|24
js面向对象编程|24
|
2月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
49 0
|
4月前
|
JavaScript NoSQL 前端开发
|
5月前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
450 3