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

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

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


3) 方法

在Class中定义的函数称为方法。可以直接在Class的内部定义方法,也可以使用ES6的简写形式。

 

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  area() {            // 定义方法
    return this.width * this.height;
  }
  perimeter() {
    return 2 * (this.width + this.height);
  }}

4 方法的访问修饰符

在Class中,可以使用访问修饰符来限制方法的访问权限。ES6中的Class默认所有方法都是公共的,可以被外部调用。但我们可以使用static、get、set、privateprotected等修饰符来控制方法的访问。

 

  • static:定义静态方法,只能通过类本身调用,不能通过类的实例调用。
  • get和set:定义属性的读取和设置方法,使用类似访问属性的语法进行调用。
  • private:定义私有方法,只能在类的内部被访问,外部无法访问。
  • protected:定义受保护方法,只能在类的内部和子类中被访问,外部无法访问。
class Rectangle {
  static description = 'This is a rectangle';  // 静态属性
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  static createSquare(side) {     // 静态方法
    return new Rectangle(side, side);
  }
  get area() {           // Getter方法
    return this.width * this.height;
  }
  set area(value) {     // Setter方法
    this.width = Math.sqrt(value);
    this.height = Math.sqrt(value);
  }
  privateMethod() {    // 私有方法
    console.log('This is a private method');
  }
  protectedMethod() {   // 受保护方法
    console.log('This is a protected method');
  }
  publicMethod() {      // 公共方法
    console.log('This is a public method');
    this.privateMethod();
    this.protectedMethod();
  }}

 

在上述示例中,我们定义了一个Square类,它继承自Rectangle类。通过super关键字调用父类的构造函数,确保父类的属性被正确初始化。子类可以新增或覆盖父类的方法。

 

const square = new Square(5);
console.log(square.area());       // 输出:25
console.log(square.perimeter());  // 输出:20

4. 类的静态方法和属性

静态方法和属性属于类本身,而不是类的实例。静态方法和属性可以通过类名直接访问,无需实例化类。

 

class MathUtil {
  static PI = 3.14159;    // 静态属性
  static square(number) {    // 静态方法
    return number * number;
  }}

 

在上述示例中,我们定义了一个MathUtil类,它具有一个静态属性PI和一个静态方法square()。可以通过类名直接访问静态属性和方法。

 

console.log(MathUtil.PI);        // 输出:3.14159
console.log(MathUtil.square(5)); // 输出:25


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

相关文章
|
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 (音频/视频) 【实用教程】
451 3