Question

问题：

我正在尝试使用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"
    });
}

Answer 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>

Answer 2

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

您可以按照 Module模式代码样式进行操作，并将str中的foo存储在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
    });
}

将`this`传递给.keyup（）

2 个答案: