javascript - 尝试在 Javascript 中获取 "classes"以发挥良好的作用

Question

所以我知道 Javascript 中的类有点不同，因为 Javascript 的一切都是对象。我正在尝试构建一个类，其中包含在 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

注意差异:

1. _part 变量是常量。
2. 构造函数 OutputHTMLChunk 设置实例变量。
3. 每个方法都使用 this.variable 来访问实例变量。
4. 由于 AssembleArea 不是对象上的方法，但它仍然需要我们通过使用 AssembleArea.call(this) 将其绑定(bind)到 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();
    }

也许差异会很明显。