面向对象编程
JavaScript 是一种支持面向对象编程 (OOP) 的语言,通过对象来组织代码并处理数据。以下是 JavaScript 面向对象编程的核心概念和实现方式:
1.对象与属性
对象是 JavaScript 的核心,用于存储键值对。
javascript
const person = {
name: 'John',
age: 30,
greet: function () {
console.log(`Hello, my name is ${this.name}`);
}
};
person.greet(); // Output: Hello, my name is John- 对象属性: 可以是值、函数或其他对象。
- 访问属性: 通过点操作符
.或方括号[]。
2.工厂函数
工厂函数是一种创建对象的函数,避免重复代码。
javascript
function createPerson(name, age) {
return {
name,
age,
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
};
}
const person1 = createPerson("Alice", 25);
const person2 = createPerson("Bob", 30);
person1.greet(); // 输出: Hello, my name is Alice.
person2.greet(); // 输出: Hello, my name is Bob.3.构造函数
通过构造函数创建对象,并使用 new 关键字初始化。
javascript
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function () {
console.log(`Hello, my name is ${this.name}.`);
};
}
const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);
person1.greet(); // 输出: Hello, my name is Alice.4.原型与继承
JavaScript 使用原型链实现继承。
原型
每个对象都有一个 proto 属性指向它的原型。
javascript
function Person(name) {
this.name = name;
}
Person.prototype.greet = function () {
console.log(`Hello, my name is ${this.name}.`);
};
const person1 = new Person("Alice");
person1.greet(); // 输出: Hello, my name is Alice.继承
通过设置原型链实现继承。
javascript
function Employee(name, job) {
Person.call(this, name); // 继承属性
this.job = job;
}
Employee.prototype = Object.create(Person.prototype); // 继承方法
Employee.prototype.constructor = Employee;
Employee.prototype.work = function () {
console.log(`${this.name} is working as a ${this.job}.`);
};
const emp1 = new Employee("Bob", "Engineer");
emp1.greet(); // 输出: Hello, my name is Bob.
emp1.work(); // 输出: Bob is working as a Engineer.5.ES6 类
ES6 提供了更简洁的类语法。
定义类
javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
}
const person1 = new Person("Alice", 25);
person1.greet(); // 输出: Hello, my name is Alice.继承
通过 extends 关键字实现继承。
javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
}
class Employee extends Person {
constructor(name, age, job) {
super(name, age); // 调用父类构造函数
this.job = job;
}
work() {
console.log(`${this.name} is working as a ${this.job}.`);
}
}
const emp1 = new Employee("Bob", 30, "Engineer");
emp1.greet(); // 输出: Hello, my name is Bob.
emp1.work(); // 输出: Bob is working as a Engineer.6.封装与私有属性
通过
#前缀或闭包实现私有属性。
使用 # 前缀
javascript
class Person {
#privateAge;
constructor(name, age) {
this.name = name;
this.#privateAge = age;
}
getAge() {
return this.#privateAge;
}
}
const person = new Person("Alice", 25);
console.log(person.getAge()); // 输出: 25
console.log(person.#privateAge); // 报错: 私有属性不可访问使用闭包
javascript
function createPerson(name, age) {
let privateAge = age;
return {
name,
getAge() {
return privateAge;
}
};
}
const person = createPerson("Alice", 25);
console.log(person.getAge()); // 输出: 257.多态
多态是指对象具有不同形态的能力,即一个操作或函数可以应用于不同的对象,而产生不同的结果。
javascript
class Animal {
speak() {
console.log("Animal speaks.");
}
}
class Dog extends Animal {
speak() {
console.log("Dog barks.");
}
}
const animal = new Animal();
const dog = new Dog();
animal.speak(); // 输出: Animal speaks.
dog.speak(); // 输出: Dog barks.8.总结
JavaScript 的面向对象编程提供了灵活的方式来管理和组织代码。
无论是通过传统的原型继承还是 ES6 类语法,都能实现封装、继承、多态等 OOP 特性。
