[英]OO JavaScript call parent method
我一直试图掌握OO JavaScript并创建了一个简单的例子。
function BasePage(name) {
this.init(name);
}
BasePage.prototype = {
init: function(name) {
this.name = name;
},
getName: function() {
return this.name;
}
}
function FaqPage (name, faq) {
this.init(name, faq);
}
FaqPage.prototype = new BasePage();
FaqPage.prototype = {
init: function(name, faq) {
BasePage.prototype.init.call(this, name);
this.faq = faq;
},
getFaq: function() {
return this.faq;
}
}
var faqPage = new FaqPage('Faq Page', 'Faq');
var text = faqPage.getName() + ' ' + faqPage.getFaq();
$('body').text(text);
运行此结果会导致以下消息:
未捕获的TypeError:对象
#<Object>
没有方法'getName'
我想知道的是如何在超类中调用方法getName()
而不必覆盖并在子类中调用它?
如果我认为这种做法不好/好的话。
发生该错误是因为即使您将FaqPage
的原型设置为BasePage
的实例,您的下一行也会立即覆盖它。 所以FaqPage
不是从BasePage
继承的。 将属性/方法添加到FaqPage
的原型中,而不是第二次定义它:
FaqPage.prototype.init = function(name, faq) {
BasePage.prototype.init.call(this, name);
this.faq = faq;
}
FaqPage.prototype.getFaq = function() {
return this.faq;
}
第一行是正确的,您从基础对象创建原型。
FaqPage.prototype = new BasePage();
但是你覆盖它,所以不再继承基础对象
FaqPage.prototype = {
init: function(name, faq) {
BasePage.prototype.init.call(this, name);
this.faq = faq;
},
getFaq: function() {
return this.faq;
}
}
而不是定义整个原型,只覆盖单个函数:
FaqPage.prototype.init = function(name, faq) {
BasePage.prototype.init.call(this, name);
this.faq = faq;
};
FaqPage.prototype.getFaq = function() {
return this.faq;
};
如果继承是你所追求的,据我所知,在JavaScript中完成它并不是非常简单。 我使用过John Resig的这个片段,它就像一个魅力。 http://ejohn.org/blog/simple-javascript-inheritance/
在你的情况下,它是如何工作的,
BasePage的
var BasePage = Class.extend({
init: function(name){
this.name = name;
},
getName: function(){
return this.name;
}
});
FaqPage类继承BasePage
var FaqPage = BasePage.extend({
init: function(name, faq){
this._super( name );
this.faq = faq;
},
getFaq: function() {
return this.faq;
}
});
然后
var faqPage = new FaqPage('Faq Page', 'Faq');
var text = faqPage.getName() + ' ' + faqPage.getFaq();
$('body').text(text);
当然,要实现这一点,您必须在我链接的页面上包含实现代码。
这是小提琴, http://jsfiddle.net/c8yjY/
我感觉到你的痛苦。 正如其他人提到的那样getName
是undefined
因为你覆盖了FaqPage
的prototype
。 因此,我不会重申这个解释。
话虽如此,我确实同意将prototype
方法封装在一个范围内是好的。 也许你应该为此目的使用JavaScript库。 最小的那个是增强 。 实际上它只有17行:
Function.prototype.augment = function (body) {
var base = this.prototype;
var prototype = Object.create(base);
body.apply(prototype, Array.from(arguments, 1).concat(base));
if (!Object.ownPropertyOf(prototype, "constructor")) return prototype;
var constructor = prototype.constructor;
constructor.prototype = prototype;
return constructor;
};
(function funct() {
var bind = funct.bind;
var bindable = Function.bindable = bind.bind(bind);
var callable = Function.callable = bindable(funct.call);
Object.ownPropertyOf = callable(funct.hasOwnProperty);
Array.from = callable([].slice);
}());
如果您使用augment
以下是您的代码的外观:
var BasePage = Object.augment(function () {
this.constructor = function (name) {
this.name = name;
};
this.getName = function () {
return this.name;
};
});
var FaqPage = BasePage.augment(function (base) {
this.constructor = function (name, faq) {
base.constructor.call(this, name);
this.faq = faq;
};
this.getFaq = function () {
return this.faq;
};
});
然后你可以像往常一样使用它:
var faqPage = new FaqPage("Faq Page", "Faq");
var text = faqPage.getName() + " " + faqPage.getFaq();
$("body").text(text);
希望有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.