在JavaScript中创建类onclick的新实例的正确方法是什么? [英] What is the proper way of creating a new instance of a class onclick in JavaScript?

问题描述

类示例:

$(document).ready(function(){

    var $ = function(id)
    {
        return document.getElementById(id);
    }

    class someClass
    {
        constructor()
        {
            ...
        }
        someMethod()
        {
            ...
        }
    }
... // rest of examples within this scope
});

到目前为止，我能够在窗口加载时创建类对象的实例，然后在按钮单击事件上调用该类的方法，同时绑定 this :

So far I am able to create an instance of the class object when the window loads and then calling a method of that class on a button click event while also binding this:

var obj = new someClass()
$('startButton').onclick = obj.someMethod.bind(obj)

一切正常，直到我要通过删除并创建该类对象的新实例进行重置为止.我尝试了几种不同的方法:

All works fine and well until I want reset by deleting and creating a new instance of that class object. I have attempted a couple of different methods:

首先，我尝试在按钮单击时调用一个函数，该函数比以前执行更多的任务(实例化一个新对象).我尝试了以下两种方法:在全局范围内声明变量 obj ，为类型指定 var 并将其分配给 null ，然后尝试重新-分配它，并在单击按钮时绑定 this .在我尝试调用我的 setup()方法之前，这一直有效:

First, I attempted to call a function on button click that does one more task than before (instantiates a new object). I tried this both with declaring the variable obj in the global scope specifying var for the type and assigning it to null, and then attempted to re-assign it and bind this on button click. This works up until I attempt to call my setup() method:

$('startButton').onclick = function() {
    var obj = new someClass();
    var obj.setup.bind(obj); // fails to call
}

然后我尝试了另一条路线，该路线或多或少地将我降落在同一地点:

I then attempted another route, which more or less landed me in the same spot:

$('startButton').addEventListener('click', function(event) {
    var obj = new someClass();
    console.log('obj is an instance of someClass?', obj instanceof someClass); // returns true
    obj.setup.bind(obj); // fails to call
});

如果没有在 someClass 中创建新的方法来手动将我所有的类属性重置为初始值(我宁愿重新调用构造函数)，那么如何优雅地实例化一个新类单击对象，单击 并能够绑定 this ?

Without creating a new method within someClass that manually resets all of my class attributes back to the initial values (I'd rather re-call the constructor), how can I gracefully instantiate a new class object on button click and be able to bind this?

当我这样做时，可以重新分配保存该类对象的变量，而无需首先将其标记为GC或以某种方式对其进行分配吗?没有其他引用.如果我的用语不对，请提前道歉，这是我的新手.

And when I do, is it okay to re-assign the variable holding the class object without first marking it for GC or deallocating it somehow? Nothing else references it. Apologies in advance if my terminology is off, I'm new to this.

推荐答案

obj.setup.bind(obj)将上下文绑定到函数，但未调用它.您要么需要调用它:

obj.setup.bind(obj) binds a context to a function, but it does not call it. You either need to call it:

obj.setup.bind(obj)();

或使用 .call()代替 .bind():

obj.setup.call(obj);

但是，在这种情况下，由于直接在实例上调用该方法，因此实际上不需要绑定任何东西:

However in this case, since you call the method directly on the instance, there is not really a need to bind anything:

$(document).ready(function() {
  var $ = document.getElementById.bind(document); // <-- bind without calling
  
  class someClass {
    constructor() {
      this.ready = false;
    }
    setup() {
      this.ready = true;
    }
  }

  $('startButton').addEventListener('click', function(event) {
      var obj = new someClass();
      obj.setup();
      console.log(obj.ready); // true
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="startButton">Start</button>

这篇关于在JavaScript中创建类onclick的新实例的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！