javascript - 如果他嵌套在另一个对象实例中，如何访问对象方法？

Question

我使用一个名为 AnimOnScroll 的库我像这样在页面加载时实例化:

    new AnimOnScroll( this.find('#grid' ), {
        minDuration : 0.4,
        maxDuration : 0.7,
        viewportFactor : 0.2
    } );

如代码所示，AnimOnScroll 对象实例附加到具有 #grid id 的 div。

在 AnimOnScroll javascript 文件中，另一个库 ( masonry ) 在构造函数中被调用(我删除了选项部分以使其在此处易于阅读):

function AnimOnScroll( el, options ) {  
    this.el = el;
    this._init();
}
AnimOnScroll.prototype = {

    _init : function() {


        var self = this;

        imagesLoaded( this.el, function() {

            // initialize masonry
            new Masonry( self.el, {
                itemSelector: 'li',
                transitionDuration : 0
            } );

我想访问砌体方法，但找不到如何在 AnimOnScroll 中访问其对象实例。

我设法通过每次重新创建一个新的 AnimOnScroll 实例来重新加载这些项目，但我想学习如何在这种情况下干净地完成它(对 javascript 来说仍然是新的)。

感谢您的帮助!

编辑

我再次尝试测试@Nick L. 回答。事实证明，如果我使用 self.prototype.masonry = new Masonry( ... 我会得到一个错误:

未捕获的类型错误:无法设置未定义的属性“masonry”

如果我用 self.masonry = new Masonry( ... 替换这一行，它工作正常。我可以在控制台上显示 AnimOnLoad 对象，其中砌体暴露

根据您命名变量的方式，我通过记录 scroll 得到了它。如果我尝试记录 masonry(即 scroll.masonry)，它显示为 undefined。

有什么想法吗？

编辑 2

在查看 AnimOnScroll 实例化中的回调日志时，我意识到该对象是在我的页面呈现后创建的。这是我的第一个错误，试图在未加载时调用它。

我的第二个错误是假设我可以使用砌体方法而不会出现显示问题。此对象 (AnimOnScoll) 将一个“显示”类附加到每个对象以处理转换并跟踪滚动位置。

我将不得不为我需要使用的每个砌体方法重写一个方法。底线:我会选择阻力较小的路径，每次需要刷新时重新创建 AnimOnScroll 对象实例。那工作正常。对于那些感兴趣的人，我使用提供显示项目集合的助手。就在它返回之前，我添加了:

Meteor.setTimeout(function(){
    if(typeof scroller!=undefined){scroller= new AnimOnScroll(.......)}
                  },100);

那样的话，AnimOnScroll 会在我的页面更新后立即重新加载，并且可以顺利运行。

我会验证你的回答，@Nick L. 因为你能帮助我真是太好了:-)

Answer 1

为了访问对象方法，一般而言，您需要以某种方式访问​​对象本身。

我建议您使用 self 在对象上添加一个包含 Masonry 实例的砌体属性，然后将构造的对象传递到那里:

//Warning: Untested code


AnimOnScroll.prototype = {

    _init : function() {

        var self = this;

        imagesLoaded( this.el, function() {

        // initialize masonry
        self.masonry = new Masonry( self.el, {
            itemSelector: 'li',
            transitionDuration : 0
        } );
    }
}

然后，通过以下操作访问 Masonry 对象:

var scroll  = new AnimOnScroll();
var masonry = scroll.masonry;
//etc

编辑:考虑使用调试器或 console.log 多次逐步检查对象是否被调用，从调用其构造函数的位置开始直到调用它的位置，然后没有找到，以确保其正确构建和使用。