Javascript OOP / 类 - 多个实例共享相同的数据答案

【问题标题】：Javascript OOP / Classes - multiple instances share same dataJavascript OOP / 类 - 多个实例共享相同的数据
【发布时间】：2011-10-23 14:17:12
【问题描述】：

我正在编写一些 oop javascript 代码。我有几个类的实例，并在每个实例中放入了不同的数据。不幸的是，正如您将在下面的示例中看到的那样，它们似乎共享相同的数据。

是否有可能获得我的班级的两个单独的实例？怎么做。

索引.html

 <html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
debugger;

// Do this because a page resart seems to keep old data
function SetGlobals()
{
    var ui;
    var el;

    // Arr00
    ui = document.getElementById("Arr00");
    el = arr0.arrayGet(0);
    ui.innerHTML = el.m_String;

    // Arr01
    ui = document.getElementById("Arr01");
    el = arr0.arrayGet(1);
    ui.innerHTML = el.m_String;

    // Arr10
    ui = document.getElementById("Arr10");
    el = arr1.arrayGet(0);
    ui.innerHTML = el.m_String;

    // Arr11
    ui = document.getElementById("Arr11");
    el = arr1.arrayGet(1);
    ui.innerHTML = el.m_String;
}

function MyOnLoad()
{
    SetGlobals();
}
</script>
</head>
<body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#000000">

<div id="divScreen" style="display: block; width:100%; height="100%">
    <div id="divMenu" style='float: left; background:#00FF00; border-color: #000000; border-width: 1px;'>
        <table>
            <tr>
                <td>
                    Array 0/String 0: <label id="Arr00"></label>
                </td>
            </tr>
            <tr>
                <td>
                    Array 0/String 1: <label id="Arr01"></label>
                </td>
            </tr>
            <tr>
                <td>
                    Array 1/String 0: <label id="Arr10"></label>
                </td>
            </tr>
            <tr>
                <td>
                    Array 1/String 1: <label id="Arr11"></label>
                </td>
            </tr>
        </table>
    </div>
    <div id="divMain" style='height: 100%; background:#0000FF; margin-left: 250px; border-color: #000000; border-width: 1px;'>
    </div>
</div>
</body>
</html>

Test.js

var BaseARR = function()
{
    _arr = []; // new Array();

    // Public functions that can access private members
    this.Add = function(arg)
    {
        var i, addAt;

        if(arg==null || (addAt = FindEnterPos(arg))<0)
            return false;

        // since adding and not deleting anything, nothing of value will be returned
        _arr.splice(addAt, 0, arg);

        return true;
    };
    // This finds the entry position for in
    FindEnterPos = function(arg)
    {
        return (_arr.length + 1);
    };
    this.arrayGet = function(i)
    {
        return ((_arr != null && i >= 0 && i < _arr.length) ? _arr[i] : null);
    };
};

var stringId = function(id, str)
{
    // public has a this. , privates have just var
    this.m_Id = id; // int
    this.m_String = str; // string
};

// This so allow statics
var stringIdARR = function()
{
    BaseARR.call(this);
};

【问题讨论】：

你永远不会在任何地方打电话给new BaseARR()。如果要使用该构造函数获取新对象，则需要使用 new 关键字。
哇，你是用 JavaScript 编写 Java 的完美例子。
您在_arr 上缺少var，这使其成为全球性的。

标签： javascript oop class

【解决方案1】：

如需一个出色的 JavaScript 继承示例，请查看 John Resig 的 Simple Inheritance 实现。一段时间以来，我一直在使用它的修改版本。这个article 更详细地描述了它。

另一个提供类似功能的库是base2，但对于您的需求可能有点过头了。

最后，我过去也使用过的另一种流行方法是Module Pattern。请参阅此article 以获取对该模式的深入解释。

【讨论】：

谢谢。我会阅读这些链接。我学的越多，我就会明白的越多。

【解决方案2】：

您的代码中存在各种问题。让我试着解释一下。

首先，强烈建议不要在 JavaScript 中将左大括号放在一行中。为什么你可能会问？那么运行这两个代码sn-ps：

// using "braces on same line" style
(function () {
  return {
    key: 'value'
  };
})();

// using "braces on line by themself"-style
(function ()
{
  return 
  {
    key: 'value'
  }
})();

