第五章:面向对象编程
- 作者
- Name
- 青玉白露
- Github
- @white0dew
- Modified on
- Reading time
- 4 分钟
阅读:.. 评论:..
1. Objects
JavaScript 的对象是存储键值对的容器。对象在 JavaScript 中扮演了重要的角色,它们允许我们将数据和功能组织在一起,使代码更加结构化和模块化。
1.1 对象的定义与属性
在 JavaScript 中,可以使用花括号 {}
来定义对象,并通过键值对的形式来添加属性。
示例代码:
// 定义一个对象 let person = { name: "John", age: 30, job: "Developer", }; // 访问对象属性 console.log(person.name); // 输出: John console.log(person["age"]); // 输出: 30
1.2 对象的方法
对象的方法是存储在对象属性中的函数。我们可以直接在对象定义时添加方法,方法可以通过点或方括号来调用。
示例代码:
let person = { name: "John", age: 30, job: "Developer", greet: function () { console.log("Hello, my name is " + this.name); }, }; // 调用对象方法 person.greet(); // 输出: Hello, my name is John
1.3 对象的遍历
我们可以使用 for...in
循环来遍历对象的所有属性。
示例代码:
let person = { name: "John", age: 30, job: "Developer", }; for (let key in person) { console.log(key + ": " + person[key]); } // 输出: // name: John // age: 30 // job: Developer
2. Object-Oriented Programming
面向对象编程(OOP)是 JavaScript 开发中的重要概念,它通过类和对象来模拟现实世界的事物。
2.1 类的定义与实例化
在 ES6 中,我们可以使用 class
关键字来定义类,然后使用 new
关键字来创建类的实例。
示例代码:
class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name}`); } } // 创建类的实例 let john = new Person("John", 30); john.greet(); // 输出: Hello, my name is John
2.2 类的属性与方法
类的属性和方法定义在类的内部,属性通常在构造函数 constructor
中定义,方法则定义在类的主体中。
示例代码:
class Animal { constructor(name, species) { this.name = name; this.species = species; } describe() { console.log(`${this.name} is a ${this.species}`); } } let lion = new Animal("Leo", "Lion"); lion.describe(); // 输出: Leo is a Lion
2.3 继承与多态
继承允许我们创建一个新类,该类继承另一个类的属性和方法。多态允许我们使用相同的方法来处理不同类型的对象。
示例代码:
class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + " makes a noise."); } } class Dog extends Animal { speak() { console.log(this.name + " barks."); } } let dog = new Dog("Rex"); dog.speak(); // 输出: Rex barks
3. ES6+ 新特性
ES6 引入了一些新特性,使 JavaScript 开发更加方便和高效。
3.1 模板字符串
模板字符串使用反引号(``)包围,并且允许嵌入表达式。
示例代码:
let name = "John"; let greeting = `Hello, ${name}!`; console.log(greeting); // 输出: Hello, John!
3.2 解构赋值
解构赋值是一种从数组或对象中提取数据的语法。
示例代码:
// 数组解构 let [a, b] = [1, 2]; console.log(a); // 输出: 1 console.log(b); // 输出: 2 // 对象解构 let person = { name: "John", age: 30 }; let { name, age } = person; console.log(name); // 输出: John console.log(age); // 输出: 30
3.3 剩余参数与扩展运算符
剩余参数允许我们将不定数量的参数表示为一个数组,扩展运算符允许我们将数组或对象展开。
示例代码:
// 剩余参数 function# Chapter 5: Objects and Object-Oriented Programming (continued) ### 3.3 剩余参数与扩展运算符 (续) **示例代码**: ```javascript // 剩余参数 function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); } console.log(sum(1, 2, 3)); // 输出: 6 // 扩展运算符 let arr1 = [1, 2, 3]; let arr2 = [...arr1, 4, 5, 6]; console.log(arr2); // 输出: [1, 2, 3, 4, 5, 6]
扩展运算符在对象上也同样适用:
let obj1 = { a: 1, b: 2 }; let obj2 = { ...obj1, c: 3 }; console.log(obj2); // 输出: { a: 1, b: 2, c: 3 }
import
和 export
)
3.4 模块化(模块化使得我们可以将代码拆分到不同的文件中,并通过 import
和 export
关键字来共享代码。
示例代码:
// 导出模块 // 在 math.js 文件中 export function add(a, b) { return a + b; } export const PI = 3.14159; // 导入模块 // 在 main.js 文件中 import { add, PI } from "./math.js"; console.log(add(2, 3)); // 输出: 5 console.log(PI); // 输出: 3.14159
模块化让代码更易于维护和重用,并且可以避免命名冲突。
我们学习了如何定义和操作对象,了解了如何利用面向对象编程的概念来创建类和对象,并且探索了 ES6+的几个重要新特性。这些知识为构建复杂且结构化的 JavaScript 应用程序奠定了坚实的基础。