2

私はJSでかなり複雑なオブジェクトに取り組んでおり、問題が発生しています:

私は次の（要約）コードを持っています：

var LocationSelector;

LocationSelector = function(container) {
  this.selectors = {
    container: container,
    city_name: container.find('input.city_name'),
    city_id: container.find('input.city_id')
  };
  return this.initialize();
};

LocationSelector.prototype = {
  initialize: function() {
    return this.city.checkStatus();
  },
  city: {
    status: null,
    message: null,
    id: null,
    checkStatus: function() {
      if (LocationSelector.selectors.city_name.val() && LocationSelector.selectors.city_id.val()) {
        return LocationSelector.city.setStatus('success');
      }
    },
    setStatus: function(status) {
      return alert(status);
    }
  }
};

2 つの質問:

1) サブオブジェクト関数の内部ではthis、ルート オブジェクトを参照しなくなりました。と書けば親を参照できるらしいのですLocationSelector.object.method( args )が、入力するのが大変です。親オブジェクトに戻るショートカットを定義する方法はありますか?

2) 状況によっては、ページごとにこのインスタンスを複数持つ必要があるためselectors、新しいオブジェクトがインスタンス化されたときにさまざまなインスタンスを設定し、プロトタイプのインスタンス セレクターを参照できることが重要です。LocationSelectorサブオブジェクトメソッドで親オブジェクト（つまり）を参照していますか？JS は、現在アクティブなオブジェクトの保存されたプロパティを保持することをどのように認識していますか?

基本的に、私はクラスを実装しようとしていますが、JS はまったく初めてで、その方法がよくわかりません。したがって、どんな助けや提案も大歓迎です。ありがとう！

4

3 に答える 3

6

あなたの現在のアプローチには多くの問題があります。LocationSelectorインスタンスがcityメンバーを持つ理由はわかりませんが、これはあなたが望むものに近いものです。

function LocationSelector(container) {
  this.selectors = {
    container: container,
    city_name: container.find("input.city_name"),
    city_id: container.find("input.city_id")
  };

  this.city = new City(this);
  this.city.checkStatus();
}

function City(locationSelector) {
  this.status = null;
  this.message = null;
  this.id = null;
  this.locationSelector = locationSelector;
}

City.prototype.checkStatus = function () {
  if (this.locationSelector.selectors.city_name.val() && this.locationSelector.selectors.city_id.val()) {
    this.setStatus("success");
  }
};

City.prototype.setStatus = function () {
  alert("status");
};

注意事項:

  1. データ プロパティは、プロトタイプではなくインスタンスに適用されます。プロトタイプにはメソッドのみが続きます。
  2. Cityは明らかに独自のクラスなので、1 つにする必要があります。あなたのコードでは、単一の都市が のすべてのインスタンス間で共有されていますLocationSelector。これは、プロトタイプに配置されているためです。このコードでは、LocationSelectorコンストラクターでインスタンス プロパティとして割り当てられます。
  3. あなたの例のように参照することはできませんLocationSelector.selectors。持っていないLocationSelector.selectors「静的」プロパティ用です。代わりに、特定のインスタンスのプロパティLocationSelectorを参照する必要があります。selectorsこの例では、そのインスタンスは で与えられthis.locationSelectorます。
  4. ポイント 2 と 3 は、重要な事実を示しています。「子」インスタンスは、「親」クラスの具体的なインスタンスがなければCity、そのプロパティを参照できません。LocationSelector

これは、私にとってより意味のあるコードのバージョンでありLocationSelector、プロパティを持つ部分city（使用されていない部分）を削除しています。

function LocationSelectors(container) {
  this.city_name = container.find("input.city_name");
  this.city_id = container.find("input.city_id");
}

function City(locationSelectors) {
  this.locationSelector = locationSelector;
}

City.prototype.checkStatus = function () {
  if (this.locationSelectors.city_name.val() && this.locationSelectors.city_id.val()) {
    this.setStatus("success");
  }
};

City.prototype.setStatus = function () {
  alert("status");
};

function checkCityStatus(container) {
  var locationSelectors = new LocationSelectors(container);
  var city = new City(locationSelectors);

  city.checkStatus();
}

Crockford の "Private Members in JavaScript"へのリンクを残しておきます。この記事では、JavaScript でオブジェクト指向を行うことについて説明しています。他にもおそらくより良い説明がありますが、少なくともその説明はあなたを正しい軌道に乗せます.

于 2012-04-23T04:55:21.080 に答える
2

Closuresについて読めば、必要なものがきっと見つかるはずです。

達成しようとしていることの簡単な例を次に示します。

function MyCoolObject(name){
   var self_myCoolObject = this;
   this.name = name;
   this.popAlertWithNameInFiveSeconds = function(){
       setTimeout(function(){
         alert('Incorrect reference to name "this.name" returns ' + this.name);
         alert('Correct reference to name "self_myCoolObject.name" returns ' + self_myCoolObject.name);
       },5000)
   }
}

//TO TEST
var MyObj = new MyCoolObject('MySuperCoolName')
MyObj.popAlertWithNameInFiveSeconds();
于 2012-04-23T04:40:14.367 に答える
0

これが私が持っているJSコードのスニペットです。クリック ハンドラーにドロップダウンする前に、 をSlideShow呼び出してオブジェクト ( )への参照を作成しますvar parent = this。その後、後のネストされた関数では、次を使用して正しいスコープを呼び出していることを確認できますparent.function()

/* Slide Show object */
function SlideShow(parentContainerId) {

    this.BEGINNING  = 'Beginning';
    this.END        = 'End of list';
    this.FIRSTINDEX = 0;

    this.length     = jQuery(parentContainerId + ' img').length;
    this.container  = jQuery(parentContainerId);
    this.imgs       = jQuery(parentContainerId + ' img');
    this.index      = this.FIRSTINDEX;
    this.status     = 'beginning';           // beginning, end



    this.init = function() {
        // get it started
        this.moveTo(this.FIRSTINDEX);
        this.process();

        // ****GET OBJECT SCOPE*****
        var parent      = this;

        // set up click listener
        this.container.find('img').click(function(e) {
            var item_width = jQuery(this).width();
            var x_click_ps = e.clientX - jQuery(this).offset().left;
            var x_diff     = x_click_ps / item_width;




            console.log(this);
            if (x_diff < .5) {
                parent.moveByIncrement(-1)
                parent.process();
            } else {
                parent.moveByIncrement(1);
                parent.process();
            }

        });
    }


.
.
.
}
于 2014-08-06T21:17:27.923 に答える