[TOC]
>[success] # Class类的理解和使用
**JavaScript** 中的 **Class 类** 是一种 **创建对象的方法** ,它 **通过定义类来描述对象的属性和方法** ,并 **通过实例化类来创建具体的对象** 。以下是在 **JavaScript** 中使用 **Class 类** 的一些 **常见场景**:
1. **创建对象**:使用 **Class 类** 可以方便地 **创建对象** ,从而 **避免了使用传统的函数或原型链方式创建对象的繁琐**。
2. **继承**:使用 **Class 类** 可以 **轻松实现面向对象编程中的继承特性**,从而 **可以在子类中重用父类的属性和方法,同时还能扩展自己的属性和方法**。
3. **封装**:使用 Class 类可以将属性和方法封装在类中,从而实现数据和行为的隔离,提高代码的可维护性和安全性。
4. **实现接口**:使用 **Class 类** 可以实现 **接口**,从而使得对象在实现某些特定功能时遵循规范,并且可以方便地扩展和重用这些功能。
5. **实现单例模式** :使用 **Class 类可以实现单例模式**,即 **保证某个类只存在一个实例对象,从而避免了多次创建相同对象的问题**。
6. **组织和管理代码**:**类** 可以将 **<u>数据和方法组合在一起</u>** ,形成更加逻辑和语义上一致的结构,这可以使代码更易于阅读和维护,尤其在需要处理复杂业务逻辑的场景下,使用类可以更好地组织和管理代码。
总之,使用 Class 类可以使代码更加结构化、易读、易维护,同时还可以提高代码的可复用性和扩展性。
>[success] ## Class类(小白版本)
下面是一个 **基础版本** 的 **Class 类** ,用于小白学习:
~~~
class MyClass {
// 构造函数,用于创建实例并初始化实例属性
constructor(name) {
this.name = name;
}
// 实例方法
sayHello() {
console.log(`Hello, ${this.name}!`);
}
// 静态方法
static sayHi() {
console.log('Hi!');
}
}
~~~
以上代码定义了一个名为 **MyClass 的类**,包含了 **构造函数、实例方法和静态方法**。
* **构造函数**:通过 **constructor 关键字定义**,用于 **创建实例对象** 并 **初始化实例属性**。在这个例子中,构造函数接收一个 **参数 name**,用于初始化实例属性 this.name。
* **实例方法**: **定义在类的原型对象上,用于操作实例属性和方法**。在这个例子中,实例方法 sayHello() 用于打印一句问候语,使用实例属性 this.name。
* **静态方法**:**使用 static 关键字定义,可以在类级别上访问和调用**。在这个例子中,静态方法 sayHi() 用于打印一句问候语。
**使用这个类创建实例并调用方法** 的 **示例代码**:
~~~
// 创建实例
const myObj = new MyClass('Jack');
// 调用实例方法
myObj.sayHello(); // 输出 "Hello, Jack!"
// 调用静态方法( 静态方法不需要去new实例化,可以直接去调用)
MyClass.sayHi(); // 输出 "Hi!"
~~~
>[success] ## Class类(标准版本)
下面是一个包含 **常见 Class 相关知识点** 的示例代码:
~~~
class MyClass {
// 静态属性
static staticProperty = '静态属性';
// 构造函数
constructor(prop) {
// 私有属性
this.#privateProperty = prop;
// 公共属性
this.publicProperty = '公共属性';
}
// 私有属性
#privateProperty;
// 静态方法
static staticMethod() {
console.log('这是一个静态方法');
}
// 公共方法
publicMethod() {
console.log('这是一个公共方法');
// 调用私有方法
this.#privateMethod();
}
// 私有方法
#privateMethod() {
console.log('这是一个私有方法');
}
// Getter 方法
get privateProperty() {
return this.#privateProperty;
}
// Setter 方法
set privateProperty(value) {
this.#privateProperty = value;
}
// 公共静态方法
static publicStaticMethod() {
console.log('这是一个公共静态方法');
}
}
// 调用静态属性和静态方法
console.log(MyClass.staticProperty); // 输出:静态属性
MyClass.staticMethod(); // 输出:这是一个静态方法
// 创建实例并调用公共方法和 Getter/Setter 方法
const myObj = new MyClass('私有属性');
console.log(myObj.publicProperty); // 输出:公共属性
myObj.publicMethod(); // 输出:这是一个公共方法,这是一个私有方法
console.log(myObj.privateProperty); // 输出:私有属性
myObj.privateProperty = '新的私有属性';
console.log(myObj.privateProperty); // 输出:新的私有属性
// 调用公共静态方法
MyClass.publicStaticMethod(); // 输出:这是一个公共静态方法
~~~
这个示例代码展示了以下 Class 相关知识点:
* 静态属性和静态方法:通过 static 关键字声明静态属性和静态方法,并且可以通过类名直接访问。
* 构造函数:使用 constructor 关键字定义构造函数,用于创建实例对象并初始化属性。
* 私有属性和方法:通过在属性或方法名前面加上 # 符号定义私有属性和方法,外部无法直接访问和调用,只能在类内部使用。
* Getter 和 Setter 方法:使用 get 和 set 关键字定义 Getter 和 Setter 方法,用于控制类的属性访问和修改。
* 公共方法:定义在类中的公共方法可以被实例对象访问和调用。
* 公共静态方法:使用 static 关键字定义公共静态方法,可以通过类名直接调用。
上面的代码是Class类中所有的相关知识点吗?
这里列出的是 Class 类中常见的一些相关知识点,但并不是全部。Class 是 ECMAScript 6 中新增的语法特性,具有很强的灵活性,可以用于实现很多不同的场景。下面列出一些常见的 Class 类相关知识点,供参考:
* 构造函数和实例化:使用 constructor 关键字定义构造函数,用于创建类的实例对象,并初始化实例属性。
* 继承和多态:使用 extends 关键字实现类的继承,子类可以继承父类的属性和方法,并且可以覆盖父类的方法实现多态。
* 静态方法和属性:使用 static 关键字定义静态方法和属性,可以在类级别上定义和访问属性和方法。
* 私有方法和属性:使用 # 符号定义私有属性和方法,只能在类内部访问,外部无法访问。
* Getter 和 Setter 方法:使用 get 和 set 关键字定义 Getter 和 Setter 方法,用于控制属性的访问和修改。
* 抽象类和接口:使用 abstract 关键字定义抽象类,接口可以定义一组规范,用于指导类的实现。
* Mixin:使用多个类的属性和方法组合成一个新的类,用于代码复用和组件化。
以上是一些常见的 Class 相关知识点,但不是全部,还有很多其他的用法和特性,具体需要根据实际场景选择适合的用法。
>[success] ## Class类继承
以下是 **Class继承** 的代码案例:
~~~
// 父类
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(`${this.name} is eating.`);
}
}
// 子类
class Dog extends Animal {
constructor(name) {
super(name);
}
bark() {
console.log(`${this.name} is barking.`);
}
}
// 使用子类
const myDog = new Dog('Tom');
myDog.eat(); // 输出 "Tom is eating."
myDog.bark(); // 输出 "Tom is barking."
~~~
以上代码定义了一个名为 Animal 的父类和一个名为 Dog 的子类,Dog 类继承了 Animal 类的属性和方法。在这个例子中:
* 父类 Animal:定义了一个构造函数和一个实例方法 eat(),用于创建 Animal 实例和让 Animal 实例吃东西。
* 子类 Dog:使用 extends 关键字继承了 Animal 类,并定义了一个构造函数和一个实例方法 bark(),用于创建 Dog 实例和让 Dog 实例叫。
* 构造函数:在子类中,需要通过 super() 调用父类的构造函数并传递参数,以初始化继承自父类的属性。
* 继承方法:子类中可以继承父类的实例方法,这样子类实例可以使用父类的方法。
* 新增方法:子类中可以定义新的实例方法,这样子类实例可以使用子类独有的方法。
使用这个继承类的示例代码:
~~~
// 创建实例
const myDog = new Dog('Tom');
// 调用父类方法
myDog.eat(); // 输出 "Tom is eating."
// 调用子类方法
myDog.bark(); // 输出 "Tom is barking."
~~~
- Javascript基础篇
- Array数组
- 数组插入值
- filter()
- forEach()
- push()
- pop()
- unshift()
- shift()
- valueOf()
- 面向对象思想
- Javascript 面向对象编程(一):封装
- Javascript面向对象编程(二):构造函数的继承
- Javascript面向对象编程(三):非构造函数的继承
- 解构
- 数组的解构赋值
- 对象的解构赋值
- 函数参数解构
- 字符串的解构赋值
- 数值和布尔值的解构赋值
- 圆括号问题
- 字符串.
- split()
- charAt()
- charCodeAt()
- concat()
- indexOf()
- lastIndexOf()
- match()
- replace()
- includes()
- 初识递归
- 渲染ul-li树形结构
- 异步函数解决方案
- 1. callback回调函数
- 2. ES6 - Promise
- JavaScript高级程序设计(书)
- 在html中使用JavaScript
- script标签的位置
- 延迟脚本
- 异步脚本
- <noscript>元素
- 基本概念
- 严格模式
- 变量详解
- 数据类型
- typeof操作符
- undefined类型
- Null类型
- Boolean类型
- Number类型
- 深入了解ES6(书)
- var 、let 、 const
- 字符串与正则表达式
- 字符串
- 正则表达式
- 函数
- 函数形参默认值
- 使用不具名参数
- 函数构造器的增强能力
- 扩展运算符
- name属性
- 明确函数的多重用途
- 块级函数
- 箭头函数
- 尾调用优化
- 扩展的对象功能
- 对象类别
- 对象字面量语法的扩展
- ES6对象新增方法
- 重复的对象属性
- 自有属性的枚举顺序
- 更强大的原型
- 解构:更方便的数据访问
- 为什么要用解构?
- 对象解构
- 数组解构
- 混合解构
- 参数解构
- Symbol与Symbol属性
- 创建Symbol
- Symbol的使用方法
- Symbol全局私有属性
- Symbol与类型强制转换
- Symbol属性检索
- Symbol的一些构造方法
- Set集合与Map集合
- Set集合
- Weak Set集合(弱引用Set集合)
- Map集合
- JS标准内置对象
- Object 构造函数及属性
- Object 构造方法
- Symbol 内建对象类的函数及属性
- Set 构造函数及属性
- Weak Set 构造函数及属性
- JS杂项
- 类数组对象
- Class类的理解和使用