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

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

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


5. Getter和Setter方法

GetterSetter方法用于对类的属性进行读取和设置操作,可以通过类似访问属性的语法进行调用。

 

class Circle {
  constructor(radius) {
    this.radius = radius;
  }
  get diameter() {
    return 2 * this.radius;
  }
  set diameter(value) {
    this.radius = value / 2;
  }}

在上述示例中,我们定义了一个Circle类,它具有一个属性radius。通过定义get diameter()方法和set diameter()方法,我们可以通过类似访问属性的方式来读取和设置直径(diameter)属性,而不需要直接访问radius属性。

 

const circle = new Circle(5);
console.log(circle.diameter);     //

 

输出:10

 

circle.diameter = 12;
console.log(circle.radius);       // 输出:6

6. 类的私有属性和方法

在ES6中,可以使用#作为前缀来定义私有属性和方法。私有属性和方法只能在类的内部被访问,外部无法访问。

class Person {
  name;   // 私有属性
  constructor(name) {
    this.name = name;
  }
  privateMethod() {   // 私有方法
    console.log('This is a private method');
  }
  publicMethod() {      // 公共方法
    console.log(`Hello, my name is ${this.name}`);
    this.privateMethod();
  }}

 

在上述示例中,我们定义了一个Person类,它具有一个私有属性name和一个私有方法privateMethod()。私有属性和方法只能在类的内部访问。

const person = new Person('John');
person.publicMethod();   // 输出:Hello, my name is John
person.name;            // 报错:SyntaxError: Private field 'name' must be declared in an enclosing class
person.privateMethod(); // 报错:SyntaxError: Private field 'privateMethod' must be declared in an enclosing class

7. 类的实例和构造函数

在ES6中,类的实例通过new关键字进行创建,并自动调用类的构造函数进行初始化。

 

const rect = new Rectangle(5, 3);
console.log(rect.area());       // 输出:15
console.log(rect.perimeter());  // 输出:16

 

可以使用instanceof运算符来判断一个对象是否是某个类的实例。

 

console.log(rect instanceof Rectangle);  // 输出:true
console.log(rect instanceof Object);     // 输出:true

8. 类的继承

继承是面向对象编程中的重要概念之一,它允许我们创建一个基类(父类),其他类可以继承该基类并扩展或覆盖其中的属性和方法。ES6中使用extends关键字实现类的继承。

 

class Square extends Rectangle {
  constructor(side) {
    super(side, side);    // 调用父类的构造函数
  }}


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

 https://developer.aliyun.com/article/1349604?groupCode=tech_library

相关文章
|
1月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
79 19
|
4月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
2533 23
|
8月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
128 2
2024年5月node.js安装(winmac系统)保姆级教程
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
392 0
|
10月前
|
Web App开发 JavaScript 前端开发
JavaScript 类(class)
JavaScript 类(class)
71 2
JavaScript 类(class)
|
9月前
|
JavaScript 前端开发 Java
JavaScript中的面向对象编程(OOP) - 终极指南
本文介绍了 JavaScript 的面向对象编程 (OOP) 概念,包括继承、多态、封装和抽象等关键要素,并通过代码示例帮助开发者理解和应用 OOP 思维。
125 5
|
9月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
143 4
|
10月前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
|
10月前
|
JavaScript 前端开发 Java
js面向对象编程|24
js面向对象编程|24

热门文章

最新文章