Ссылки и область применения анонимных функций

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 прогонов я получаю следующее сообщение об ошибке: Uncaught ReferenceError: initializeWebsocket не определен

Я понимаю исключение, потому что это в этом документе. Я могу вызвать функцию на этом пути:

app.initializeWebsocket(); 

Но на этом пути я не могу создать экземпляр более чем один объект WebApp. Можно ли передать this-webappinstance в качестве ссылки в анонимную функцию?

Answer 1

Для начала вы должны перенести начальный вызов в $ ('document'). Ready(), а не внутри вашего класса. Во-вторых, 'this' внутри функции ready теперь указывает на обратный вызов готового вызова и на самом деле не имеет на нем метода initializeWebsocket. Вы можете пойти с var, который = это решение, но в этом случае вы сохраняетесь, вытаскивая документ.

$(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 и их текущее значение будет установлен в контексте вызова $('document').ready во время выполнения в JS.