javascript面向对象入门基础详细介绍


在JavaScript中,面向对象编程(OOP)是一种强大的编程范式,它允许你通过创建和使用“对象”来组织代码。对象是具有属性和方法的实体,其中属性是数据(状态),而方法是能够执行的操作(行为)。以下是对JavaScript面向对象编程入门基础的详细介绍:

### 1. 对象字面量

最基础的对象创建方式是使用对象字面量,它允许你直接在一个花括号 `{}` 中定义属性和方法。


let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    greet: function() {
        console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
    }
};

person.greet(); // 输出: Hello, my name is John Doe.

### 2. 构造函数

构造函数是一种特殊类型的函数,主要用于创建具有相同属性和方法的对象。在JavaScript中,构造函数以大写字母开头,用于区分普通函数。


function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.greet = function() {
        console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
    };
}

let person1 = new Person("Alice", "Wonderland", 25);
person1.greet(); // 输出: Hello, my name is Alice Wonderland.

### 3. 原型(Prototype)

在JavaScript中,每个对象都链接到一个原型对象,并且可以从其原型对象继承属性和方法。构造函数有一个名为`prototype`的属性,它是所有实例共享的属性和方法的模板。


function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
};

let person2 = new Person("Bob", "Builder", 35);
person2.greet(); // 输出: Hello, my name is Bob Builder.

### 4. 继承

继承是面向对象编程中的一个核心概念,它允许我们基于一个类(构造函数)创建另一个类,从而复用代码。在JavaScript中,你可以通过修改原型链或使用`class`关键字(ES6+)来实现继承。

#### 使用原型链


function Employee(id, firstName, lastName, age) {
    Person.call(this, firstName, lastName, age); // 借用构造函数继承属性
    this.id = id;
}

Employee.prototype = Object.create(Person.prototype); // 继承Person的原型
Employee.prototype.constructor = Employee; // 修复构造函数指向

Employee.prototype.showId = function() {
    console.log(`My ID is ${this.id}`);
};

let employee = new Employee(1, "Charlie", "Chaplin", 45);
employee.greet(); // 继承自Person
employee.showId(); // Employee特有的方法

#### 使用`class`(ES6+)


class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
    }
}

class Employee extends Person {
    constructor(id, firstName, lastName, age) {
        super(firstName, lastName, age); // 调用父类的constructor
        this.id = id;
    }

    showId() {
        console.log(`My ID is ${this.id}`);
    }
}

let employee = new Employee(2, "David", "Beckham", 40);
employee.greet(); // 继承自Person
employee.showId(); // Employee特有的方法

以上就是JavaScript面向对象编程的入门基础介绍。希望这能帮助你开始使用JavaScript的OOP特性来组织你的代码。