MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript类和构造函数的代码优化技巧

2023-09-017.8k 阅读

JavaScript 类和构造函数的基础回顾

在深入探讨代码优化技巧之前，我们先来回顾一下 JavaScript 中类和构造函数的基础知识。

构造函数

在 JavaScript 早期，并没有类的概念，开发者通过构造函数来创建对象实例。构造函数本质上就是一个普通函数，不过它遵循一些约定：

  1. 命名约定：构造函数通常使用大写字母开头，以便与普通函数区分。
  2. 使用 new 关键字：当使用 new 关键字调用构造函数时，会发生以下几件事：
    • 创建一个新的空对象。
    • 将这个新对象的 __proto__ 指向构造函数的 prototype。
    • 构造函数中的 this 指向这个新创建的对象。
    • 执行构造函数中的代码，对新对象进行初始化。
    • 如果构造函数没有显式返回一个对象，则返回这个新创建的对象。

以下是一个简单的构造函数示例：

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    };
}

const john = new Person('John', 30);
john.sayHello();

在这个例子中，Person 是一个构造函数，通过 new 关键字创建了 john 这个对象实例。每个实例都有自己的 name、age 属性和 sayHello 方法。

类

ES6 引入了类的概念，它是基于原型链的面向对象编程的语法糖。类本质上还是基于构造函数和原型链的机制。一个类可以包含构造函数、方法和访问器（getter 和 setter）。

以下是用类来重写上面 Person 的例子：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

const john = new Person('John', 30);
john.sayHello();

在这个类的定义中，constructor 方法是类的构造函数，用于初始化实例的属性。sayHello 方法定义在类的原型上，所有实例都共享这个方法。

优化技巧之合理使用原型

避免在构造函数中定义方法

在前面的构造函数示例中，我们在 Person 构造函数中定义了 sayHello 方法。这样做的问题是，每个通过 Person 构造函数创建的实例都会有一个独立的 sayHello 方法副本。这不仅浪费内存，而且在创建大量实例时会显著增加内存开销。

更好的做法是将方法定义在构造函数的原型上，这样所有实例都可以共享这个方法。修改后的代码如下：

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

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};

const john = new Person('John', 30);
const jane = new Person('Jane', 25);
console.log(john.sayHello === jane.sayHello); // true

通过将 sayHello 方法定义在 Person.prototype 上，john 和 jane 实例共享同一个 sayHello 方法，节省了内存空间。

对于类来说，由于方法默认定义在原型上，所以不会出现上述问题。例如：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

const john = new Person('John', 30);
const jane = new Person('Jane', 25);
console.log(john.sayHello === jane.sayHello); // true

原型链继承中的优化

在 JavaScript 中，实现继承通常是通过原型链来完成的。在 ES6 类出现之前，我们通过手动设置原型链来实现继承。例如，假设有一个 Animal 构造函数和一个 Dog 构造函数，Dog 继承自 Animal：

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(this.name +'makes a sound.');
};

function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
    console.log(this.name +'barks.');
};

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak();
myDog.bark();

在这个例子中，Dog.prototype = Object.create(Animal.prototype) 这一步建立了 Dog 构造函数的原型链，使其继承自 Animal。Dog.prototype.constructor = Dog 这一步是为了修正 constructor 属性，因为 Object.create 会丢失原来的 constructor。

然而，这种手动设置原型链的方式容易出错。ES6 类通过 extends 关键字简化了继承的实现，并且在底层做了更好的优化。例如：

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name +'makes a sound.');
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
    bark() {
        console.log(this.name +'barks.');
    }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak();
myDog.bark();

extends 关键字让代码更简洁，并且 JavaScript 引擎在处理类继承时会进行一些优化，例如更高效的方法查找和内存管理。

优化技巧之构造函数参数处理

参数验证

在构造函数中，对传入的参数进行验证是非常重要的。这可以防止创建无效的对象实例，提高程序的健壮性。例如，对于 Person 构造函数，我们可以验证 age 是否为正整数：

function Person(name, age) {
    if (typeof name!=='string' || name.trim() === '') {
        throw new Error('Name must be a non - empty string.');
    }
    if (typeof age!== 'number' || age <= 0) {
        throw new Error('Age must be a positive number.');
    }
    this.name = name;
    this.age = age;
}

try {
    const john = new Person('John', 30);
    const invalidPerson = new Person('', -5);
} catch (error) {
    console.error(error.message);
}

通过这种方式，当传入无效参数时，构造函数会抛出错误，阻止无效对象的创建。

对于类，同样可以在 constructor 中进行参数验证：

class Person {
    constructor(name, age) {
        if (typeof name!=='string' || name.trim() === '') {
            throw new Error('Name must be a non - empty string.');
        }
        if (typeof age!== 'number' || age <= 0) {
            throw new Error('Age must be a positive number.');
        }
        this.name = name;
        this.age = age;
    }
}

try {
    const john = new Person('John', 30);
    const invalidPerson = new Person('', -5);
} catch (error) {
    console.error(error.message);
}

默认参数

ES6 引入了默认参数的特性，这在构造函数中非常有用。我们可以为构造函数的参数设置默认值，这样在调用构造函数时，如果没有传入相应的参数，就会使用默认值。例如：

