Question

我的对象定义如下：

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的值？

Answer 1

因为在那个处理程序this引用了被点击的元素，你可以保持对原始KoolTabs对象的引用，如下所示：

function KoolTabs() {
  var self = this;

然后在你的处理程序中，使用该引用，如下所示：

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

You can test it out here。（我注释了setEle()调用，因为没有包含该代码。）

Answer 2

当您在此方法中用作事件处理程序时，

在不同的上下文中调用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); 
    } 
};

如果你想获得幻想，可以查看jQuery的bind方法，看看它是如何在应用适当范围的情况下生成函数调用的。它会像

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

当onClick触发时，this会指向您的预期。您不需要定义self引用。

我如何在javascript中引用子函数中的父对象值

2 个答案: