Javascript экземпляры класса обработка событий непоследовательны - (. Ред вскоре после публикации упрощать) это/обзорную спутанность

Javascript экземпляры класса обработка событий непоследовательны - (. Ред вскоре после публикации упрощать) это/обзорную спутанность

Название не очень специфическое, я извиняюсь, но я не уверен, что спрашивать более конкретно.

Полный jsfiddle: https://jsfiddle.net/scottbrown0001/byz63qxm/6/

Я запутался, почему ниже код следующее поведение: линии

 d3.select(this).select('.here').text(name);

места ожидаемые значения "Foo 1" и "Foo 2" name в каждом из двух див, но линия

 d3.select(this).select('.there').text(thisFoo.name);

всегда ставит в обеих дивах тот же экземпляр name.

Кажется очевидным, что это проблема, или что-то в этом роде, но я не понимаю, почему она ведет себя так, как она.

<style> 
    div {margin: 20px; } 
    .top {margin-top: 40px; } 
    </style> 

    </head> 
<body> 

    <div class='top top1'> 
    <div class='clicker'> 
     CLICK ME 
     <div class='here'> HERE </div> 
     <div class='there'> THERE </div> 
     </div> 
    </div> 

    <div class='top top2'> 
    <div class='clicker'> 
     CLICK ME 
     <div class='here'> HERE </div> 
     <div class='there'> THERE </div> 
     </div> 
    </div> 


    <script src="//d3js.org/d3.v4.min.js"></script> 

    <script> 

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
    d3.selection.prototype.trigger = function(event, detail) { 
     var e = new CustomEvent(event, detail); 
     this.node().dispatchEvent(e); 
     return this; 
     } 

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
    function Foo(where, name) { 

     this.name = name; 

     var top = d3.select('.' + where); 
     var clicker = top.select('.clicker'); 

     thisFoo = this; 

     clicker.on(
     'click', 
     function(){ 
      d3.select(this).select('.here').text(name); 
      d3.select(this).select('.there').text(thisFoo.name); 
      } 
     ) 

     } 

    foo1 = new Foo('top1', 'Foo 1'); 
    foo2 = new Foo('top2', 'Foo 2'); 


    </script> 

    </body> 
</html>

источник

2016-12-02 Scott

Потому что вы не использовали var ключевое слово при объявлении thisFoo, вы сделали его глобальную переменную:

Присвоение значения необъявленной переменной неявно создает ее как глобальную переменную (он становится свойством глобального объекта), когда выполняется назначение .

Так что же происходит, что линия foo1 = new Foo('top1', 'Foo 1'); выполняется, после чего thisFoo является ссылкой на вновь созданный объект Foo. Следующая строка foo2 = new Foo('top2', 'Foo 2'); изменяет значение глобальной переменной thisFoo так, чтобы она стала ссылкой на второй объект Foo.

Ваш код должен работать так, как вы предполагаете, если вы не используете ключевое слово var, чтобы убедиться, что thisFoo привязан к области функций Foo.

источник

2016-12-03 00:18:44

Thanks Julien! Довольно просто, но я полностью пропустил это! – Scott

Javascript экземпляры класса обработка событий непоследовательны - (. Ред вскоре после публикации упрощать) это/обзорную спутанность

ответ

Смежные вопросы