Javascript使用function创建类的两种方法(推荐)

2023年5月27日下午2:20 • JavaScript

使用 function 创建类的方法，也被称作“构造函数模式”，是JavaScript中一种常用的定义对象的方法。

方法1：直接创建

我们可以使用function语法，按照类定义对象的基本思路，创建一个构造函数（类）。在构造函数（类）内部使用this关键字声明该类的实例属性和方法。

下面的代码演示了这种方式创建类Person，并定义了实例属性name和age以及实例方法sayName。

function Person(name, age) {
    this.name = name; // 类的实例属性
    this.age = age; // 类的实例属性
    this.sayName = function () { // 类的实例方法
        console.log(`My name is ${this.name}`);
    }
}

我们需要使用构造函数来实例化该类并创建类的对象。

const person = new Person('Tom', 20);
person.sayName(); // 输出：My name is Tom

方法2：使用原型，更加优雅

很显然，上述声明方式虽然可以正确地创建类，但从语义上来说，却不是将类的属性和方法一一抽象分离的结果，而是将实例属性和方法都绑定在了构造函数内部。这显然没有遵循高内聚、低耦合的设计原则。

因此，更优雅、推荐的方式是：在构造函数的prototype原型上定义实例方法和属性。

下面的代码片段演示了这种方式创建类Person。在构造函数内部，仅去声明实例属性name和age。

function Person(name, age) {
    this.name = name; // 类的实例属性
    this.age = age; // 类的实例属性
}

在构造函数的prototype上定义类的实例方法sayName。

Person.prototype.sayName = function () { // 类的实例方法
    console.log(`My name is ${this.name}`);
}

我们也需要使用构造函数来实例化该类并创建类的对象。

const person = new Person('Tom', 20);
person.sayName(); // 输出：My name is Tom

第二种方式更加优雅，因为在构造函数中不会出现实例方法、实例属性的定义。我们在使用时可以更好的区分类和实例，使代码的可维护性更好。

示例1：Student类

下面的示例代码中，我们使用方法2定义了一个Student类。该类有构造函数实例属性name和age，还有introduce方法和使用static关键字定义的静态属性className。

function Student(name, age) {
    this.name = name;
    this.age = age;
}

// 类的实例方法
Student.prototype.introduce = function () {
    console.log(`My name is ${this.name}, I'm ${this.age} years old, in the class ${Student.className}`);
}

// 类的静态属性
Student.className = 'math class';

const student1 = new Student('Tom', 18);
student1.introduce(); // 输出：My name is Tom, I'm 18 years old, in the class math class

示例2：Rectangle类

下面的示例代码中，我们使用方法1定义了一个Rectangle类。该类有构造函数实例属性width和height以及实例方法area和show。

function Rectangle(width, height) {
    this.width = width;
    this.height = height;
    this.area = function () { // 实例方法
        return this.width * this.height;
    }
    this.show = function () { // 实例方法
        console.log(`This is a rectangle and the width is ${this.width}, the height is ${this.height}, the area is ${this.area()}`);
    }
}

const rectangle1 = new Rectangle(5, 6);
rectangle1.show(); // 输出：This is a rectangle and the width is 5, the height is 6, the area is 30

这种方法虽然在语义上不是非常优雅，但在书写简单类时有时也是非常方便的。