Javascript OOP / Classes - multiple instances shar

2019-02-09 20:47发布

站内问答 / JavaScript
1285 2 5

I am writing some oop javascript code. I have a couple of instances of a class and have put different data into each. Unfortunately, as you will see with the example below, they appear to share the same data.

Is it possible to get two separate instances of my class? How would it be done.

Index.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);
};

2条回答
Animai°情兽
2楼-- · 2019-02-09 21:12

For a great JavaScript inheritance example take a look at John Resig's Simple Inheritance implementation. I've been using a modified version of it for some time now. This article describes it in more detail.

Another library that offers similar functionality is base2, but may be overkill for your needs.

Lastly, another popular approach I've also used in the past is the Module Pattern. See this article as well for an in depth explanation of the pattern.

查看更多
0人赞 添加讨论(0) 举报
Animai°情兽
3楼-- · 2019-02-09 21:23

There are various problems in your code. Let me try to explain them.

First it is highly recommended to not put opening block braces on a single line in JavaScript. Why you may ask? Well run those two code snippets:

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

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

Both snippets will return different results, allthough the only difference is positioning of braces. The reason for this is semicolon insertion. In JavaScript semicolons are optional. So if the parser finds a newline character and the construct infront of the newline makes sense, it will insert a semicolon. In the second example this is what happens after the return statement. If you place your braces on the same line as the previous statement, you can circumvent such bugs.

The next thing you got wrong is that JavaScript has classes. JavaScript is an object oriented language, but unlike most other object oriented languages it does not have classes. In JavaScript objects inherit directly from other objects (their so called prototypes). What you currently arre referring to as a class is in reality a constructor function, which when invoked using the new keyword will create a new object, that will inherit from whatever object is stored in the constructors prototype field.

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

MakeAnObject.prototype = anObject;

var o = new MakeAnObject();

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

If you set a property, the proerty will alwas be set on the object itself, it will never access the prototype chain, when setting a property.

If you read a property from an object, that does not have that property, JavaScript will search the objects prototype chain (that is all the objects that inherit from each other) for that property and returns it if found.

If an oject has a property itself, it's prototype chain will not be searched, so you can "override" an objects inherited properties by setting the porperty on the objects self.

Look at the following example:

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'

With all that in mind I will have to tell you: there is no such thing as public and private members on an object in JavaScript. Members will always be public. There are some patterns which try to hide away certain information in an object using closures, but they function very different than private members in a traditional programming language. And worse: those patterns are clunky, produce terrible and very bad performing code. I suggest do not use them if you do not absoltuely require to.

So, what does all this mean? Well firstly, if you want to share attributes and methods between multiple objects, they will have to inherit from the same prototype and that prototype must contain those attributes and methods. Secondly if you set something on this it will be set on the current instance, not on the prototype. Thirdly have priavte and public members only by convention. If you absolutely require certain information to be strictly hidden from a certain subsystem, there are patterns for this (Crockford sealer unsealer should yield useable results).

All that said here a quick try at fixing your objects:

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

I am not completely sure if this code actually still does what you want it to do, but you should get the point how object oriented patterns in JavaScript should look like. If you want to read more on how to write good JavaScript you should absolutely get the book "JavaScript: The Good Parts" by Douglas Crockford.

UPDATE: I also wrote an article on JavaScript object orientation and prototype based inheritance. This might be of interest for anybody passing by here.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)