Javascript 访问变量

当我在positionSlides方法上执行控制台跟踪时，它会将幻灯片显示为未定义。 当我在document.ready回调中清楚地实例化它时，这怎么可能呢。我还确保将此变量设置为全局变量，以便幻灯片放映和幻灯片导航都可以访问这两个变量

var slideShow, slideShowNavigation;

    $(document).ready(function(){

        slideShow = new SlideShow( $('#header #slideshow'), 980 );
        slideShowNavigation = new SlideShowNavigation( $('#header').find("#leftArrow"), $('#header').find("#rightArrow") );

    });


    // SLIDE SHOW CLASS
    function SlideShow( divContainer, slideWidth ){
        // Check to make sure a new instance is created
        if( ! (this instanceof SlideShow) ) return new SlideShow();

        this.$imageContainer = divContainer;
        this.slideWidth = slideWidth;
        var maxImages =     this.$imageContainer.children().length;

        this.getMaxSlides = function(){
            return maxImages;
        }

        this.positionSlides();

    }

    SlideShow.prototype.positionSlides = function(){
        console.log('imageContainer = '+slideShow);
    }

    SlideShow.prototype.update = function( dir ){

    }


    // ARROW NAVIGATION FOR SLIDESHOW

    function SlideShowNavigation( left, right){
        if( ! (this instanceof SlideShowNavigation) ) return new SlideShowNavigation();

        //this.updateArrows( slideShow.$imageContainer.find(":first") );

    }

    SlideShowNavigation.prototype.updateArrows = function( item ){

    }

---

您已经从Slideshow构造函数调用了positionSlides。直到构造函数完成后，才设置slideShow变量。因此，在positionSlides的这部分中设置slideShow全局变量之前，您正在访问该变量：

console.log('imageContainer = '+slideShow);

我建议在positionSlides方法中，您可以引用它而不是全局变量

将该行更改为：

console.log('imageContainer = ' + this);

---

作为一个建议，我发现使用变量名有点危险，因为只有在幻灯片显示全局变量名和幻灯片显示函数名以及幻灯片显示CSS标识符的情况下，变量名才会有所不同。它使您的代码更难阅读和理解，并且很容易在不经意间出错。在这种情况下，我建议全局变量类似于Slideshow，以提高可读性并减少出错的可能性。

您已经从Slideshow构造函数调用了positionSlides。直到构造函数完成后，才设置slideShow变量。因此，在positionSlides的这部分中设置slideShow全局变量之前，您正在访问该变量：

console.log('imageContainer = '+slideShow);

我建议在positionSlides方法中，您可以引用它而不是全局变量

将该行更改为：

console.log('imageContainer = ' + this);

作为一个建议，我发现使用变量名有点危险，因为只有在幻灯片显示全局变量名和幻灯片显示函数名以及幻灯片显示CSS标识符的情况下，变量名才会有所不同。它使您的代码更难阅读和理解，并且很容易在不经意间出错。在这种情况下，我建议全局变量类似于SlideShow，以提高可读性并减少出错的可能性。

问题在于：

slideShow = new SlideShow( $('#header #slideshow'), 980 );

该行调用SlideShow函数，该函数调用positionSlides，该函数查找SlideShow，但直到SlideShow函数返回，才定义SlideShow

相反，在positionSlides中，使用此选项而不是幻灯片来引用实例，这样您的类就独立于变量名。

问题在于：

slideShow = new SlideShow( $('#header #slideshow'), 980 );

该行调用SlideShow函数，该函数调用positionSlides，该函数查找SlideShow，但直到SlideShow函数返回，才定义SlideShow

相反，在positionSlides中，使用此函数而不是slideShow来引用实例，这样您的类就独立于变量名。

在slideShow函数返回该定义之前，不会定义slideShow。在构造函数完成之前调用SlideShow.positionSlides

修复：仅在定义幻灯片放映后调用positionSlides

