如何 "extend" javascript "class" 并添加新内容？

Question

好的，所以我想做的是制作一个射弹 class，然后制作一个 BasicShot class "extends" 射弹，就像您可以在 Java.

我想将 parent 的变量设置为 parent class，任何新的变量都设置在 child class 中。

var Projectile = function(x, y){
     this.x = x;
     this.y = y;
}

Projectile.prototype.update(){
     console.log("should not be called");
}

Projectile.prototype.checkIfWallHit(){
     console.log("should be called");
}

然后 child class.

var BasicShot = new function(x, y, left){
     this = new Projectile(x,y);
     this.left = left;
}

BasicShot.prototype.update(){
     console.log("should be called");
}

但是当我尝试这样做时它说 "BasicShot not defined" 当我尝试制作 BasicShot object.

那么，如何扩展我的 Projectile class？

Answer 1

你可以做到这一点

http://jsfiddle.net/jigardafda/0qkevb0q/2/

var factory = {};

factory.getProjectileObject = function(xarg, yarg){

    var Projectile = function(x, y){
         this.x = x;
         this.y = y;
    }

    Projectile.prototype.update = function() {
         console.log("should not be called");
    }

    Projectile.prototype.checkIfWallHit = function() {
         console.log("should be called");

    }

    return new Projectile(xarg, yarg);
}

factory.getBasicshotObject = function(xarg, yarg, leftarg) {

    var BasicShot = function(left){
         this.left = left;
    }

    // Extending parents methods
    BasicShot.prototype = factory.getProjectileObject(xarg, yarg);
    BasicShot.prototype.constructor = BasicShot;

    BasicShot.prototype.update = function(){
         console.log("should be called");
    }

    return new BasicShot(leftarg);
}

i = factory.getBasicshotObject(12,34, 23);
console.log(i);

Answer 2

这是基本模式，请参阅评论：

// === Projectile

// The constructor
function Projectile(x, y) {
    // Do things to initialize instances...
    this.x = x;
    this.y = y;
}

// Add some methods to its prototype
Projectile.prototype.update = function() {
    // This is a method on `Projectile`
    snippet.log("Projectile#update");
};
Projectile.prototype.checkIfWallHit = function(){
    snippet.log("Projectile#checkIfWallHit");
};

// ==== BasicShot

// The constructor
function BasicShot(x, y, left) {
    // Give Projectile a chance to do its thing
    Projectile.call(this, x, y);
    this.left = left;
}
// Hook it up to `Projectile`
BasicShot.prototype = Object.create(Projectile.prototype);
BasicShot.prototype.constructor = BasicShot; // JavaScript does this by default, so let's maintain it when replacing the object

// Add methods to its prototype
BasicShot.prototype.update = function() {
    snippet.log("BasicShot#update");
};

// === Usage
snippet.log("Using Projectile");
var p = new Projectile(1, 2);
p.update(); // Projectile#update
p.checkIfWallHit(); // Projectile#checkIfWallHit

snippet.log("Using BasicShot");
var c = new BasicShot(1, 2, 3);
c.update(); // BasicShot#update
p.checkIfWallHit(); // Projectile#checkIfWallHit

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

从 ES6 开始，JavaScript 的下一个版本变得很多更简单：

// REQUIRES ES6!!
class Projectile {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    update() {
        snippet.log("Projectile#update");
    }
    checkIfWallHit() {
        snippet.log("Projectile#checkIfWallHit");
    }
};

class BasicShot extends Projectile {
    constructor(x, y, left) {
        super(x, y);
        this.left = left;
    }
    update() {
        snippet.log("BasicShot#update");
    }
}

它在幕后做了与上面第一个示例相同的事情，新语法只是语法糖。不过真的是好糖。

Answer 3

实现这种继承的最佳方式是使用原型继承。

一种通用做法是将全局函数关联到对象并使用它来创建派生对象。（因为 global 不好，所以还是有办法规避的）。

Object.prototype.begetObject = function () {
    function F() {}
    F.prototype = this;
    return new F();
};

BasicShot= Projectile.begetObject();

您可以按照您在问题中提出的相同方式 override/extend 此 basicShot 对象的功能。

BasicShot.prototype.update = function (){
     console.log("should be called");
};

我强烈推荐阅读这篇关于原型继承的好文章，它绝对值得。 http://javascript.crockford.com/prototypal.html

如何 "extend" javascript "class" 并添加新内容？

How to "extend" javascript "class" and add new stuff?

javascript

parent-child