javascript - 在 jquery 事件处理程序中使用时原型(prototype)属性未定义

Question

我在通过对象的方法访问该对象的属性时遇到问题。问题的形式如下:

function Person() {
    this.siblings = {
        brothers: ["Adam", "Carl"],
        sisters: ["Betty", "Dorothy"]
    };

    this.first_sister = function() { console.log(this.siblings.sisters[0]); }

    this.button_event = function() { $(".btn").on("click", this.first_sister); }
}

Fanny = new Person();
Fanny.button_event();

当按下 .btn 元素时，我的代码不会将“Betty”记录到控制台，而是记录“Uncaught TypeError: Cannot read property 'sisters' of undefined”。

但是，如果我打开控制台并输入 console.log(Fanny.siblings.sisters[0]) 或 Fanny.first_sister()，它会返回“Betty”。

我认为这与我在 jquery 事件处理程序中使用“this”的方式有关，但我尝试过的任何方法(that = this 等)都没有帮助。这是怎么回事？

Answer 1

如果您在 Person 作用域的根部有一个 var that = this，它应该负责了解您所引用的 this到。

function Person() {
  var self_person = this;
  self_person.siblings = {
    brothers: ["Adam", "Carl"],
    sisters: ["Betty", "Dorothy"]
  };

  self_person.first_sister = function() {
    $("#out").append(self_person.siblings.sisters[0] + "<br/>");
  }

  self_person.button_event = function() {
    $(".btn").on("click", self_person.first_sister);
  }
}

Fanny = new Person();
Fanny.button_event();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn">Clickme</button>
<br/>
<div id="out"></div>