var slideShow, slideShowNavigation;

    $(document).ready(function(){

        slideShow = new SlideShow( $('#header #slideshow'), 980 );
        slideShow.positionSlides();
        slideShowNavigation = new SlideShowNavigation( $('#header').find("#leftArrow"), $('#header').find("#rightArrow") );

    });


    // SLIDE SHOW CLASS
    function SlideShow( divContainer, slideWidth ){
        // Check to make sure a new instance is created
        if( ! (this instanceof SlideShow) ) return new SlideShow();

        this.$imageContainer = divContainer;
        this.slideWidth = slideWidth;
        var maxImages =     this.$imageContainer.children().length;

        this.getMaxSlides = function(){
            return maxImages;
        }

    }

    SlideShow.prototype.positionSlides = function(){
        console.log('imageContainer = '+slideShow);
    }

    SlideShow.prototype.update = function( dir ){

    }


    // ARROW NAVIGATION FOR SLIDESHOW

    function SlideShowNavigation( left, right){
        if( ! (this instanceof SlideShowNavigation) ) return new SlideShowNavigation();

        //this.updateArrows( slideShow.$imageContainer.find(":first") );

    }

    SlideShowNavigation.prototype.updateArrows = function( item ){

    }

在slideShow函数返回该定义之前，不会定义slideShow。在构造函数完成之前调用SlideShow.positionSlides

修复：仅在定义幻灯片放映后调用positionSlides

var slideShow, slideShowNavigation;

    $(document).ready(function(){

        slideShow = new SlideShow( $('#header #slideshow'), 980 );
        slideShow.positionSlides();
        slideShowNavigation = new SlideShowNavigation( $('#header').find("#leftArrow"), $('#header').find("#rightArrow") );

    });


    // SLIDE SHOW CLASS
    function SlideShow( divContainer, slideWidth ){
        // Check to make sure a new instance is created
        if( ! (this instanceof SlideShow) ) return new SlideShow();

        this.$imageContainer = divContainer;
        this.slideWidth = slideWidth;
        var maxImages =     this.$imageContainer.children().length;

        this.getMaxSlides = function(){
            return maxImages;
        }

    }

    SlideShow.prototype.positionSlides = function(){
        console.log('imageContainer = '+slideShow);
    }

    SlideShow.prototype.update = function( dir ){

    }


    // ARROW NAVIGATION FOR SLIDESHOW

    function SlideShowNavigation( left, right){
        if( ! (this instanceof SlideShowNavigation) ) return new SlideShowNavigation();

        //this.updateArrows( slideShow.$imageContainer.find(":first") );

    }

    SlideShowNavigation.prototype.updateArrows = function( item ){

    }

---

SlideShow对象在其构造函数中调用positionSlides方法：

this.positionSlides();

此方法尝试访问您将自身分配给的变量：

console.log('imageContainer = '+slideShow);

它还不存在，因为构造函数尚未完成

编辑-根据关于两个对象之间关系的讨论

SlideShow需要调用SlideShowNavigation的方法-使用Java中的事件完成

可以在javascript中使用回调创建事件驱动模型

假设SlideShowNavigation在导航中具有SlideShow对象的依赖项。还要注意使用单个options对象参数，而不是单个参数，这是一种常见的构造，因为它简化了参数传递，从而生成更可读、更易于维护的代码。如果添加/删除参数，则不会有破坏某些内容的风险，因为它们不是以这种方式位置相关的

function SlideShow() {
   // setup code

   this.onSomethingHappened=null;
}
SlideShow.prototype.doSomething() {
    // do something

    /// if a callback exists & is defined properly, then invoke it
    if (this.onSomethingHappened && 
            typeof this.onSomethingHappened==='function') {
        this.onSomethingHappened(this);
    }
}
SlideShow.prototype.publicMethod() {

}

function SlideShowNavigation(options){
    if( ! (this instanceof SlideShowNavigation) ) 
        return new SlideShowNavigation();

    this.slideShow = options.slideShow
    this.left = options.left;
    this.right = options.right;

    // bind to callbacks (events): assigning the `onSomethingHappened` property
    // of the SlideShow to a function in this object, which it will call at the
    // appropriate time

    this.slideShow.onSomethingHappened = this._somethingHappened;

     //this.updateArrows( slideShow.$imageContainer.find(":first") );

}

// i use an underscore to indicate a private method - since there's
// no way to create non-public prototype members. You can can 
// alternatively create private functions in the constructor though
// it's less memory efficient, and they are not directly accessible
// from prototype methods.

SlideShowNavigation.prototype._somethingHappened(e) {
    // e is the sender of the event
    ...
    // you can invoke methods of the sender directly using the ref passed here, 
    // if you like
    e.publicMethod();
}

---

SlideShow对象在其构造函数中调用positionSlides方法：

this.positionSlides();

此方法尝试访问您将自身分配给的变量：

