Skip to content

面向对象编程

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()); // 输出: 25

7.多态

多态是指对象具有不同形态的能力,即一个操作或函数可以应用于不同的对象,而产生不同的结果。

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 特性。