两个 sn-ps 将返回不同的结果，尽管唯一的区别是大括号的定位。原因是分号插入。在 JavaScript 中，分号是可选的。因此，如果解析器找到换行符并且换行符前面的构造有意义，它将插入一个分号。在第二个示例中，这是在 return 语句之后发生的情况。如果你把大括号和前面的语句放在同一行，你可以规避这样的错误。

接下来你错了，JavaScript 有类。 JavaScript 是一种面向对象的语言，但与大多数其他面向对象的语言不同，它没有类。在 JavaScript 中，对象直接继承自其他对象（它们所谓的原型）。您当前所指的类实际上是一个构造函数，当使用new 关键字调用该函数时，将创建一个新对象，该对象将从存储在构造函数原型字段中的任何对象继承。

var anObject = {
  key: 'value'
};
function MakeAnObject() {
}

MakeAnObject.prototype = anObject;

var o = new MakeAnObject();

console.log(o.key); // will output 'value'

如果您设置一个属性，该属性将始终设置在对象本身上，在设置属性时它永远不会访问原型链。

如果您从一个对象读取一个不具有该属性的属性，JavaScript 将在对象原型链（即所有相互继承的对象）中搜索该属性并返回如果找到了。

如果一个对象本身有一个属性，它的原型链将不会被搜索，所以你可以通过设置对象自身的属性来“覆盖”一个对象继承的属性。

看下面的例子：

function MakeThing() {
}

MakeThing.prototype = {
  key: 'value'
};

var o1 = new MakeThing(), o2 = new MakeThing();

console.log(o1); // will output 'value'
console.log(o2); // will output 'value'

o2.key = 'other';

console.log(o1); // will output 'value'
console.log(o2); // will output 'other'

MakeThing.prototype.key = 'changed';

console.log(o1); // will output 'changed'
console.log(o2); // will output 'other'

delete o2.key;

console.log(o1); // will output 'changed'
console.log(o2); // will output 'changed'

考虑到所有这些，我将不得不告诉您：在 JavaScript 中，对象上没有公共和私有成员之类的东西。成员将始终公开。有一些模式试图使用闭包隐藏对象中的某些信息，但它们的功能与传统编程语言中的私有成员非常不同。更糟糕的是：这些模式很笨拙，会产生糟糕且性能非常差的代码。如果您没有绝对要求，我建议不要使用它们。

那么，这一切意味着什么？首先，如果您想在多个对象之间共享属性和方法，它们必须从同一个原型继承，并且该原型必须包含这些属性和方法。其次，如果你在this 上设置了一些东西，它将被设置在当前实例上，而不是原型上。第三，只有按照惯例才有私人和公共成员。如果您绝对需要对某个子系统严格隐藏某些信息，则有一些模式（Crockford sealer unsealer 应该会产生可用的结果）。

这里所说的都是快速尝试修复你的对象：

function BaseAAR {
    this._arr = []; // note >this<. You created a global array in your code.
};

BaseAAR.prototype.add = function(arg) {
    var i, addAt;

    // always use identity (triple) operators when comparing to null!
    if (arg === null || (addAt = this.findEnterPos(arg))<0)
        return false;

// since adding and not deleting anything, nothing of value will be returned
    this._arr.splice(addAt, 0, arg);
    return true;
};
    // This finds the entry position for in
BaseAAR.prototype.findEnterPos = function() {
return (this._arr.length + 1);
};
BaseAAR.prototype.arrayGet = function(i) {
    return ((this._arr !== null && i >= 0 && i < this._arr.length) ? this._arr[i] : null);
};


function StringIdAAR(id, str) {
    BaseAAR.call(this); // invoke the constructor of the base object
    this.m_Id = id; // int
    this.m_String = str; // string
}

StringIdAAR.prototype = BaseAAR.prototype; // innherit from StringIdAAR prototype

我不完全确定这段代码是否真的仍然按照你的意愿去做，但你应该明白 JavaScript 中的面向对象模式应该是什么样子的。如果您想了解更多关于如何编写好的 JavaScript 的信息，您绝对应该阅读 Douglas Crockford 的《JavaScript: The Good Parts》一书。

更新：我还写了一个article on JavaScript object orientation and prototype based inheritance。任何路过这里的人都可能对此感兴趣。

【讨论】：

感谢这是 JS 的大师班。我是一名自学成才的程序员，我以为我已经开始了解 JS。这个回复让我更清楚到底发生了什么。