function Person(name = 'Unknown', age = 0) {
    this.name = name;
    this.age = age;
}

const defaultPerson = new Person();
console.log(defaultPerson.name); // 'Unknown'
console.log(defaultPerson.age); // 0

对于类，同样可以使用默认参数：

class Person {
    constructor(name = 'Unknown', age = 0) {
        this.name = name;
        this.age = age;
    }
}

const defaultPerson = new Person();
console.log(defaultPerson.name); // 'Unknown'
console.log(defaultPerson.age); // 0

默认参数使得构造函数的调用更加灵活，同时减少了不必要的逻辑判断。

优化技巧之方法定义与优化

箭头函数在方法定义中的注意事项

虽然箭头函数在 JavaScript 中非常方便，但在类和构造函数的方法定义中使用箭头函数时需要特别小心。箭头函数没有自己的 this，它的 this 是继承自外层作用域的。这可能会导致一些意想不到的结果。

例如，考虑以下错误使用箭头函数作为类方法的例子：

class Person {
    constructor(name) {
        this.name = name;
    }
    // 错误的使用箭头函数
    sayHello = () => {
        console.log(`Hello, my name is ${this.name}`);
    };
}

const john = new Person('John');
const sayHello = john.sayHello;
sayHello(); // 输出 'Hello, my name is undefined'

在这个例子中，箭头函数 sayHello 的 this 指向的是定义时的外层作用域，而不是 Person 实例。当我们将 sayHello 方法赋值给 sayHello 变量并调用时，this 不再是 john 实例，所以 this.name 是 undefined。

正确的做法是使用普通函数定义方法：

class Person {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const john = new Person('John');
const sayHello = john.sayHello;
sayHello.call(john); // 输出 'Hello, my name is John'

方法的性能优化

在某些情况下，我们可能需要对类或构造函数中的方法进行性能优化。例如，如果一个方法执行非常耗时，并且其结果不会随实例属性的变化而变化，我们可以考虑使用缓存来提高性能。

假设我们有一个 Circle 类，其中有一个计算圆面积的方法 calculateArea：

class Circle {
    constructor(radius) {
        this.radius = radius;
        this.areaCache = null;
    }
    calculateArea() {
        if (this.areaCache === null) {
            this.areaCache = Math.PI * this.radius * this.radius;
        }
        return this.areaCache;
    }
}

const circle = new Circle(5);
console.log(circle.calculateArea()); // 第一次计算并缓存
console.log(circle.calculateArea()); // 直接返回缓存结果

通过这种方式，我们避免了多次重复计算圆的面积，提高了方法的执行效率。

优化技巧之内存管理

避免循环引用

在 JavaScript 中，循环引用是导致内存泄漏的常见原因之一。当两个或多个对象相互引用，形成一个闭环时，垃圾回收机制可能无法正确回收这些对象所占用的内存。

例如，考虑以下构造函数示例：

function Parent() {
    this.child = null;
}

function Child() {
    this.parent = null;
}

const parent = new Parent();
const child = new Child();
parent.child = child;
child.parent = parent;

在这个例子中，parent 和 child 相互引用，形成了循环引用。如果在后续代码中不再需要这两个对象，但它们之间的引用关系仍然存在，垃圾回收机制就无法回收它们占用的内存。

为了避免循环引用，在不再需要对象之间的引用时，应该手动解除引用。例如：

function Parent() {
    this.child = null;
}

function Child() {
    this.parent = null;
}

const parent = new Parent();
const child = new Child();
parent.child = child;
child.parent = parent;

// 不再需要这两个对象时
parent.child = null;
child.parent = null;

及时释放资源

如果类或构造函数中的对象持有一些外部资源，如文件句柄、网络连接等，在对象不再使用时，应该及时释放这些资源。

假设我们有一个 FileReader 类，用于读取文件内容：

class FileReader {
    constructor(filePath) {
        this.filePath = filePath;
        this.fileHandle = null;
    }
    openFile() {
        // 模拟打开文件操作，实际可能使用 Node.js 的 fs 模块
        this.fileHandle = { filePath: this.filePath };
        console.log(`File ${this.filePath} opened.`);
    }
    closeFile() {
        if (this.fileHandle) {
            this.fileHandle = null;
            console.log(`File ${this.filePath} closed.`);
        }
    }
}

const reader = new FileReader('example.txt');
reader.openFile();
// 进行文件读取操作
reader.closeFile();

在这个例子中，openFile 方法模拟打开文件并获取文件句柄，closeFile 方法在不再需要文件时释放文件句柄，避免资源泄漏。

优化技巧之代码结构与可读性

单一职责原则

在设计类和构造函数时，应该遵循单一职责原则。一个类或构造函数应该只负责一项主要功能，这样可以使代码更易于理解、维护和扩展。

例如，假设我们有一个 User 类，它既负责用户信息的管理，又负责用户登录和注册的逻辑：

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }
    saveUser() {
        // 模拟保存用户信息到数据库
        console.log(`User ${this.name} saved.`);
    }
    login() {
        // 模拟用户登录逻辑
        console.log(`${this.name} logged in.`);
    }
    register() {
        // 模拟用户注册逻辑
        this.saveUser();
        console.log(`${this.name} registered.`);
    }
}

