JavaScript 面向对象【快速掌握知识点】

简介: JavaScript 面向对象【快速掌握知识点】

类和对象

类是用于定义对象的模板或蓝图;它包含对象的属性和方法,我们可以使用class关键字来定义类。

1. class Person {
2. constructor(name, age) {
3. this.name = name;
4. this.age = age;
5.   }
6. 
7. sayHello() {
8. console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
9.   }
10. }

在上面的例子中,我们定义了一个名为Person的类,它有两个属性:nameage,以及一个方法sayHello,构造函数constructor用于初始化对象的属性。

对象是类的一个实例,我们可以使用new关键字来创建对象。

let person1 = new Person('Alice', 25);

在上面的例子中,我们创建了一个名为person1Person对象,并将其属性初始化为Alice25

属性和方法

属性是对象的特征或状态。它们用于描述对象的特点。我们可以在构造函数中初始化对象的属性。

1. class Person {
2. constructor(name, age) {
3. this.name = name;
4. this.age = age;
5.   }
6. }

在上面的例子中,我们定义了一个Person类,并在构造函数中初始化了两个属性:nameage

方法是对象的行为或操作。它们用于描述对象的行为。在类中,我们可以定义一组方法,以便对对象执行不同的操作。

1. class Person {
2. constructor(name, age) {
3. this.name = name;
4. this.age = age;
5.   }
6. 
7. sayHello() {
8. console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
9.   }
10. }

在上面的例子中,我们定义了一个sayHello方法,它用于输出对象的属性。

继承

继承是面向对象编程的一个重要概念。它允许我们从现有的类创建新类,从而在不重复代码的情况下扩展现有的功能。在JavaScript中,我们可以使用extends关键字来创建一个新类,它从现有的类继承属性和方法。

1. class Student extends Person {
2. constructor(name, age, grade) {
3. super(name, age);
4. this.grade = grade;
5.   }
6. 
7. sayHello() {
8. console.log(`Hello, my name is ${this.name}, I am ${this.age} years old, and I am in grade ${this.grade}.`);
9.   }
10. }

在上面的例子中,我们定义了一个名为Student的新类,它从现有的Person类继承了nameage属性和sayHello方法。Student类还有一个名为grade的新属性,并覆盖了sayHello方法以添加新信息。

多态

多态是面向对象编程的另一个重要概念。它允许不同的类实现相同的方法,以便在不同的情况下以不同的方式处理相同的请求。在JavaScript中,我们可以使用相同的方法名在不同的类中实现不同的行为。

1. class Animal {
2. constructor(name) {
3. this.name = name;
4.   }
5. 
6. speak() {
7. console.log(`${this.name} makes a noise.`);
8.   }
9. }
10. 
11. class Dog extends Animal {
12. speak() {
13. console.log(`${this.name} barks.`);
14.   }
15. }
16. 
17. class Cat extends Animal {
18. speak() {
19. console.log(`${this.name} meows.`);
20.   }
21. }
22. 
23. const animals = [
24. new Dog('Fido'),
25. new Cat('Fluffy'),
26. new Dog('Max'),
27. new Cat('Whiskers')
28. ];
29. 
30. animals.forEach(animal => {
31.   animal.speak();
32. });

在上面的例子中,我们定义了一个名为Animal的基类,并从中派生出DogCat类。这两个类都实现了Animalspeak方法,并在方法中以不同的方式输出信息。最后,我们创建了一些DogCat的实例,并在它们上面调用speak方法,以验证它们会输出不同的信息。

封装

当使用面向对象编程时,我们通常会封装数据和方法以确保对象的安全性和可维护性。在JavaScript中,封装是通过创建类和使用访问修饰符来实现的。

1. // 创建一个类
2. class Person {
3. // 声明私有属性
4.   #name;
5.   #age;
6. 
7. // 构造函数,用于初始化对象
8. constructor(name, age) {
9. this.#name = name;
10. this.#age = age;
11.   }
12. 
13. // 声明公有方法,用于访问私有属性
14. getName() {
15. return this.#name;
16.   }
17. 
18. getAge() {
19. return this.#age;
20.   }
21. }
22. 
23. // 创建一个Person对象
24. const person = new Person('张三', 18);
25. 
26. // 访问私有属性(会报错)
27. console.log(person.#name); // Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class
28. 
29. // 访问公有方法
30. console.log(person.getName()); // '张三'
31. console.log(person.getAge()); // 18


目录
相关文章
|
7月前
|
JavaScript 前端开发 API
|
7月前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(三)
深入JS面向对象(原型-继承)
56 0
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]知识点
本文介绍了JavaScript中的多个重要知识点,包括ES6、严格模式、类与对象、解构、跨域问题及入口函数等。文章通过详细示例和推荐的外部资源,帮助读者更好地理解和应用这些概念。内容持续更新中,适合初学者和进阶开发者参考。
21 2
[JS]知识点
|
1月前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
43 1
|
1月前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
26 3
|
2月前
|
存储 JSON JavaScript
JS知识点
JS知识点
28 3
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
30 5
|
3月前
|
JavaScript 前端开发 Java
JavaScript 类知识点概览
概览JavaScript中类的知识点,包括类的定义和实现、添加方法和get/set方法、类的继承和静态方法的使用。通过学生类和人员类的例子,演示了类的构造器、方法定义、继承关系和静态方法的调用。
JavaScript 类知识点概览
|
2月前
|
前端开发 JavaScript
JavaScript 知识点总结
JavaScript 知识点总结
31 0
|
2月前
|
存储 JavaScript 前端开发
JavaScript知识点
JavaScript知识点