浅谈几种常用的JS类定义方法

2023年5月27日下午3:19 • JavaScript

下面是“浅谈几种常用的JS类定义方法”的详细讲解，包含两条示例说明。

一、介绍

在JavaScript中，我们可以使用多种方式来定义和创建自己的类。本文将介绍常用的几种JS类定义方法，以及它们之间的区别和优缺点，帮助读者选取更适合自己的方式来定义类。

二、JS类定义方法

1.函数对象法

这是最常见的一种定义JS类的方法。通过创建一个函数来表示类，然后使用new来实例化对象。

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

const person1 = new Person('Alice', 20);
person1.sayHi(); // Hi, my name is Alice, I'm 20 years old.

这种方式适用于创建简单的类和对象，并且很容易理解与使用。但是，每次创建实例对象时都需要重新创建内部方法，对于复杂的类而言会产生性能上的问题。

2.原型法

每一个JS对象都有一个指向原型的指针，通过原型可以添加属性和方法。使用原型可以避免重复创建每个实例对象的方法，从而减少内存的消耗。这种方式定义JS类，只需要在函数原型上添加属性和方法即可。

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

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

const person1 = new Person('Alice', 20);
person1.sayHi(); // Hi, my name is Alice, I'm 20 years old.

这种方式适用于创建复杂的类以及实例化许多对象时，能够提高性能。但是，可能会导致属性之间的共享问题。

3.Object.create法

使用Object.create方法可以从现有对象创建新对象，新对象继承现有对象的属性和方法。通过这个方法可以构造出一个继承父类方法的子类，而不需要使用new操作符。

const person = {
  sayHi: function() {
    console.log(`Hi, my name is ${this.name}, I'm ${this.age} years old.`);
  }
};

const person1 = Object.create(person);
person1.name = 'Alice';
person1.age = 20;
person1.sayHi(); // Hi, my name is Alice, I'm 20 years old.

这种方式适用于创建对象继承树，也可以从现有对象创建新对象。

4.ES6 Class语法糖法

ES6引入了class和extends关键字，使JS类定义更加简单和面向对象。使用这种方法把类的定义写在一个类块中，而不再是一个函数。

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

  sayHi() {
    console.log(`Hi, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

const person1 = new Person('Alice', 20);
person1.sayHi(); // Hi, my name is Alice, I'm 20 years old.

这种方式比较适合以面向对象的思想来编写代码的前端开发使用，但是在底层实现上其实还是基于ES5中的prototype和构造函数的方式，因此不是所谓的“真正意义上的面向对象”。