Javascript 如何通过另一个对象访问对象，该对象包含我要访问的对象的属性？

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

好吧，也许，要写出这个标题的困难反映了这种情况的一些不必要的复杂性——如果有一种简单的方法可以做到这一点的话，我很想知道

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

在carContainerClick（）函数中，如何访问其模板包含在当前单击的carContainer元素中的Car实例

$（函数（）{
var cars=[]；
对于（变量i=0；i<2；i++）{
var carContainer=$（''，{class:'carContainer'}）；
var car=新车（）；
汽车,；
carContainer.on（'click'，carContainer单击）；
附加（car.getTemplate（））；
$（'.container'）.append（carContainer）；
}
函数carContainerClick（）{
//这里-如何访问其模板包含在当前单击的carContainer元素中的Car实例？
汽车[0]。更改颜色（）；
}
});
多功能车（）{
this.template=$（''）；
}
Car.prototype={
getTemplate:function（）{
返回此.template；
},
changeColor:function（）{
console.log（'changeColor'）；
$（'.svg group'，this.template）.find（“path，polygon，circle”）.attr（“fill”，“#aff”）；
}
};

更新

我对这里提供的解决方案做了一些改进，结果发现它在性能上几乎没有什么差别。。但我喜欢生活的简单

用于将car实例作为参数传递给

carContainerClick

函数

我提取了一个新函数，因为在for循环中这样做可能不起作用（总是将最后一辆车作为参数传递）

for（变量i=0；i<2；i++）{
var carContainer=$（''，{class:'carContainer'}）；
var car=新车（）；
汽车,；
bindCarContainer（汽车集装箱、汽车）；
附加（car.getTemplate（））；
$（'.container'）.append（carContainer）；
}
功能bindCarContainer（carContainer，汽车）{
carContainer.on（'click'，函数（事件）{
carContainerClick.call（此、汽车、事件）；
});
}
功能carContainerClick（汽车、事件）{
//...
}

用于将car实例作为参数传递给

carContainerClick

函数

我提取了一个新函数，因为在for循环中这样做可能不起作用（总是将最后一辆车作为参数传递）

for（变量i=0；i<2；i++）{
var carContainer=$（''，{class:'carContainer'}）；
var car=新车（）；
汽车,；
bindCarContainer（汽车集装箱、汽车）；
附加（car.getTemplate（））；
$（'.container'）.append（carContainer）；
}
功能bindCarContainer（carContainer，汽车）{
carContainer.on（'click'，函数（事件）{
carContainerClick.call（此、汽车、事件）；
});
}
功能carContainerClick（汽车、事件）{
//...
}

使用jQuery的

.data（）

将对汽车的引用附加到模板：

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>');
    this.template.data('car', this);
}

使用jQuery的

.data（）

将对汽车的引用附加到模板：

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>');
    this.template.data('car', this);
}

---

尝试将其存储在属性中：

$container = $('.container');
for (var i = 0; i < 2; ++i) {
    var car = new Car(),
        carContainer = $('<div/>').addClass('car-container').prop('car', car);
    carContainer.on('click', carContainerClick);
    carContainer.append(car.getTemplate());
    $container.append(carContainer);
}

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

var $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>');

function Car () {
    this.$template = $template.clone();
}

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

$container=$（'.container'）；
对于（变量i=0；i<2；++i）{
var car=新车（），
carContainer=$（''）.addClass（'car-container'）.prop（'car'，car）；
carContainer.on（'click'，carContainer单击）；
附加（car.getTemplate（））；
$container.append（carContainer）；
}
函数carContainerClick（）{
这个.car.changeColor（）；
}
变量$template=$（''）；
多功能车（）{
此.$template=$template.clone（）；
}
Car.prototype={
getTemplate:function（）{
返回此.$模板；
},
changeColor:function（）{
console.log（'changeColor'）；
$（'.svg group'，这是。$模板）.find（“路径，多边形，圆”）.attr（“填充”，“#aff”）；
}
};

一些注意事项：

• 不要使用

  $

  在循环中获取元素，这非常慢！将结果存储在循环之前的变量中

• {class:'car container'}

  在旧浏览器上可能会失败，因为

  class

  已被保留。尝试使用引号或添加类的方法
• 要记住什么是DOM元素，什么是jQuery包装器，可以在变量名的开头使用

  $

---

尝试将其存储在属性中：

$container = $('.container');
for (var i = 0; i < 2; ++i) {
    var car = new Car(),
        carContainer = $('<div/>').addClass('car-container').prop('car', car);
    carContainer.on('click', carContainerClick);
    carContainer.append(car.getTemplate());
    $container.append(carContainer);
}

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

var $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>');

function Car () {
    this.$template = $template.clone();
}

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

$container=$（'.container'）；
对于（变量i=0；i<2；++i）{
var car=新车（），
carContainer=$（''）.addClass（'car-container'）.prop（'car'，car）；
carContainer.on（'click'，carContainer单击）；
附加（car.getTemplate（））；
$container.append（carContainer）；
}
函数carContainerClick（）{
这个.car.changeColor（）；
}
变量$template=$（''）；
多功能车（）{
此.$template=$template.clone（）；
}
Car.prototype={
getTemplate:function（）{
返回此.$模板；
},
changeColor:function（）{
console.log（'changeColor'）；
$（'.svg group'，这是。$模板）.find（“路径，多边形，圆”）.attr（“填充”，“#aff”）；
}
};

一些注意事项：

• 不要使用

  $

  在循环中获取元素，这非常慢！将结果存储在循环之前的变量中

• {class:'car container'}

  在旧浏览器上可能会失败，因为

  class

  已被保留。尝试使用引号或添加类的方法
• 要记住什么是DOM元素，什么是jQuery包装器，可以在变量名的开头使用

  $

---

您可以使用内联函数作为事件处理程序，将

car

作为参数传递。。。然而，因为

$container = $('.container');
for (var i = 0; i < 2; ++i) {
    var car = new Car(),
        carContainer = $('<div/>').addClass('car-container').prop('car', car);
    carContainer.on('click', carContainerClick);
    carContainer.append(car.getTemplate());
    $container.append(carContainer);
}

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

var $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>');

function Car () {
    this.$template = $template.clone();
}

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

  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);
    })();
  }

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