面试题：JavaScript中prototype特性对对象创建性能的影响

Question

请阐述JavaScript中使用`prototype`特性创建对象和使用字面量或构造函数直接创建对象，在性能方面有哪些不同？并举例说明。

Answer 1

使用prototype特性创建对象

• 性能特点：当使用prototype创建对象时，多个实例可以共享prototype上定义的属性和方法，这样在内存使用上更高效。因为实例不会为相同的属性和方法各自开辟内存空间，而是共享prototype上的一份。
• 举例：

function Person() {}
Person.prototype.name = 'defaultName';
Person.prototype.sayHello = function() {
    console.log('Hello, I am'+ this.name);
};

let person1 = new Person();
let person2 = new Person();
// person1和person2共享Person.prototype上的name和sayHello

使用字面量或构造函数直接创建对象

• 字面量
  • 性能特点：使用字面量创建对象简单直接，但每个对象都是独立的，会为对象的每个属性和方法分配独立的内存空间。如果创建大量相似对象，内存开销较大。
  • 举例：

let obj1 = {
    name: 'obj1Name',
    sayHello: function() {
        console.log('Hello, I am'+ this.name);
    }
};
let obj2 = {
    name: 'obj2Name',
    sayHello: function() {
        console.log('Hello, I am'+ this.name);
    }
};
// obj1和obj2各自拥有独立的name和sayHello，内存开销大

• 构造函数直接创建
  • 性能特点：每次通过构造函数创建新实例，都会为实例的属性和方法分配新的内存空间，即使这些属性和方法在不同实例上本质相同，也不共享，所以内存使用效率相对较低。
  • 举例：

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

let animal1 = new Animal('Dog');
let animal2 = new Animal('Cat');
// animal1和animal2的speak方法各自占用独立内存

总体而言，在创建大量相似对象时，使用prototype特性创建对象在性能上更具优势，能有效减少内存开销；而字面量和直接使用构造函数创建对象在简单场景或对象数量较少时更方便直观，但可能在内存使用上不够高效。