javascript - getter/setting 更改时运行代码

Question

我可以使用 getter/setter 来完成与观察者类似的任务吗？

例如，如果我将 getter/setter 的实例分配给多个对象，这些都将是引用，因此如果任一对象导致 getter 更改，相同的代码将运行对吗？

我尝试过以下代码:

var obj = {
  value: null,
  get val() {
    return this.value;
  },
  set val(x) {
    console.log('set');
    if (this.value !== x) {
      console.log('value has been changed, do stuff!');
    }
    this.value = x;
  }
}
var one = {
  name: 'object 1',
  value: obj /* Reference object */
}
var two = {
  name: 'object 2',
  value: obj /* Reference object */
}
var three = {
  name: 'object 3',
  value: obj /* Reference object */
}

然后运行 ​​one.value.value = 2 这应该会触发控制台日志。但是我只在控制台中得到 2 输出，没有 console.log。

编辑

刚刚看到我哪里出错了，我应该做 one.value.val = 2，这开始起作用了，坚持一下。

编辑2

不太确定这是否会按照我期望的方式发挥作用。我将尝试分解我正在尝试做的事情。

我有一个对象数组，如下所示:

var images = [ 
  { index: 0, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 1, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 2, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 3, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 4, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 5, object: HTMLElement, src: String, active: Object, alt: String },
  { index: 6, object: HTMLElement, src: String, active: Object, alt: String } 
];

该对象将在我的脚本中重复几次，但事件状态需要在所有实例中保持相同。

我如何复制对象:

var newList = [];
for (var i = 0; i < _.images.length; i++) {
   // Create new instances of the images
   var img = document.createElement('img');
   img.src = images[i].object.src;
   img.classList.add('responsive-img');
   img.alt = images[i].alt;

   var span = document.createElement('span');
   span.appendChild(img);

   if (i === current) img.parentNode.classList.add('active');

   var newImage = {
      object: img,
      index: i,
      src: images[i].src,
      active: images[i].active, // Use reference to old list
      alt: images[i].alt
   };
   newList.push(newImage);

   // Add each image to the gallery DOM
   _.gallery.main.appendChild(span);
}

基本上现在我需要发生的是，如果任一引用中的 active 值发生更改，则代码应该执行并从 object 中添加/删除类在该实例内。

这有道理吗？

因此，如果运行以下命令

images[0].active.val = 1

然后newList[0].object.classList.Add('active');和images[0].object.classList.Add('active'); 执行。

还有更多代码需要执行，但是让我们一次一步地执行。我之前曾使用 Polyfill for Observer，但是它对于我想要做的事情来说太重了，并且在 Internet Explorer 上也遇到了问题。

我认为最好的方法可能是来自 setter 的某种回调，这样我就可以为该对象所在的每个实例运行唯一的代码？

Answer 1

感觉有点 hackish，但添加一个 getter 到 active 来设置您所引用的对象应该可行:

var active = {
	_value : null,
  object : null,
  set value(v) {
  	_value = v;
    this.object.style.display = v;
  }
}

var images = [
  {img : document.querySelector('.div1'), _active : active, get active () {this._active.object = this.img; return this._active}
  },
  {img : document.querySelector('.div2'), _active : active, get active () {this._active.object = this.img; return this._active}
  }
]

images[0].active.value = 'none';
images[1].active.value = 'block';

<div class = 'div1'>div 1</div>
<div class = 'div2' style = 'display:none'>div 2</div>