свойство, не заданное в runtime в классе javascript

Question

Это мой первый раз, когда я пытаюсь использовать javascript для создания класса с функциями и свойствами, но я не могу понять, почему в моем коде функция ShowValue возвращает значение по умолчанию, а не тот, который был установлен перед вызовом.

<script type="text/javascript"> 
    var $mylocalclass; 

    $(document).ready(function() { 
     $mylocalclass = myclass; 
     $mylocalclass.mypropname = "the_name_i_want_here"; 
    }); 

    var myclass = (function() { 
     var mypropname = "unspecified_name"; 

     var ShowValue = function() { 
      alert(mypropname); 
     }; 

     return { 
      ShowValue: ShowValue, 
      properties:{ 
       mypropname: mypropname 
      } 
     } 
    })(); 
</script> 

<button type="button" onclick="$mylocalclass.ShowValue();">Try Me!</button> 

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

Answer 1

Доступ к личной переменной mypropname внутри функции. Чтобы получить доступ к переменной, которую вы установили, используйте this.

Кроме того, у вас есть 3 переменные mypropname, 2 из них неиспользованные.

var mypropname = "unspecified_name"; 

просто частная переменная, которую вы использовали в ShowValue обратного вызова и набора переменных в переменной properties не сослались нигде.

И, наконец, это не экземпляр объекта (или класса), а самого объекта.

var $mylocalclass; 
 

 
    $(document).ready(function() { 
 
     $mylocalclass = myclass; 
 
     $mylocalclass.properties.mypropname = "the_name_i_want_here"; 
 
    }); 
 

 
    var myclass = (function() { 
 
     var mypropname = "unspecified_name"; 
 

 
     var ShowValue = function() { 
 
      alert(this.properties.mypropname); 
 
     }; 
 

 
     return { 
 
      ShowValue: ShowValue, 
 
      properties:{ 
 
       mypropname: mypropname 
 
      } 
 
     } 
 
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<button type="button" onclick="$mylocalclass.ShowValue();">Try Me!</button>