javascript - 使用构造函数和调用函数

Question

我有一个表单，其中根据所选的复选框隐藏/显示许多元素。我决定编写一个构造函数以避免重复。它需要两个参数。需要显示/隐藏的复选框和元素。

function ShowHideConstructor(controlElement, actionElement){
  this.x = controlElement;
  this.y = actionElement;

x.change(function(){
    var isChecked = x.is(":checked");

    if (isChecked){
        y.show();
    } else {
        y.hide();
    }

  });
}

我想通过以下方式触发它:

var ce = $('#c85_add_residence_address-0');
var ae = $(".address_of_residence");

ShowHideConstructor(ce,ae);

它有效!当我第二次调用它时，问题就开始了，例如:

var ca = $('#c85_add_correspondence_address-0');
var ac = $('.address_for_correspondence');

ShowHideConstructor(ca,ac);

当我有两个时，它就坏了。为什么 ？

Answer 1

那是因为你忘记了 new 所以 this 是外部 this (取决于你在哪里调用它，它可能是 窗口)。因此，第二次调用它时，您将替换第一次调用的 x 和 y 属性。

使用

new ShowHideConstructor(ca,ac);

并在构造函数中，将所有 x 和 y 替换为 this.x 和 this.y。

话虽这么说，当您甚至不保留新实例时，这种对构造函数的副作用并不是一个好的做法。我宁愿分两步完成:构建实例，然后执行绑定(bind)到 change 事件的函数。