[英]How to “extend” javascript “class” and add new stuff?
好的,所以我想做的是创建一个Projectile类,然后创建一个BasicShot类,该类以类似于Java的方式“扩展” Projectile。
我想将父级变量设置为父类,并且在子类中设置任何新变量。
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");
}
然后是孩子班。
var BasicShot = new function(x, y, left){
this = new Projectile(x,y);
this.left = left;
}
BasicShot.prototype.update(){
console.log("should be called");
}
但是,当我尝试执行此操作时,当我尝试创建BasicShot对象时,它显示“未定义BasicShot”。
那么,如何扩展我的Projectile类?
这是基本模式,请参见注释:
// === 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");
}
}
它与上面的第一个示例做了相同的事情,新语法只是语法糖。 但这真的是很好的糖。
你可以这样做
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);
实现此类继承的最佳方法是使用原型继承。
一种普遍的做法是将全局函数与Object关联,并使用它创建派生对象。 (由于global不好,因此也有一些方法可以规避这一点)。
Object.prototype.begetObject = function () {
function F() {}
F.prototype = this;
return new F();
};
BasicShot= Projectile.begetObject();
您可以按照在问题中提出的相同方法,将功能覆盖/扩展到此basicShot对象。
BasicShot.prototype.update = function (){
console.log("should be called");
};
我强烈建议阅读这篇关于原型继承的不错的文章,这绝对是值得的。 http://javascript.crockford.com/prototypal.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.