Базовый прототип Javascript - не удалось обновить свойство

Question

Я пытаюсь создать свой первый прототип Javascript. Он заключается в создании ярлыка, размещенного на карте Google V3, в которой я пишу, думает, что «Загрузка маркеров» во время длительных операций.
Однако, я хотел бы, чтобы «повторно» мой прототип и изменить текст, который написан в. «Загрузка маркеров» может стать «Загрузка формы» во время операции загрузки формы, и т.д. ...

Вот что я написал до сих пор:

StateControl.prototype.text_ = null; 

// Define setters and getters for this property 
StateControl.prototype.getText = function() { 
    return this.text_; 
} 

StateControl.prototype.setText = function (text) { 
    this.text_ = text; 
} 

/** @constructor */ 
function StateControl(controlDiv, map, text) { 

    var control = this; 
    control.text_ = text; 

    controlDiv.style.padding = '5px'; 

    // Set CSS for the control border 
    var stateUI= document.createElement('div'); 
    //some css properties like stateUI.style.backgroundColor = 'black' 
    controlDiv.appendChild(stateUI); 

    // Set CSS for the control interior 
    var goHomeText = document.createElement('div'); 
    stateUI.id = 'stateControl'; 
    //some css properties like stateText.style.color = 'white'; 
    stateText.innerHTML = '<strong>' + this.text_ + '</strong>'; 
    stateUI.appendChild(stateText); 
} 

Когда я инициализировать свою карту Google, я звоню прототип как это:

var stateControlDiv = document.createElement('div'); 
var stateControl = new StateControl(stateControlDiv, map, "Loading the map"); 
stateControlDiv.index = 1; 
map.controls[google.maps.ControlPosition.TOP_CENTER].push(stateControlDiv); 

и в конце процесса инициализации, я FADEOUT StateControl с

$("#stateControl").fadeOut(3000); 

--- Это работает ---


Но теперь, мне нужно изменить текст StateControl, когда пользователь нажимает RadioButton под названием "Load формы". Я хочу, чтобы StateControlfadeIn() сразу с «Загрузка фигур» в виде текста, затем fadeOut(3000), когда фигуры загружены. Я знаю, как использовать fadeIn() и fadeOut(), но я не знаю, как изменить текст, и «Загрузка карты» по-прежнему появляется при загрузке фигур.

Я попытался с

homeControl = StateControl.prototype.setText("Loading the shapes"); 

в моем loadShapes() метода, но он работает только тогда, когда я создаю новый StateControl с хорошим текстом ... Но это пустая трата и мне просто нужно обновить text_ свойства.

Как я могу это сделать?

Answer 1

Кажется, что вы запутались с материалом прототипа, а также создаете объект в javascript. Я постараюсь сделать краткое введение.

В JavaScript, мы иногда используем функции, конструкторы, так же, как вы правильно сделали:

function StateControl(controlDiv, map, text) { 
    // body 
} 

с помощью конструкторов, вы можете создавать экземпляры, с new ключевым словом:

var myStateControl = new StateControl(stateControlDiv, map, "Loading the map"); 

Короче говоря, это два способа, как добавить свойства к экземплярам. С помощью this ключевое слово внутри конструктора или с prototype свойство конструктора. Разница очень проста. Конструктор вызывается каждый раз, когда вы создаете новый экземпляр, но прототип должен быть определен только один раз.

Важно, свойства прототипа должны быть определены после того, как конструктор:

function StateControl(controlDiv, map, text) { 
} 

StateControl.prototype.getText = function() { 
    return this.text_; 
} 

StateControl.prototype.setText = function (text) { 
    this.text_ = text; 
} 

Поскольку вы определяете текст в каждом случае, вам не придется беспокоиться о StateControl.prototype.text_ = null;.

Я не знаю, как выглядит остальная часть вашего кода, но попробуйте немного изменить свой подход.Вам нужно изменить текст в каком-то html, так что вам нужно соединение из экземпляра с этим элементом html. Также у вас есть геттер и сеттер, но свойства экземпляра доступны без них ...

function StateControl(controlDiv, map, text) { 
    this.text_ = text; 
    //so lets just make stateText as a property of this 
    this.stateText = document.createElement('p'); 

    controlDiv.style.padding = '5px'; 

    // Set CSS for the control border 
    var stateUI= document.createElement('div'); 
    //some css properties like stateUI.style.backgroundColor = 'black' 
    controlDiv.appendChild(stateUI); 

    // Set CSS for the control interior 
    var goHomeText = document.createElement('div'); 
    stateUI.id = 'stateControl'; 
    //some css properties like stateText.style.color = 'white'; 
    this.stateText.innerHTML = '<strong>' + this.text_ + '</strong>'; 
    stateUI.appendChild(this.stateText); 
} 

// and lets make method that will be able to change state text... 
StateControl.prototype.setStateText = function (text) { 
    this.text_ = text; 
    this.stateText.innerHTML = '<strong>' + this.text_ + '</strong>'; 
}; 

// then somewhere in the code... 
$("#loadShapes").on("click", function() { 
    stateControl.setStateText("Loading the shapes"); 
    $("#stateControl").fadeIn... 
}