js类定义函数时用prototype与不用的区别示例介绍

当我们定义一个 JavaScript 的对象时，可以使用构造函数对其进行初始化，也可以使用 prototype 扩展对象，JavaScript 中的类的定义可以使用 prototype 与不使用 prototype 两种方式。

当我们定义一个 JavaScript 的对象时，可以使用构造函数对其进行初始化，也可以使用 prototype 扩展对象，JavaScript 中的类的定义可以使用 prototype 与不使用 prototype 两种方式。

使用 prototype 的方式，代码可读性好，易于维护。同时可以减少对象的内存占用，避免过多的类定义，同时可以节省执行时间。

不使用 prototype 的方式，则会导致每次创建对象都会创建重复的内存，因此在对象数量较大时会增加内存占用，同时会增加创建对象的时间。

下面通过两个示例详细说明 prototype 的使用与不使用的区别。

示例一：使用 prototype

我们通过一个例子来说明使用 prototype 的情况下，对象定义与创建的过程。代码如下所示：

// 定义一个 Person 类
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// Person 类添加一个函数
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}, I am ${this.age} years old.`);
};
// 创建一个 Person 类对象
const person = new Person("Tom", 20);
// 调用函数 sayHello()
person.sayHello();

在这个示例中，首先定义了一个 Person 类，并定义了其构造函数，构造函数将两个属性值分别赋给对象的 this.name 和 this.age 。接下来，通过向 Person.prototype 对象中添加了一个 sayHello 函数来扩展 Person 类。最后，通过创建一个 person 对象并调用 sayHello 函数来验证类的扩展功能。

使用 prototype 的方式可以使扩展代码更加清晰明了，与函数单独定义的区别也更加明显。

示例二：不使用 prototype

接下来，我们用一个例子介绍在不使用 prototype 的情况下对象定义的过程。代码如下所示：

// 定义一个 People 类
function People(name, age) {
  // 构造函数中添加函数
  this.sayHello = function() {
    console.log(`Hello, my name is ${name}, I am ${age} years old.`);
  };
}
// 创建一个 People 类对象
const people = new People("Tom", 20);
// 调用函数 sayHello()
people.sayHello();

在这个示例中，首先定义了一个 People 类，并在构造函数中定义了扩展函数 sayHello 。接下来，通过创建一个 people 对象，来验证类扩展的功能。

这种方式虽然可以实现类的功能扩展，但是每次创建的对象都会创建一个新的内存空间，内存占用较大，也无法避免对象重复定义的问题。

综上所述，使用 prototype 方式可以较好地优化类的扩展，使代码更加清晰明了，易于维护。同时避免了创建过多的类，节省执行时间，减少内存占用。