将 `this` 传递给 .keyup() [重复]答案

【问题标题】：Passing `this` to .keyup() [duplicate]将 `this` 传递给 .keyup() [重复]
【发布时间】：2019-02-19 08:47:04
【问题描述】：

问题：

我正在尝试使用this.str。有没有办法将this 传递给.keyup() 函数？

function foo() {
    var str = "some text";
    $('#inputbox').keyup(function (e) {
       alert(str); //<-- This will output "some text"
       alert(this.str); //<-- This will output "undefined"
    });
}

【问题讨论】：

this 在该上下文中指的是$("#inputbox")。您想为函数本身分配一个属性吗？

标签： javascript jquery function scope this

【解决方案1】：

您可以将this 存储在一个变量中，通常将该变量命名为_this 或_self 或_me。

像这样：

var str = "some text";
var _this = this;
$('#button').click(function() {
  console.log(str);
  console.log(_this.str);
});

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

你也可以像这样使用箭头函数：

var str = "some text";
$('#button').click(() => {
  console.log(str);
  console.log(this.str);
});

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

您还可以使用一些Function.prototype 方法，例如apply 或call 来设置this。但正如您所见，在这种情况下这样做没有多大意义：

var str = "some text";
var _this = this;

$('#button').click(function() {
  onKeyUp.call(_this);
});

function onKeyUp() {
  console.log(str);
  console.log(this.str);
}

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

【讨论】：

对我来说没有用。
@user123456 将代码转换为sn-ps，它们似乎都可以正常工作
我正在调用 foo 的就绪函数
你设置this.str了吗？因为如果你从来没有设置过它，你就不能期望从中得到一个值，除了 undefined
在我的示例中，我不需要设置this.str，因为var str 在全局范围内，而在全局范围内var str 与this.str 相同。这只是全局范围的情况。如果您不在全局范围内，则需要执行var str = this.str = "some text";

【解决方案2】：

事实上，在 JavaScript 中每个function 都有自己的scope，所以在keyup 回调中this 不会引用foo，但它会引用$("#inputbox")，这不会有一个名为str 的属性，这就是你得到undefined 的原因。这意味着您无法在 keyup 回调范围内访问 foo.str。

您可以做的是遵循Module 模式代码样式，并将foo 的str 存储在variable 中，然后在keyup 回调中访问它：

function foo() {
    var str = "some text";
    var _self = this;
    _self.str = str;
    $('#inputbox').keyup(function (e) {
       alert(str); //<-- This will output "some text"
       alert(_self.str); //<-- This will output "some text" too
    });
}

【讨论】：

我仍然把它作为窗口对象。
@user123456 糟糕，我忘了将str 重新分配给_self，是的，在这种情况下确实this 指的是全局window 对象。