返回

剖析 JavaScript 中对象方法、类方法与原型方法的差异

前端

JavaScript 中，对象方法、类方法和原型方法是操作对象的三种常用方式。每种方法都有其独特的功能和应用场景，掌握它们之间的差异对于高效使用 JavaScript 至关重要。本文将深入剖析这三种方法，帮助读者全面理解它们的特点和应用时机。

对象方法：构造函数中的方法和原型对象上的方法

对象方法可以划分为两类：构造函数中的方法和原型对象上的方法。

构造函数中的方法

构造函数中的方法是指在构造函数内部定义的方法。这些方法可以在对象创建时被调用，用于对对象进行初始化或执行其他操作。例如，我们定义了一个 Person 构造函数，并在其中定义了一个 sayHello 方法：

function Person(name) {
  this.name = name;

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name);
  };
}

创建 Person 对象时，我们可以调用 sayHello 方法：

const person1 = new Person("John Doe");
person1.sayHello(); // 输出 "Hello, my name is John Doe"

原型对象上的方法

原型对象上的方法是指在构造函数的原型对象上定义的方法。这些方法可以被所有使用该构造函数创建的对象继承。例如，我们在 Person 构造函数的原型对象上定义了一个 greet 方法：

Person.prototype.greet = function() {
  console.log("Hello from " + this.name);
};

现在，所有使用 Person 构造函数创建的对象都可以调用 greet 方法：

const person2 = new Person("Jane Doe");
person2.greet(); // 输出 "Hello from Jane Doe"

类方法：为函数添加属性和方法

类方法，顾名思义，是指为函数添加的方法。在 JavaScript 中，由于函数也是对象，因此可以为函数添加属性和方法。例如，我们定义了一个名为 sayHi 的类方法：

function sayHi() {
  console.log("Hi there!");
}

Function.prototype.sayHi = sayHi;

现在，所有函数都可以调用 sayHi 方法：

function greet() {
  console.log("Hello world!");
}

greet.sayHi(); // 输出 "Hi there!"

原型方法：为构造函数的原型对象添加方法

原型方法是指为构造函数的原型对象添加的方法。这些方法可以被所有使用该构造函数创建的对象继承。例如，我们在 Person 构造函数的原型对象上定义了一个 walk 方法：

Person.prototype.walk = function() {
  console.log("I'm walking.");
};

现在，所有使用 Person 构造函数创建的对象都可以调用 walk 方法：

const person3 = new Person("Tom Smith");
person3.walk(); // 输出 "I'm walking."

总结

下表总结了对象方法、类方法和原型方法之间的差异：

特性 对象方法 类方法 原型方法
定义位置 构造函数内部或原型对象 函数对象上 构造函数的原型对象上
可用性 仅限于使用该构造函数创建的对象 所有函数 所有使用该构造函数创建的对象
应用场景 对象初始化、操作对象 为函数添加方法 为构造函数创建的对象添加方法

差异实例

以下代码演示了对象方法、类方法和原型方法的差异：

// 对象方法
function Person(name) {
  this.name = name;

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name);
  };
}

const person1 = new Person("John Doe");
person1.sayHello(); // 输出 "Hello, my name is John Doe"


// 类方法
Function.prototype.sayHi = function() {
  console.log("Hi there!");
};

function greet() {
  console.log("Hello world!");
}

greet.sayHi(); // 输出 "Hi there!"


// 原型方法
Person.prototype.walk = function() {
  console.log("I'm walking.");
};

const person2 = new Person("Jane Doe");
person2.walk(); // 输出 "I'm walking."

输出：

Hello, my name is John Doe
Hi there!
I'm walking.

参考文献