Как я могу сослаться на значение родительского объекта в дочерней функции в JavaScript - PullRequest
Новая
       1

Как я могу сослаться на значение родительского объекта в дочерней функции в JavaScript

1 голос
/ 04 октября 2010

У меня есть мой объект, определенный следующим образом: 

function KoolTabs() {
    this.targetName = "";
    this.activeNode = 1;
this.init = function()
{
    this.targetName = arguments[0];
    this.activeNode = (arguments[1] || 1);
    this.setEle( this.activeNode );
    this.findNodes();
}
    this.findNodes = function()
    {
        for (i=0;i<document.links.length;i++) {
            myEle = document.links[i];
              x = document.links[i].href;
              if (x.indexOf("#" + this.targetName) >= 0) {
                myEle.addEventListener('click', this.onClick, false);
              }
        }
    }
    this.onClick = function()
    {
        alert('Hello ' + this.activeNode);
    }
};

Я называю его так: 

<script>
    var StockTabs = new KoolTabs;
    StockTabs.init('tabsStock', 1);
</script>

Теперь, когда я нажимаю на объект, у которого есть метод bing, он говорит "Hello undefined"

как я могу получить значение родительского объекта activeNode?

Ответы [ 2 ]

3 голосов
/ 04 октября 2010

Поскольку в этом обработчике this ссылается на элемент, по которому щелкнули, вы можете сохранить ссылку на исходный объект KoolTabs, хотя, например так: 

function KoolTabs() {
  var self = this;

Затем в вашем обработчике используйте эту ссылку, например:это: 

this.onClick = function()
{
    alert('Hello ' + self.activeNode);
}

Вы можете проверить это здесь .(Я прокомментировал вызов setEle(), так как этот код не был включен.)

1 голос
/ 04 октября 2010

Ваш метод onClick вызывается в другом контексте при использовании в качестве обработчика событий в этом методе - this больше не ссылается на ваш KoolTabs экземпляр.

Простое решение - создатьзамыкание с помощью самореферентной переменной с другим именем. 

function KoolTabs() { 

    var self = this;

    this.targetName = ""; 
    this.activeNode = 1; 
    this.init = function() 
    { 
        this.targetName = arguments[0]; 
        this.activeNode = (arguments[1] || 1); 
        this.setEle( this.activeNode ); 
        this.findNodes(); 
    } 
    this.findNodes = function() 
    { 
        for (i=0;i<document.links.length;i++) { 
            myEle = document.links[i]; 
              x = document.links[i].href; 
              if (x.indexOf("#" + this.targetName) >= 0) { 
                myEle.addEventListener('click', this.onClick, false); 
              } 
        } 
    } 
    this.onClick = function() 
    { 
        // "this" refers to a different object now. use the "self" 
        // variable to reference the KoolTabs instance.
        alert('Hello ' + self.activeNode); 
    } 
};

Если вы хотите получить фантазию, вы можете посмотреть на метод bind jQuery, чтобы увидеть, как он генерирует вызов функции с соответствующей областью действия.применяется.это будет что-то вроде 

$(myEle).click( this.onClick.bind(this) );

, а когда срабатывает onClick, this будет указывать на то, что вы ожидаете.вам не нужно определять ссылку self.

...