Question

我是面向对象的javascript的新手。我有一个简单的类，似乎是JavaScript中的一个函数。我的班有两个成员和一些方法：

function WebApp() {
  //members
  this.webSocket = null;
  this.workdata = null;

  //constructor
  $( 'document' ).ready(function() {
    $('#wait').show();
    this.initializeWebsocket();
  });

  this.getURLParameter = function(sParam)
  {
    //retrieves GET-PARAMETER
  }

  this.initializeWebsocket = function() {
        //websocket connection
      }
}
var app = new WebApp();

当document.ready的匿名函数运行时，我收到以下错误：未捕获的ReferenceError：未定义initializeWebsocket

我理解异常，因为这是在这个范围文档中。我能够以这种方式调用该函数：

app.initializeWebsocket();

但是通过这种方式，我无法实例化WebApp的多个对象。是否可以将this-webappinstance作为参考传递给匿名函数？

Answer 1

对于初学者，你应该将初始调用包装在$（＆＃39; document＆＃39;）。ready（）中，而不是在你的课程中。其次; ＆＃39;这＆＃39; ready函数内部现在指向ready调用的回调，并且确实没有initializeWebsocket方法。您可以使用var = this solutionn，但在这种情况下，您可以通过拉出文档来保存。

$(function() {
    var app = new WebApp();
});

function WebApp() {
  //members
  this.webSocket = null;
  this.workdata = null;

  $('#wait').show();
  this.initializeWebsocket();

  this.getURLParameter = function(sParam)
  {
      //retrieves GET-PARAMETER
  }

  this.initializeWebsocket = function() {
       //websocket connection
  }
}

请注意，我还将初始化提取到顶部以便于阅读。这项工作归功于hoisting。我还使用了文档就绪语法的简写版本。

Answer 2

你shpuld保存this函数之外的anonymous的引用，如下所示：

function WebApp() {
  var self = this; // Reference to this is in variable called self.
  //members
  this.webSocket = null;
  this.workdata = null;

  //constructor
  $( 'document' ).ready(function() {
    $('#wait').show();
    self.initializeWebsocket(); // Here this refers to different scope.. so use self
  });

  this.getURLParameter = function(sParam)
  {
    //retrieves GET-PARAMETER
  }

  this.initializeWebsocket = function() {
        //websocket connection
    console.log("inside websocket")
      }
}
var app = new WebApp();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

问题的核心是代码的以下几行：

$( 'document' ).ready(function() {
    $('#wait').show();
    this.initializeWebsocket();
  });

this指的是ready()中的匿名函数。它不是指您创建的实际对象。有一种简单的方法可以解决它 - 改变匿名函数的范围。

即使您不应该在构造函数中使用$(document).ready，解决问题的最简单方法是使用$.proxy。您需要更改和添加的代码是：

$(document).ready($.proxy(function() {
    $('#wait').show();
    this.initializeWebsocket();
  }, this));

Answer 4

这是诀窍

 function WebApp() {
  //members
  this.webSocket = null;
  this.workdata = null;

  $('#wait').show();
  this.initializeWebsocket();

  this.getURLParameter = function(sParam)
  {
      //retrieves GET-PARAMETER
  }

  this.initializeWebsocket = function() {
       //websocket connection
  }
}

$(function() {
    var app = new WebApp();
});

Answer 5

在此代码行中：

function WebApp() {
  //members
  this.webSocket = null;
  this.workdata = null;

  //constructor
  $( 'document' ).ready(function() {
    $('#wait').show();
    this.initializeWebsocket();
  });

关键字this引用了封闭对象，在这种情况下为$('document')。要引用外部对象（WebApp），只需使用对象变量：

function WebApp() {
  //members
  this.webSocket = null;
  this.workdata = null;

  // reference to me
  var that = this;

  //constructor
  $( 'document' ).ready(function() {
    $('#wait').show();
    that.initializeWebsocket();
  });

that等变量的范围及其当前值将在JS中运行时调用$( 'document' ).ready的上下文中设置。

参考文献＆amp;匿名函数的范围

5 个答案: