试图在事件处理程序上实现闭包？错误：未定义

Question

单击注册按钮时，我试图从表单中获取值。

• setupFormUI()和相关的表单字段保存在变量中
• 调用$($rego_form).on("submit", getRegistrationFormValue); - 一个处理程序应该能够访问setupFormUI()变量（闭包）但它似乎什么都不做

问题：getRegistrationFormValue没有记录任何东西。如果我将参数传递给函数，我可以使它工作...但我想使用闭包

setupFormUI();


function setupFormUI() {
    var $name = $("#name");
    var $age = $("#age");
    var $department = $("#department");
    var $position = $("#position");
    var $rego_form = $("#rego-form");

    $($rego_form).on("submit", getRegistrationFormValue);

} 
function getRegistrationFormValue() {
    // alert("asdasd");
    var name = $name.val();
    var age = $age.val();
    var department = $department.val();
    var position = $position.val();

    console.log("----->", name, age, position, department);
}

HTML

<form id="rego-form">

    <div class="row">
        <div class="col-md-5">
            <div class="form-group">
                <label>Company (disabled)</label>
                <input type="text" class="form-control" disabled placeholder="Company" value="Creative Code Inc.">
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>name</label>
                <input type="text" id="name" class="form-control" placeholder="name" value="michael">
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="exampleInputEmail1">Age</label>
                <input id="age" class="form-control" placeholder="age">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label>Department Name</label>
                <input type="text" id="department" class="form-control" placeholder="department" value="Marketing">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Position</label>
                <input type="text" id="position" class="form-control" placeholder="position" value="social media manager">
            </div>
        </div>
    </div>

    <button type="submit" id="rego-user-btn" class="btn btn-info btn-fill pull-right">Register</button>
    <div class="clearfix"></div>
</form>

Answer 1

您需要将变量放在范围内，您可以使用匿名闭包作为回调来实现此目的。

setupFormUI();


function setupFormUI() {
    var $name = $("#name");
    var $age = $("#age");
    var $department = $("#department");
    var $position = $("#position");
    var $rego_form = $("#rego-form");

    $rego_form.on("submit", function(){
      var name = $name.val();
      var age = $age.val();
      var department = $department.val();
      var position = $position.val();

     console.log("----->", name, age, position, department); 
   });   

} 

Answer 2

接受答案的替代方案 - 使用this给“处理程序”一个有意义的Function.prototype.bind()上下文，或者只使用ES6 class。

setupFormUI();

function setupFormUI() {
  var args = {
    $name: $("#name"),
    $age: $("#age"),
    $department: $("#department"),
    $position: $("#position"),
    $rego_form: $("#rego-form")
  }

  args.$rego_form.submit(getRegistrationFormValue.bind(args));

}

function getRegistrationFormValue(e) {
  var name = this.$name.val();
  var age = this.$age.val();
  var department = this.$department.val();
  var position = this.$position.val();

  console.log("----->", name, age, position, department);

  e.preventDefault();
}

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

<form id="rego-form" action="#">
  <input id="name" value="John Doe" />
  <input id="age" value="37" />
  <input id="department" value="Some dept" />
  <input id="position" value="Debt collector" />

  <button type="submit">Submit</button>
</form>

Answer 3

这不是闭包，如果引用setupFormUI中的变量，它就是一个闭包。

getRegistrationFormValue只是一个变量，其函数直接传递给事件触发器（并且是异步的），请注意它不是在setupFormUI中执行的，也不是在setupFormUI中定义的，当它被执行时，它与setupFormUI无关。

Mike Zinn的答案在setupFormUI中定义了一个匿名函数，后者又指setupFormUI中的一个变量，它是一个闭包。