javascript - 使用 javascript 原型(prototype)在链接点击后保留数据

Question

我正在尝试掌握 javascript 和原型(prototype)(而不是库)来创建一个可重用的脚本，该脚本最终会从数据库输出一个漂亮的格式化数据表。我能够使用 jQuery AJAX 获取 JSON 格式的数据，并毫无问题地生成表。理想情况下，它是可排序和分页的，而这就是麻烦开始的地方。

我尝试了几种构造方法，但如果我理解正确的话，似乎使用 javascript 的原型(prototype)才是我想要的。我似乎(至少)误解的是当用户通过单击链接或按钮采取操作时的数据持久性。

这是我为说明该问题而创建的简短内容:

http://jsfiddle.net/Scopique/yrt3krn9/

    //Uses jQuery 1.11.0 because IE

var Outside = function () {
    this.MyVariable = 'Hi';
    this.PersistVariables = 'Oops';
}

Outside.prototype.GenerateHTML = function () {
    var that = this;

    //Value pops as expected
    alert(that.PersistVariables);

    var localHTML = "<a href='#' id='link' onclick='Outside.prototype.Respond(\"" + that.MyVariable + "\");'>Click Me</a>";
    $("#output").html(localHTML);
}


Outside.prototype.Respond = function (whatVariable) {
    var that = this;

    alert(whatVariable);

    //Value does not pop...
    alert(that.PersistVariables);

}

$(document).ready(function () {
    var out = new Outside();
    out.GenerateHTML();
});

除此之外还有:

<div id="output"></div>

在此示例中，当通过单击在运行时添加到 DIV 的链接来触发 Outside.prototype.Respond 时，MyVariable 的值是可见的，因为它是通过定义、构建 HTML 的过程显式传递的，并且作为参数传递给该方法。

但是，当调用 Respond 时，PersistVariables 始终返回为未定义。它在构造函数中分配了一个值，并且在调用“GenerateHTML”时显示正确的值(我认为这是一个自然的执行流程)，但在单击链接后“Respond”中无法理解该值。

我可以问“我错过了什么”，但我怀疑事情没那么简单:D 我想要访问的变量范围是否正确？如果是这样，是什么导致他们在点击链接后失去理智。

谢谢!

Answer 1

您的问题与范围和您对原型(prototype)编程的理解有关。这是一个非常深入的主题，网上有很多引用资料，所以我不打算在这里做完整的解释。

基本上，向原型(prototype)属性添加属性意味着向您正在创建的对象的所有实例添加功能。当您输出 html 时，附加到元素的 JavaScript 上下文是全局上下文，因此它不知道有关外部原型(prototype)中的任何方法的任何信息。在这种情况下，您需要的是对外部实例 out 的全局引用。然后您的点击处理程序可以调用 out.Respond

这是您的更新Fiddle

var Outside = function() {
  this.MyVariable = 'Hi';
  this.PersistVariables = 'Oops';
}

Outside.prototype.GenerateHTML = function() {
  var that = this;

  var localHTML = "<a href='#' id='link' onclick='out.Respond(\"" + that.MyVariable + "\");'>Click Me</a>";
  $("#output").html(localHTML);
}


Outside.prototype.Respond = function(whatVariable) {
  var that = this;

  alert(whatVariable);
  alert(that.PersistVariables);
}

var out = new Outside();
$(document).ready(function() {
  //var out = new Outside();
  out.GenerateHTML();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="output"></div>

--编辑--

MDN Prototype最有可能提供一些最好的信息。

以下是一些乍一看看起来不错的其他链接:

https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#newwindow=1&q=javascript+prototype+-site:w3schools.com