Question

我正在尝试一些不同的Javascript继承方法。我有以下代码：

（'{来自'http://www.kevlindev.com/tutorials/javascript/inheritance/index.htm）

KV = {};

KV.extend = function(subClass, baseClass) {
       function inheritance() {}
       inheritance.prototype = baseClass.prototype;

       subClass.prototype = new inheritance();
       subClass.prototype.constructor = subClass;
       subClass.baseConstructor = baseClass;
       subClass.superClass = baseClass.prototype;
    }

function GridView() {
        var _ownerElement;
    }

    GridView.prototype.getOwnerElement = function() {

        return this._ownerElement;
    }

    GridView.prototype.setOwnerElement = function(ownerElement) {
        this._ownerElement = ownerElement; 
    }

    GridView.prototype.initialize = function() {
        this.setOwnerElement('test');
    }


function StreetGridView(dataURL, ownerElement) {
        StreetGridView.baseConstructor.call(this);

        StreetGridView.superClass.initialize();

        StreetGridView.superClass.setOwnerElement(ownerElement);


}

// subclass StreetGridView
KV.extend(StreetGridView, GridView);

现在，当我创建一个StreetGridView实例时，我可以调用getOwnerElement（）就没问题了。一切都按预期工作。

无论其

当我创建另一个实例时，对实例2所做的任何更改都会反映在实例1中。

我知道这是使用原型作为共享实例信息的主要问题。今天早上我一直在绞尽脑汁，但想知道是否有人能指出我正确的方向！

由于

Answer 1

the_drow：

我在上面留下了关于使用你的解决方案两次调用超级构造函数的评论 - 但是对于让你停留在inheritPrototype的实现上感觉有点不好。首先，归功于Nicholas Zakas，因为这是我在他的书“专业JavaScript for Web Developers，2nd Ed”（第181页）中的用语：

function inheritPrototype(sub,sup) {
  var proto = object(sup.prototype);// you'll need an object create method ;)
  proto.constructor = sub;
  sub.prototype = proto;
}

现在替换你的：

StreetGridView.prototype = new GridView();

用，

StreetGridView.prototype = inheritPrototype(StreetGridView,GridView);

并且您只调用了一次GridView构造函数！但是你会注意到对象方法。你需要这样的东西：

function object(o) {
  function F(){};
  F.prototype = o;
  return new F();
}

如果你读过道格拉斯·克罗克福德，你就已经看过这个了！

无耻的插件： 这个东西很难理解，这正是我在TDD JavaScript上做文章的原因，整个第二部分有一堆继承模式的单元测试。我专门研究了关于对象创建和继承的Zakas和Crockford书籍。你不必阅读我的论文（它目前是Open Office .odt格式），但你可以做的比仅下载我的代码并在2分钟内读取它更糟糕！这是链接： My Free Book

Answer 2

灵感来袭！

我无法让这种模式发挥作用，所以如果你能发现它有什么问题，请告诉我。但是使用组合继承来移动东西，我似乎已经解决了这个问题。

我已经包含了以下代码，并将此帖留在论坛上，以便将来帮助其他人。

function GridView() {
        var _ownerElement;
    }

    GridView.prototype.getOwnerElement = function() {

        return this._ownerElement;
    }

    GridView.prototype.setOwnerElement = function(ownerElement) {
        this._ownerElement = ownerElement; 
    }

    GridView.prototype.initialize = function() {
        this.setOwnerElement('test');
    }

    function StreetGridView() {

        GridView.call(this);
    }

    StreetGridView.prototype = new GridView();

    StreetGridView.prototype.initialize = function(dataURL, ownerElement) {

        this.setOwnerElement(ownerElement);


        /* Constructor Code */

        $(this.getOwnerElement()).flexigrid
            (
                {
                    url: dataURL,
                    dataType: 'json',
                    colModel: [
                    { display: '', name: 'view', width: 20, sortable: true, align: 'center' },
                    { display: 'USRN', name: 'USRN', width: 80, sortable: true, align: 'center' },
                    { display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
                    { display: 'Locality', name: 'Locality', width: 200, sortable: true, align: 'left' },
                    { display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
                    { display: 'Open', name: 'Actions', width: 30, sortable: false, align: 'center' }
                    ],
                    sortname: "USRN",
                    sortorder: "asc",
                    usepager: true,
                    title: 'Streets',
                    useRp: true,
                    rp: 5,
                    showToggleBtn: false,
                    width: 'auto',
                    height: 'auto'
                }
            );
    }

Javascript继承

2 个答案: