试图让 "classes" 在 Javascript 中发挥出色

Question

所以我知道 Javascript 中的 class 有点不同，因为 Javascript 的所有内容都是对象。我正在尝试构建一个 class，其中包含在 HTML.

中创建简单 div 的信息

请看下面代码：

Javascript:

$(document).ready(function(){
    var test1 = new OutputHTMLChunk();
    test1.setClass('test');
    test1.setHTMLContent('Test');
    $('#main_container').append(test1.getOutputArea());

    var test2 = new OutputHTMLChunk();
    test2.setClass('wooo');
    test2.setHTMLContent('This is test2');
    $('#main_container').append(test2.getOutputArea());
    $('#main_container').append(test1.getOutputArea());
});

var OutputHTMLChunk = (function(){

    var _part1 = '<div class="';
    var _outputClass = 'output_area';
    var _part2 = '">';
    var _part3 = '</div>';
    var _HTMLContent = '';

    function OutputHTMLChunk(){

    }

    OutputHTMLChunk.prototype.setClass = function(classValue){
        _outputClass = classValue;
    }

    OutputHTMLChunk.prototype.getClass = function(){
        return _outputClass;
    }

    OutputHTMLChunk.prototype.setHTMLContent = function(HTMLContent){
        _HTMLContent = HTMLContent;
    }

    OutputHTMLChunk.prototype.getHTMLContent = function(){
        return _HTMLContent;
    }

    var AssembleArea = function(){
        var output = _part1 + _outputClass + _part2 + _HTMLContent + _part3;
        return output;
    }

    OutputHTMLChunk.prototype.getOutputArea = function(){
        return AssembleArea();
    }

    return OutputHTMLChunk;
})();

输出：

<div class="test">Test</div>
<div class="wooo">This is test2</div>
<div class="wooo">This is test2</div>

所以我读到 here 这就是 test1 的第二次调用使用来自 test2 的变量的原因，因为这些变量对于新创建的变量不是唯一的对象。

现在，如果我照此操作并将 OutputHTMLChunk 更改为以下内容，我的输出仍然不正确：

Javascript:

var OutputHTMLChunk = (function(){

    this._part1 = '<div class="';
    this._outputClass = 'output_area';
    this._part2 = '">';
    this._part3 = '</div>';
    this._HTMLContent = '';

    function OutputHTMLChunk(){

    }

    OutputHTMLChunk.prototype.setClass = function(classValue){
        this._outputClass = classValue;
    }

    OutputHTMLChunk.prototype.getClass = function(){
        return this._outputClass;
    }

    OutputHTMLChunk.prototype.setHTMLContent = function(HTMLContent){
        this._HTMLContent = HTMLContent;
    }

    OutputHTMLChunk.prototype.getHTMLContent = function(){
        return this._HTMLContent;
    }

    var AssembleArea = function(){
        var output = this._part1 + this._outputClass + this._part2 + this._HTMLContent + this._part3;
        return output;
    }

    OutputHTMLChunk.prototype.getOutputArea = function(){
        return AssembleArea();
    }

    return OutputHTMLChunk;
})();

输出：

<div class="output_area"></div>
<div class="output_area"></div>
<div class="output_area"></div>

总而言之，我真正想要的是以下输出：

<div class="test">Test</div>
<div class="wooo">This is test2</div>
<div class="test">Test</div>

Answer 1

您需要在 构造函数 中放置特定于实例的属性（和变量），而不是您的 class IEFE 模块。

var OutputHTMLChunk = (function(){
    function OutputHTMLChunk(){
        this._part1 = '<div class="';
        this._outputClass = 'output_area';
        this._part2 = '">';
        this._part3 = '</div>';
        this._HTMLContent = '';
    }

    OutputHTMLChunk.prototype.…
    OutputHTMLChunk.prototype.getOutputArea = function(){
        return this._part1 + this._outputClass + this._part2 + this._HTMLContent + this._part3;
    };
    return OutputHTMLChunk;
})();

当然，这三个 "parts" 是非特定于实例的，您可以在 class 范围内使那些 "static" 常量值。但是，实际上没有理由这样做，因为您没有在多个位置使用它们，如果您只是将文字放在 getOutputArea 方法中，您的代码会更加清晰。

Answer 2

注意区别：

_part 个变量是常量。
构造函数OutputHTMLChunk设置实例变量。
每个方法都使用 this.variable 访问实例变量。
因为 AssembleArea 不是对象上的方法，但它仍然需要我们将它绑定到 this 的对象，通过使用 AssembleArea.call(this) 如果它是我们可以拥有的方法使用 this.AssembleArea().

在：

var OutputHTMLChunk = (function(){

    var _part1 = '<div class="';
    var _part2 = '">';
    var _part3 = '</div>';

    function OutputHTMLChunk(){
      this._outputClass = 'output_area';
      this._HTMLContent = '';
    }

    OutputHTMLChunk.prototype.setClass = function(classValue){
        this._outputClass = classValue;
    }

    OutputHTMLChunk.prototype.getClass = function(){
        return this._outputClass;
    }

    OutputHTMLChunk.prototype.setHTMLContent = function(HTMLContent){
        this._HTMLContent = HTMLContent;
    }

    OutputHTMLChunk.prototype.getHTMLContent = function(){
        return this._HTMLContent;
    }

    var AssembleArea = function(){
        var output = _part1 + this._outputClass + _part2 + this._HTMLContent + _part3;
        return output;
    }

    OutputHTMLChunk.prototype.getOutputArea = function(){
        return AssembleArea.call(this);
    }

    return OutputHTMLChunk;
})();

为了使 AssembleArea 成为一种方法，上面的方法对 AssembleArea 和 getOutputArea 使用以下定义：

    OutputHTMLChunk.prototype.AssembleArea = function(){
        var output = _part1 + this._outputClass + _part2 + this._HTMLContent + _part3;
        return output;
    }

    OutputHTMLChunk.prototype.getOutputArea = function(){
        return this.AssembleArea();
    }

也许差异会很明显。

试图让 "classes" 在 Javascript 中发挥出色

Trying to get "classes" in Javascript to play nice

javascript

oop

class

function