javascript - 如何通过另一个对象访问一个对象，该对象包含一个对象，该对象是我想访问的对象的属性？

Question

这个标题有点难想，希望它是可以理解和有意义的。

嗯，也许，想出这个标题的困难反射(reflect)了这种情况的一些不必要的复杂性——如果有一种简单的方法来做到这一点，我很想知道。

在此示例中，有一个 Car“类”，我可以从中实例化对象 (Cars)。它有一个模板(一个 SVG，实际上不是汽车，但谁在乎)，还有公共(public)方法，用于通过 jQuery 修改模板。

在 carContainerClick() 函数中，如何访问模板包含在当前点击的 carContainer 元素中的 Car 实例？

Sample here

$(function(){

  var cars = [];

  for (var i = 0; i < 2; i++) {

    var carContainer = $('<div/>', { class: 'car-container'});
    var car = new Car();

    cars[i] = car;

    carContainer.on('click', carContainerClick);

    carContainer.append(car.getTemplate());
    $('.container').append(carContainer);
  }

  function carContainerClick() {

    // HERE - how do I access the Car instance whose template is contained by the currently clicked carContainer element?

    cars[0].changeColor();
  }
});

function Car () {
  this.template = $('<svg viewBox="0 0 301 259">    <g class="svg-group"><path class="stick-2" fill-rule="evenodd" clip-rule="evenodd" d="M74.192,27.447c2.589-2.042,4.576-3.188,6.991-5.093c0,0,1.753-1.11,0.416-2.945 c-1.13-1.546-3.242,0.014-3.242,0.014c-4.831,3.804-9.678,7.589-14.491,11.418c-2.335,1.861-4.335,4.009-7.954,3.233 c-2.136-0.458-3.892,1.798-3.913,4.021c-0.02,2.326,1.531,4.107,3.734,4.296c2.353,0.2,4.689-1.183,4.635-3.241    c-0.066-2.415,1.215-3.474,2.981-4.492c1.821-1.049,5.809-3.993,7.21-4.785C71.961,29.082,74.192,27.447,74.192,27.447z"/></g></svg>');
}

Car.prototype = {
  getTemplate: function() {
    return this.template;
  },
  changeColor: function() {
    console.log('changeColor');
    $('.svg-group', this.template).find("path, polygon, circle").attr("fill", "#aff");
  }
};

更新

我做了一点test使用此处提供的解决方案，结果证明它在性能上几乎没有差异..但我喜欢 IIFE 的简单性。 Sample

Answer 1

您可以使用内联函数作为将 car 作为参数传递的事件处理程序...但是，因为 car 声明被提升到循环之外(特别是到当前函数的顶部)，您需要确保事件处理程序捕获正确的 Car 实例，而不是最后一个通过循环的实例。

您可以使用自调用函数表达式创建闭包，该函数表达式为 car 创建一个新范围，该范围在 循环中并允许正确 设置处理程序时要捕获的汽车实例。

  for (var i = 0; i < 2; i++) {
    (function(){
      var carContainer = $('<div/>', { class: 'car-container'});
      var car = new Car();
      cars[i] = car;
      carContainer.on('click', function(){
        carContainerClick(car);
      });
      carContainer.append(car.getTemplate());
      $('.container').append(carContainer);
    })();
  }

现在您可以拥有一个函数，该函数可以传递您需要的 Car 实例。

  function carContainerClick(car) {
    car.changeColor();
  }