在函数中访问影子根-解网

问：

我已经使用香草 javascript 创建了简单的 Web 组件，按照

问题出在我的我想访问hideNonVisibleDivs()shadowRoot

这是我的功能。

var visibleDivId = null;
var i, divId, div;

console.log('shadowroot', this); // display the global shadow root element

function divVisibility(divId) {
     hideNonVisibleDivs.bind(this)(divId); //binding this context
}

function hideNonVisibleDivs(divId) {
    //I want to access a shadow root here using this
    console.log('shadowroot', this); //undefined
}

var panels = this.shadowRoot.querySelectorAll("#tab-info> .share-tab")
panels.forEach(function(el) {
        divVisibility.bind(this)(this.getAttribute('custom-id')); //bind this context

    });
});

什么是预期？

在里面，我想访问 shadowRoot 作为 out side 函数（全局 shadowroot）的 shadowRoot，这意味着这一点。hideNonVisibleDivs(divId)

javascript html 这个 Web 组件

你可能已经解决了它;但是使用告诉我，你很可能不理解类中的范围和方法。Your 是一个函数，而不是类上的方法。如果这是一种方法，您将免费获得正确的“this”范围，而没有任何老式的mumbo-jumbo。这就是为什么我们要求完整的 Web 组件;然后，我们可以发现您有经验的 JavaScript 技能不使用现代模式的地方。binddivVisibiltybind

答：

0赞 Michael G 9/30/2021 #1

我能提供的最简单的解决方案是停止使用 .
每个函数调用的含义都会发生变化，这就是为什么您在代码中的任何时候都难以理解它所指的内容。thisthis

例如，您的函数无法工作。divVisibility()

console.log( 'shadowroot', this ); //{this} is a shadowroot

//...

function divVisibility(divId) {

     //shadow root {this} cannot be accessed at all from here

     hideNonVisibleDivs.bind(this)(divId); //binding this context
                           //^Refers to divVisibility

}

尝试在不使用任何地方的情况下重写代码。请改用变量名称，例如“shadowroot”。（不幸的是，在不了解您的代码的情况下，我不知道这个建议有多大用处。this

在函数中访问影子根

Accesing shadow root inside a function

评论

评论