javascript - 使用 this 关键字迭代 jquery 选择器

Question

这个问题已经有答案了:

What does arrow function '() => {}' mean in Javascript? [duplicate] (2 个回答)

Arrow Functions and This [duplicate] (5 个回答)

Methods in ES6 objects: using arrow functions (6 个回答)

ES6 arrow function and lexical scope inside a function [duplicate] (2 个回答)

really confused by "enclosing scope" of javascript es6 arrow function (4 个回答)

已关闭 3 年前。

所以我有一个 jQuery 代码，单击按钮即可记录页面上每个输入字段的值:

我已经在输入上使用 forEach 方法尝试过此方法，但它说它不是一个函数，为什么我不能在这里使用此方法？

$("#submit").click(e => {
  e.preventDefault();

  let inputs = $("input");

  inputs.each(() => {
    console.log($(this).val());
  });
});

但是这里的问题是这里的this关键字指的是#submit ，我如何仅使用 this 关键字来实现我的目标，以及为什么 this 在这里指的是 #submit而不是 input ？提前致谢。

Answer 1

不要使用箭头函数。他们不会重新绑定(bind) this。
相反，使用封闭词法范围的 this 。

$("#submit").click(e => {
  e.preventDefault();

  let inputs = $("input");

  inputs.each(function(){
    console.log($(this).val());
  });
});

应该可以正常工作。

<小时/>

有关箭头函数和 this 行为的更多信息:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions