javascript - 了解 JavaScript 类方法和原型(prototype)

Question

第一个例子:

function Animal(name) {
    // Instance properties can be set on each instance of the class
    this.name = name;
    this.speak = function() {
        console.log("My name is " + this.name);
    }
}

var animal = new Animal('Petname1');
animal.speak();


function Cat(name) {
    Animal.call(this, name);
}

Cat.prototype = new Animal();

var cat = new Cat('Petname2');
console.log(cat.speak());

第二个例子:

function Animal(name) {
    // Instance properties can be set on each instance of the class
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log("My name is " + this.name);
};

var animal = new Animal('Petname1');
animal.speak();


function Cat(name) {
    Animal.call(this, name);
}

Cat.prototype = new Animal();

var cat = new Cat('Petname2');
console.log(cat.speak());

在第一个示例中，我直接添加到类中，在第二个示例中，我通过 prototype 添加。有什么不同？输出是一样的。

Answer 1

首先你必须了解 new 如何在 Javascript 上工作以及这个 link对此有很好的解释。

基于此，两种方法之间的区别在于创建新动物和猫时创建的 speak 函数的数量。

第一种方法的 speak 函数的实例数与 Cat 和 Animal 的实例数相同。然而，无论您实例化了多少只猫和动物，第二种方法都只有一个 speak 函数。查看以下片段。

在这个例子中，我们可以看到两个 Animal 实例的“说话”功能是不同的。

function Animal(name) {
    this.name = name;
    this.speak = function() {
        console.log("My name is " + this.name);
    }
}

var animalA = new Animal();
var animalB = new Animal();

animalA.speak === animalB.speak // false

分配给原型(prototype)我们可以看到两个实例是相同的。

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

Animal.prototype.speak = function() {
    console.log("My name is " + this.name);
};

var animalA = new Animal();
var animalB = new Animal();

animalA.speak === animalB.speak // true