这个 User 类违反了单一职责原则，它同时负责用户数据管理和用户认证逻辑。更好的做法是将这些职责分离到不同的类中：

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }
    saveUser() {
        // 模拟保存用户信息到数据库
        console.log(`User ${this.name} saved.`);
    }
}

class UserAuth {
    constructor(user) {
        this.user = user;
    }
    login() {
        // 模拟用户登录逻辑
        console.log(`${this.user.name} logged in.`);
    }
    register() {
        this.user.saveUser();
        console.log(`${this.user.name} registered.`);
    }
}

const user = new User('John', 'john@example.com');
const userAuth = new UserAuth(user);
userAuth.register();

通过这种方式，代码结构更加清晰，每个类的职责明确，便于维护和扩展。

代码模块化

将相关的类和构造函数组织成模块，可以提高代码的可维护性和复用性。在 JavaScript 中，可以使用 ES6 模块或 CommonJS 模块。

例如，假设我们有多个与图形相关的类，如 Circle、Rectangle 和 Triangle，我们可以将它们组织成一个模块：

// shapes.js
export class Circle {
    constructor(radius) {
        this.radius = radius;
    }
    calculateArea() {
        return Math.PI * this.radius * this.radius;
    }
}

export class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
    calculateArea() {
        return this.width * this.height;
    }
}

export class Triangle {
    constructor(base, height) {
        this.base = base;
        this.height = height;
    }
    calculateArea() {
        return 0.5 * this.base * this.height;
    }
}

然后在其他文件中可以导入这些类：

// main.js
import { Circle, Rectangle, Triangle } from './shapes.js';

const circle = new Circle(5);
const rectangle = new Rectangle(4, 6);
const triangle = new Triangle(3, 8);

console.log(circle.calculateArea());
console.log(rectangle.calculateArea());
console.log(triangle.calculateArea());

通过模块化，我们可以将代码分割成更小的、可管理的部分，方便在不同的项目中复用。

优化技巧之利用 JavaScript 特性

使用 Object.freeze

Object.freeze 方法可以冻结一个对象，使其属性不能被添加、删除或修改。在某些情况下，这可以提高代码的安全性和性能。

例如，假设我们有一个配置对象，在程序运行过程中不应该被修改：

const config = {
    apiUrl: 'https://example.com/api',
    timeout: 5000
};

Object.freeze(config);

// 尝试修改属性
config.apiUrl = 'https://new - example.com/api';
console.log(config.apiUrl); // 仍然输出 'https://example.com/api'

在类和构造函数中，如果有一些属性是固定不变的，也可以使用 Object.freeze 来防止意外修改。

利用 Proxy

Proxy 是 ES6 引入的一个强大特性，它可以用于创建一个代理对象，对目标对象的操作进行拦截和自定义。在类和构造函数中，Proxy 可以用于实现一些高级的功能，如数据验证、日志记录等。

例如，假设我们有一个 Person 类，我们想在设置 age 属性时进行验证：

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

const person = new Person('John', 30);

const personProxy = new Proxy(person, {
    set(target, property, value) {
        if (property === 'age' && (typeof value!== 'number' || value <= 0)) {
            throw new Error('Age must be a positive number.');
        }
        target[property] = value;
        return true;
    }
});

personProxy.age = 35;
console.log(personProxy.age);

try {
    personProxy.age = -5;
} catch (error) {
    console.error(error.message);
}

通过 Proxy，我们可以在不修改 Person 类内部代码的情况下，对 age 属性的设置进行验证。

优化技巧之性能分析与监控

使用 console.time 和 console.timeEnd

在优化类和构造函数的性能时，首先需要知道哪些部分的代码执行时间较长。console.time 和 console.timeEnd 是 JavaScript 提供的简单性能分析工具。

例如，假设我们有一个复杂的构造函数 ComplexObject，我们想分析其初始化时间：

function ComplexObject() {
    // 模拟复杂的初始化操作
    for (let i = 0; i < 1000000; i++) {
        // 一些计算
    }
}

console.time('ComplexObject initialization');
const complexObj = new ComplexObject();
console.timeEnd('ComplexObject initialization');

通过这种方式，我们可以快速了解构造函数的初始化时间，以便针对性地进行优化。

使用性能分析工具

对于更深入的性能分析，现代浏览器和 Node.js 都提供了性能分析工具。

在浏览器中，可以使用 Chrome DevTools 的 Performance 面板。在 Node.js 中，可以使用 node --prof 命令结合 node-prof 工具进行性能分析。

例如，在 Chrome DevTools 中，打开 Performance 面板，录制一段包含类和构造函数操作的脚本执行过程，然后分析时间线，可以详细了解每个函数的执行时间、内存使用情况等，从而找出性能瓶颈并进行优化。

通过综合运用以上这些优化技巧，可以使 JavaScript 中类和构造函数的代码更加高效、健壮和易于维护。无论是在小型项目还是大型应用中，这些优化都能带来显著的收益。