console.log('imageContainer = '+slideShow);

它还不存在，因为构造函数尚未完成

编辑-根据关于两个对象之间关系的讨论

SlideShow需要调用SlideShowNavigation的方法-使用Java中的事件完成

可以在javascript中使用回调创建事件驱动模型

假设SlideShowNavigation在导航中具有SlideShow对象的依赖项。还要注意使用单个options对象参数，而不是单个参数，这是一种常见的构造，因为它简化了参数传递，从而生成更可读、更易于维护的代码。如果添加/删除参数，则不会有破坏某些内容的风险，因为它们不是以这种方式位置相关的

function SlideShow() {
   // setup code

   this.onSomethingHappened=null;
}
SlideShow.prototype.doSomething() {
    // do something

    /// if a callback exists & is defined properly, then invoke it
    if (this.onSomethingHappened && 
            typeof this.onSomethingHappened==='function') {
        this.onSomethingHappened(this);
    }
}
SlideShow.prototype.publicMethod() {

}

function SlideShowNavigation(options){
    if( ! (this instanceof SlideShowNavigation) ) 
        return new SlideShowNavigation();

    this.slideShow = options.slideShow
    this.left = options.left;
    this.right = options.right;

    // bind to callbacks (events): assigning the `onSomethingHappened` property
    // of the SlideShow to a function in this object, which it will call at the
    // appropriate time

    this.slideShow.onSomethingHappened = this._somethingHappened;

     //this.updateArrows( slideShow.$imageContainer.find(":first") );

}

// i use an underscore to indicate a private method - since there's
// no way to create non-public prototype members. You can can 
// alternatively create private functions in the constructor though
// it's less memory efficient, and they are not directly accessible
// from prototype methods.

SlideShowNavigation.prototype._somethingHappened(e) {
    // e is the sender of the event
    ...
    // you can invoke methods of the sender directly using the ref passed here, 
    // if you like
    e.publicMethod();
}

---

问题是你是

---

---

通过调用函数slideshow来定义什么是幻灯片放映。该函数调用positionSlides。这是在对象构造完成之前调用的。

问题在于，您正在通过调用函数slideshow来定义什么是幻灯片放映。该函数调用positionSlides。这是在对象构造完成之前调用的。

作为一个小提示，请使用console.log'imageContainer='，slideShow而不是a+，因为Chrome将以一种可以让您查看对象的方式打印它。作为一个小提示，请使用console.log'imageContainer='，slideShow而不是a+，因为Chrome会以一种可以让你查看对象的方式打印出来。你建议在其他地方保存对这两个实例的引用，而不是保存在全局变量范围内。我也不喜欢全局的想法，但不确定在不使用全局的情况下，对象之间如何进行通信。创建SlideShowNavigation对象时，为其提供一个可存储在其自身实例数据中的SlideShow对象的引用。无需全局存储该引用，它应位于SlideShowNavigation实例数据中。毕竟，幻灯片导航对象只控制一个幻灯片，对吗？因此，SlideShow实例甚至可以传递到SlideShowNavigation对象的构造函数中，或者稍后通过方法调用进行设置。这是一个好主意，但对于需要访问SlideShowNavigation的SlideShow来说，这似乎不是一个好做法。幻灯片放映不需要依赖于导航，如果需要，它可以自己工作。但是在本例中，在update方法中，我调用了SlideShowNavigation.updateArrows。我能想到的唯一方法就是全局引用这两个对象，这是一个通用编程问题。如果您不想让slideshow对象知道任何关于导航对象的信息，那么您需要创建一个抽象事件，当slideshow对象发生变化时，您可以从该对象中触发该事件，并且slideshow nav可以监视该事件，并在看到事件时做出适当的响应。这可能比本例中所需的工作要多。只需在slideshow对象中为slideshow nav对象创建一个实例变量。将其初始化为null。如果您有一个slideshow nav对象，请告诉幻灯片，然后幻灯片将其存储在其实例数据中。当幻灯片进行更改时，它可以检查null，如果nav对象不是null，则调用它。如果为空，则不执行任何操作。是否有其他地方建议保存对这两个实例的引用，而不是保存在全局变量范围内。我也不喜欢全局的想法，但不确定在不使用全局的情况下，对象之间如何进行通信。创建SlideShowNavigation对象时，为其提供一个可存储在其自身实例数据中的SlideShow对象的引用。无需全局存储该引用，它应位于SlideShowNavigation实例数据中。毕竟，幻灯片导航对象只控制一个幻灯片，对吗？因此，SlideShow实例甚至可以传递到SlideShowNavigation对象的构造函数中，或者稍后通过方法调用进行设置。这是一个好主意，但对于需要访问SlideShowNavigation的SlideShow来说，这似乎不是一个好做法。幻灯片放映不需要依赖于导航，如果需要，它可以自己工作。但是在本例中，在update方法中，我调用了SlideShowNavigation.updateArrows。我能想到的唯一方法就是全局引用这两个对象，这是一个通用编程问题。如果您不想让slideshow对象知道任何关于导航对象的信息，那么您需要创建一个抽象事件，当slideshow对象发生变化时，您可以从该对象中触发该事件，并且slideshow nav可以监视该事件，并在看到事件时做出适当的响应。这可能比本例中所需的工作要多。只需在slideshow对象中为slideshow nav对象创建一个实例变量。将其初始化为null。如果您有一个slideshow nav对象，请告诉幻灯片，然后幻灯片将其存储在其实例数据中。当幻灯片进行更改时，它可以检查null，如果nav对象不是null，则调用它。如果它是NULL，它什么都不做。如果您能详细说明您认为正确的构造我的代码的方法，那就太好了。我真的不知道该说什么——您试图从对象原型中访问对象本身的分配的全局目标。对象没有知识，不应该依赖于自身之外的事物。这看起来只是调试代码，所以你想测试什么？我正好把它放在这里。从slideShowNavigation.updateArrows中调试它可能更有意义。不知道我的代码在其他方面有多疯狂。但我可能是错的，这就是为什么我喜欢你的观点，认为它更有意义。我来自java和AS

