javascript - 'this.randomGenes' 为什么不是一个函数？

Question

所以我在使用这个 p5js 脚本时遇到了一些麻烦。我收到一个 TypeError 消息，说“this.randomGenes 不是一个函数”，但对我来说它看起来像是一个函数......我不明白错误来自哪里。一切都拼写正确，所有分号都在那里，所有括号都关闭了，所有括号也是如此。这个错误对我来说不会很明显。

function DNA(genes) {
    this.maxWeight = 25;
    this.maxSpeed = 25;

    if (genes) {
        this.genes = genes;
    } else {
        this.genes = []; // weight, position, maxspeed, rgba
        this.randomGenes();
    }

    this.randomGenes = function() {
        this.genes[0] = random(this.maxWeight);
        this.genes[1] = [random(height), random(width)];
        this.genes[2] = random(this.maxSpeed);
        this.genes[3] = [random(255), random(255), random(255), random(255)];
    }
}

Answer 1

您需要创建 DNA 函数的“实例”，以便将 this 绑定(bind)到该对象实例，然后您可以从该实例调用 randomGenes。如果您只是运行 DNA 函数，this 将被错误绑定(bind)，并且不会找到该函数。

function DNA(genes) {
    this.maxWeight = 25;
    this.maxSpeed = 25;

    if (genes) {
        this.genes = genes;
    } else {
        this.genes = []; // weight, position, maxspeed, rgba
        this.randomGenes();
    }

    this.randomGenes = function() {
        this.genes[0] = random(this.maxWeight);
        this.genes[1] = [random(height), random(width)];
        this.genes[2] = random(this.maxSpeed);
        this.genes[3] = [random(255), random(255), random(255), random(255)];
    }
}

// Make an instance of the DNA object so that `this` gets bound to it
var DNA1 = new DNA("myGenes");

// Now, you can call the function via the instance
// Here, this will cause an error about "random" not being defined, but
// that actually proves that "randomGenes" was invoked.
DNA1.randomGenes();

现在，正如 @qqilihq 在评论中提到的，如果您的实例是在没有传递任何参数的情况下创建的，您将收到错误，因为您试图在将函数分配为方法之前调用该函数。为了纠正这个问题，我们需要更改代码，但同样的更改也应该由于另一个原因而发生......

当您创建函数的新实例时，该函数称为“函数构造函数”，因为您调用它来构造对象实例。由于(通常)对象的所有实例都使用相同的行为(方法)，因此我们通常将这些方法添加到所有实例都将从中继承的对象的基础“原型(prototype)”对象中。这样，您只需存储该函数一次，所有实例都会继承它。通过将您的函数移至原型(prototype)中，它在实际创建任何实例之前就已存在于内存中，因此不仅解决了您的问题，而且效率更高。

所以，你的代码确实应该是:

    function DNA(genes) {
        // Instance properties get created using the "this" keyword
        // inside the constructor function
        this.maxWeight = 25;
        this.maxSpeed = 25;

        if (genes) {
            this.genes = genes;
        } else {
            this.genes = []; // weight, position, maxspeed, rgba
            this.randomGenes();
        }
    }
    
    // By adding the function to the prototype of DNA, all instances constructed
    // via the DNA constructor function will inherit the method:
    DNA.prototype.randomGenes = function() {
            this.genes[0] = random(this.maxWeight);
            this.genes[1] = [random(height), random(width)];
            this.genes[2] = random(this.maxSpeed);
            this.genes[3] = [random(255), random(255), random(255), random(255)];
    }

    // Make an instance of the DNA object so that `this` gets bound to it
    var DNA1 = new DNA();

    // Now, you can call the function via the instance
    // Here, this will cause an error about "random" not being defined, but
    // that actually proves that "randomGenes" was invoked.
    DNA1.randomGenes();