javascript - .prototype 在 JavaScript 中如何工作？

Question

我刚刚开始学习使用 JavaScript 和 HTML5 进行游戏开发的教程。 javascript.prototype 已多次发挥作用。我不太明白它是如何工作的。这是我找到的一个链接，其中有很好的解释，但我仍然有点困惑

How does JavaScript .prototype work? 。

谁能解释一下吗？这是我的代码示例:

 function Enemy(){
        this.srcX = 140;  //gets the location of enemy in x and Y here
        this.srcY = 600;
        this.width = 45;//gets the enemies width and height here
        this.height = 54; 
        this.drawX = randomRange(0, canvasWidth  - this.width);
        this.drawY = randomRange(0, canvasHeight - this.height); 
        this.centerX = this.drawX + (this.width / 2);
        this.centerY = this.drawY +(this.height / 2);

        //this.targetX = this.centerX;
        //this.targetY = this.centerY;
        //this.randomMoveTime = randomRange(4000,10000);
        this.speed = 1;
        //var that = this;
        //this.moveInterval = setInterval(function() {that.setTargetLocation();},that.randomMOveTime);
        this.isDead = false;
    }

    Enemy.prototype.update = function() {
        //this.checkDirection();
         this.centerX = this.drawX + (this.width / 2);
        this.centerY = this.drawY + (this.height / 2);
    }

Answer 1

我认为原型(prototype)继承最大的困惑是对象通过其内部 [[Prototype]] 属性从其构造函数的 prototype 继承。两者都被称为“原型(prototype)”。所有函数都有一个默认的 prototype 属性，它是一个空对象。

就您而言:

function Enemy(){
        this.srcX = 140;  //gets the location of enemy in x and Y here
        this.srcY = 600;
        ...
}

是一个函数，当使用 new 调用时，它充当构造函数，将属性分配给自身的新实例。该实例有一个指向 Enemy.prototype 的内部 [[Prototype]] 属性。

然后:

Enemy.prototype.update = function() {
    //this.checkDirection();
     this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
}

这会为 Enemy.prototype 分配一个新属性，该属性是一个函数。因此，这会将 update 属性放在 Enemy 的所有实例的继承链上，因此它们都继承 update 方法。

所以:

var enemy0 = new Enemy();
var enemy1 = new Enemy();

typeof enemy0.update // function
typeof enemy1.update // function

enemy0.update === enemy1.update  // true

只有当两个表达式引用同一个对象(即分配给Enemy.prototype.update的函数)时，测试才为真。

您可以继续向Enemy.prototype添加属性和方法，它们将被所有实例继承，甚至是那些已经构造的实例。但如果你将其更改为不同的对象:

Enemy.prototype = {update:function(){/*new update function*/}};

那么旧实例仍将具有旧的[[Prototype]]，而新实例将具有新实例。

网络上有上百万篇关于 javascript 原型(prototype)继承的文章，阅读一些并使用它，如果有的话请提出更多问题。 :-)