OO JavaScript調用父方法

Question

我一直試圖掌握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()而不必覆蓋並在子類中調用它？

如果我認為這種做法不好/好的話。

Answer 1

發生該錯誤是因為即使您將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;
}

Answer 2

第一行是正確的，您從基礎對象創建原型。

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;
};

Answer 3

如果繼承是你所追求的，據我所知，在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/

Answer 4

我感覺到你的痛苦。 正如其他人提到的那樣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);

希望有所幫助。