---

3背景，所以我习惯于为所有东西创建类，然后根据需要实例化它们。然后让事件进行类之间的通信。如果你认为它可以写得不同，更标准，请给我一个它应该如何格式化的例子。对不起-这是一个夸大其词，只是一个从自身访问对象分配目标的反应。删除：对于SlideShow和SlideShowNavigation之间的关系，我认为应该让SlideShowNavigation对象要求将SlideShow作为依赖项，例如构造函数参数，并在内部维护引用，这也让您可以使用多个实例。啊，非常感谢您知道我仍然在最佳实践范围内。因此，您的意思是不要为slideShow创建全局变量，而是将其保留在document ready函数的本地，然后将slideShow的引用作为参数传递给SlideShowNavigation构造函数。jfriend00回复中也提到了这一点。当幻灯片放映需要调用幻灯片导航方法时，我可以做什么。对于此设置，幻灯片放映不需要始终依赖幻灯片导航。我通常在AS3或java中为此使用事件。不确定我应该在JS中做什么。如果你能详细说明你认为正确的构造我的代码的方法，那就太好了。我真的不知道该说什么——你试图从对象原型中访问对象本身的分配的全局目标。对象没有知识，不应该依赖于自身之外的事物。这看起来只是调试代码，所以你想测试什么？我正好把它放在这里。从slideShowNavigation.updateArrows中调试它可能更有意义。不知道我的代码在其他方面有多疯狂。但我可能是错的，这就是为什么我喜欢你的观点，认为它更有意义。我来自java和AS3的背景，所以我习惯于创建所有的类，然后根据需要实例化它们。然后让事件进行类之间的通信。如果你认为它可以写得不同，更标准，请给我一个它应该如何格式化的例子。对不起-这是一个夸大其词，只是一个从自身访问对象分配目标的反应。删除：对于SlideShow和SlideShowNavigation之间的关系，我认为应该让SlideShowNavigation对象要求将SlideShow作为依赖项，例如构造函数参数，并在内部维护引用，这也让您可以使用多个实例。啊，非常感谢您知道我仍然在最佳实践范围内。因此，您的意思是不要为slideShow创建全局变量，而是将其保留在document ready函数的本地，然后将slideShow的引用作为参数传递给SlideShowNavigation构造函数。jfriend00回复中也提到了这一点。当幻灯片放映需要调用幻灯片导航方法时，我可以做什么。对于此设置，幻灯片放映不需要始终依赖幻灯片导航。我通常在AS3或java中为此使用事件。不确定我应该在JS中做什么。在构造函数中使用new调用构造函数时不要忘记传递参数。在构造函数中使用new调用构造函数时不要忘记传递参数。