Javascript对象返回原型

时间:2013-07-04 16:06:26

标签: javascript oop object inheritance prototype

我在使用Javascript编写对象构造函数时遇到问题。当我在我的一个实例化对象上调用一个函数时,它总是返回实例化对象的值。流程是这样的:

blue = tool('blue');
blue.jDom();     // returns '[<div id="blue" class="tool">...</div>]'
red = tool('red');
red.jDom();     // returns '[<div id="red" class="tool">...</div>]'
blue.jDom();     // returns '[<div id="red" class="tool">...</div>]'

我认为这是由于我在原型声明中包含的私有变量。如果我将原型声明移动到构造函数中,一切正常,但这只是通过为每个对象创建一个新原型来掩盖事实,即我的对象似乎影响原型的属性而不是自身。这是我的相关代码:

function beget(oPrototype) {
    function oFunc() {};
    oFunc.prototype = oPrototype;
    return new oFunc()
};    

var tool = (function (){
        var protoTool = function(){

            var oTool = {},
                that = this,
                _bVisible = true,
                _oParentPane = 'body',
                _aoComponents,
                _sName = 'tool',
                _sSelector = '#' + _sName,
                _jDomElement;



            // this is the private tab object, needs to be refactored
                            // descend from a single prototype  
            function _tab() {

                var oTab = {},
                    _sHtml = '<li><a href="' + _sSelector + '">' + _sName + '</a></li>',
                    _jDomElement = $(_sHtml);

                function jDom() {
                    return _jDomElement;
                }

                oTab.jDom = jDom;

                return beget(oTab);
            };

            // this builds the jDom element 
            function _jBuild() {
                var sHtml = '<div id="' + _sName + '" class="tool"></div>';
                _jDomElement = $(sHtml)
                return _jDomElement;
            };

            // this returns the jQuery dom object
            function jDom() {
                if (typeof _jDomElement === 'undefined') {
                    _jBuild();
                }
                return _jDomElement;
            };

            function configure (oO){
                if (typeof oO !== 'undefined') {
                    if (typeof oO === 'string') {
                        var name = oO;
                        oO = Object();
                        oO.sName = name;
                    } 


                    _bVisible = oO.bVisible || _bVisible,
                    _oParentPane = oO.oParentPane || _oParentPane,
                    _aoComponents = oO.aoComponents || _aoComponents,
                    _sName = oO.sName || _sName,
                    _sSelector = '#' + _sName,
                    _jDomElement = undefined;
                    _oTab = _tab();

                    _oTab.jDom()
                        .appendTo(jDom())
                        .draggable({
                        revert: 'invalid',
                        containment: '#main',
                        distance: 10,
                    });
                } 

            };

            oTool.tMove = tMove;
            oTool.bVisible = bVisible;
            oTool.uOption = uOption;
            oTool.jDom = jDom;
            oTool.configure = configure;    

            return oTool;   
        }();

        var tool = function (oO) {
            that = beget(protoTool);
            that.configure(oO);
            that.configure = undefined;
            return that;
        };

        return tool;
    })();

1 个答案:

答案 0 :(得分:0)

首先:在内部工具var定义中,通过'that = beget(protoTool);'你必须指'var that = beget(protoTool);'

您的代码中发生了什么? :
评估工具定义以便为工具提供值。在此评估期间,围绕protool进行闭合 但是在这次评估期间,这个闭包只进行了一次:所有后来调用protool(通过调用'that',其中protools作为原型),将改变第一个和唯一闭包的值。
这就是为什么你会看到这种行为:因为它更新了闭包的值,所以最近看过的对象会引起所有注意 解决方案是在“工具”内部var函数定义中进行正确的闭包。

但是如果可以的话,我会建议完全使用经典的javascript类定义,然后使用new运算符,我相信,这更容易编码/理解/调试。

另一个rq:beget === Object.create在最新的javascript规范(1.8.6)