JavaScript嵌套对象父对象的引用

And*_*rew 2 javascript prototype object

我在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);
    }
  }
};
Run Code Online (Sandbox Code Playgroud)

两个问题:

1)子对象函数内部this不再引用根对象.如果我写出来的话,我似乎可以回头查看父母LocationSelector.object.method( args ),但是输入的内容很多.有没有办法将快捷方式定义回父对象?

2)在某些情况下,我需要在每个页面上有多个这样的实例,因此对我来说很重要的是我可以在selectors实例化新对象时设置各种实例,然后引用原型中的实例选择器.LocationSelector在子对象方法中引用父对象(即.)是否可行?JS如何知道保留当前活动对象的存储属性?

基本上,我正在尝试实现一个类,我对JS完全不熟悉并且不知道该怎么做.所以,任何帮助或建议都表示赞赏.谢谢!

Dom*_*nic 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");
};
Run Code Online (Sandbox Code Playgroud)

注意事项:

  1. 数据属性在实例上,而不是原型.只有方法才能进入原型.
  2. City显然是它自己的类,所以你应该把它变成一个.在您的代码中,所有实例之间共享一个城市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();
}
Run Code Online (Sandbox Code Playgroud)

我给你留下了一个链接到Crockford的"JavaScript中的私人成员",其中谈到了在JavaScript中做OO.还有其他可能更好的解释,但至少那一个会让你走上正轨.