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

您需要在构造函数中放置特定于实例的属性（和变量），而不是您的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;
})();

当然，那三个＆＃34;部分＆＃34;是非特定于实例的，你可以制作那些＆＃34;静态＆＃34;类范围中的常量值。但是，实际上没有理由这样做，因为您并未在多个位置使用它们，如果您只是在您的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; })(); {1}}。

在：

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(); }的以下定义：

{{1}}

也许差别很明显。

试图在Javascript中获得“类”以发挥不错

2 个答案: