javascript - 尝试在javascript中模拟类，但无法访问其中的变量

我正在生成许多“类”（实际上是试图像c＃或其他面向对象的语言一样模拟类的函数），并且正在寻找实现此目的的最佳方法。
您可能会注意到，我也提供了jQuery。

这是此时生成所有类的方式：

MyClass = (function() {
  function innerClass() {

    var self = this;
    var myField;

    // This function works as the constructor
    this.init = function(opts) {
      // Arguments to the constructor
      var defaultOpts = {
        myInitArgument: null
      }
      opts = $.extend(defaultOpts, opts);
      self = this;

      // Any custom constructor code is generated here...
    }

    // A function
    this.myFunction = function() {
      myField = "Hello World!";
    }

    // Returns an object with all selected fields and function that should work as "public". Those not mentioned here, will not be visible outside this class.
    return {
      init: this.init,
      myFunction: this.myFunction,
      myField: myField,
    }
  }
  return innerClass;
})();

然后，我创建此类的实例：

var myObject = new MyClass();
myObject.init({myInitArgument: 'test'});

我的主要问题是在myFunction内部，“ myField”将设置为“ Hello World！”。如果我中断了调试器（即Chrome开发者工具），但使用“ myObject.myField”则返回未定义。

如果您想玩这个示例，我做了一个fiddle。

解决此问题的最佳方法是什么，也许还有其他事情要警告我？

最佳答案

在制作类和对象时，JavaScript有点怪异。 IMO，这是最可靠且易读的方法：从成为原始对象（Fruit）的函数开始。

编辑：感谢@Bergi指出以前的版本具有残留变量，需要将其移至init（）。

function Fruit(opts) {
    this.init(opts);
}

现在，扩展功能，为其提供更多功能，例如init等：

Fruit.prototype.init = function(opts) {
    // init values go here
    this.cost = 0;
    this.count = 0;

    var that = this;  // in the iteration below, we want to refer to our parent
    for( k in opts )(function(k, v) {
        that[k] = v;
    })(k, opts[k]);
}

// now, here's a specialized set of functions that sets properties (price/quant)
// note that they do "return this" - this is so you can conveniently chain
// commands. ex: apple.setPrice(10).setQuantity(5);
Fruit.prototype.setPrice = function(how_much) {
    this.cost = how_much;
    return(this);
}

Fruit.prototype.setQuantity = function(how_many) {
    this.count = how_many;
    return(this);
}

用于返回计算值的简单函数。此时，实例化后，对象将变为“自我感知”。这样的辅助函数变得更具可读性。

Fruit.prototype.getEarnings = function() {
    return( this.cost * this.count );
}

到目前为止，我们仅设置了抽象结构。要使用此功能，请创建一个新对象：

var apple = new Fruit({ genus: 'Malus' });
var orange = new Fruit({ genus: 'Citrus' });

apple.setPrice(1.50).setQuantity(20);
orange.setPrice(1.25).setQuantity(40);

console.info( apple.genus + " will earn you $" + apple.getEarnings() );   // $30
console.info( orange.genus + " will earn you $" + orange.getEarnings() ); // $50