Question

在我的jQuery代码中，我尝试在名为fullName()的另一个方法中调用对象的init()方法。 fullName()绑定到对象本身，因此如果我尝试alert(this.firstName + " " + this.lastName);或尝试将其绑定到另一个<p id="view"></p>内，它将起作用。

但是，如果我尝试this.html(this.firstName + " " + this.lastName);，它将不起作用。为什么？

$(document).ready(function() {
  var person = {
    firstName: "my",
    lastName: "name",
    init: function() {
      this.fullName();
    },
    fullName: function() {
      $('p#show').click(function() {
        // alert(this.firstName + " " + this.lastName);
        // $('p#view').html(this.firstName + " " + this.lastName);
        this.html(this.firstName + " " + this.lastName);
      }.bind(this));
    }
  };
  
  person.init();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="show">Click me</p>
<p id="view"></p>

Answer 1

这里的问题是由于范围。你期待this来指代#show通过jQuery的和的person对象中选定的元件两者。显然不能两者兼而有之。

鉴于你使用的bind()，this之内处理函数将参阅person对象，但是，其防止进入jQuery的html()方法{{1} }，这是您收到this错误的原因。

要解决该问题的this.html is not a function功能的范围内创建一个变量并保存参照fillName在那里。然后在jQuery事件处理函数中使用它，如下所示：

person

$(document).ready(function() {
  var person = {
    firstName: "my",
    lastName: "name",
    init: function() {
      this.fullName();
    },
    fullName: function() {
      var _person = this;
      $('p#show').click(function() {
        $(this).html(_person.firstName + " " + _person.lastName);
      });
    }
  };
  
  person.init();
});

从另一个属性调用对象属性内的函数

1 个答案: