试图让 Javascript 中的“类”玩得很好答案

【问题标题】：Trying to get "classes" in Javascript to play nice试图让 Javascript 中的“类”玩得很好
【发布时间】：2015-02-26 12:42:01
【问题描述】：

所以我知道 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>

【问题讨论】：

你知道你在重新发明轮子/过度复杂化一切吗？在 Javascript/Jquery 中创建 HTML 元素、添加/删除 css 类是任意的。但是，如果您这样做是出于练习目的，这可能是一个好问题。
@kasperTaeymans，谢谢，是的，只是为了练习，我有使用 JS 类添加 HTML 元素的想法，并尝试使用它。哈哈:)

标签： javascript function class oop

【解决方案1】：

注意区别：

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

也许差异会很明显。

【讨论】：

谢谢！你能为我澄清第4点吗？我的意图是让 AssembleArea 成为一种方法，有没有更好的方法可以做到这一点？

【解决方案2】：

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

当然，这三个“部分”不是特定于实例的，您可以在类范围内创建这些“静态”常量值。但是，实际上没有理由这样做，因为您没有在多个位置使用它们，如果您只是在 getOutputArea 方法中放置文字，您的代码会更清晰。

【讨论】：