从另一个对象类方法调用一个对象及其方法

Question

我为一些动画创建了一些类/对象。我创建了一个名为 Navigation() 的类，以及另一个名为 Stars() 的类。每个类都有自己的方法和与之关联的对象。我在 Navigation() 类中创建了一个方法，该方法尝试运行一个方法和与之关联的对象。 Navigation 类方法不会运行 Stars 方法。同样，我没有使用导航类对象调用 Stars 类方法。如果有意义的话，我正在尝试从导航类方法中调用 Stars 对象的方法。我是 OOP javascript 的新手，我无法知道这个问题的术语来研究它。如果还有其他讨论、文章或线程也可以指出我，我将不胜感激。或者只是对问题的一般回答。

//Problem is in the Navigation class method spaceWarp()
function Navigation(selector){//Navigation Class
  this.selector = selector;

this.spaceWarp = function(selector1,selector2,speed1,speed2,speed3,speed4,delay1,delay2){//spaceWarp Method function
    var button = $(selector);
    var starFrame  =$(selector1);
    var frameSpeed = speed1;
    var delay1 = delay1;
    var spaceBK = $(selector2);
    var bkTime = speed2;
    var starSpeed = speed3;
    var delay2 = delay2;
    var stopStarSpeed = speed4;

    button.click(function(){
        starFrame.velocity({'top': '0vh'},frameSpeed);//works
        setTimeout(function () {
           spaceBK.velocity('fadeIn',{duration: bkTime});//works
           stars1.flyingStars(starSpeed);//does not work
           stars2.flyingStars(starSpeed * 1.5);//does not work
           stars3.flyingStars(starSpeed * 2.5);//does not work
        }, delay1);
        setTimeout(function () {
           stars1.stopStars(stopStarSpeed);//does not work
           stars1.stopStars(stopStarSpeed);//does not work
           stars1.stopStars(stopStarSpeed);//does not work
         }, delay2);
    });
};//End spaceWarp Method
}//End Navigation Class

function Stars(selector){//Star Class

this.selector = selector;
this.stopStars = function(speed){//stopStars method
    var object = $(selector);
    object.css('background-position-y', '0vh');
    object.velocity({'background-position-y': '100vh'},speed,'easeOutCubic');
    object.velocity('stop');
};
this.flyingStars = function(speed){
    var self = this;
    var object = $(self.selector);
    var callback = function(){self.flyingStars(speed);};
    object.css('background-position-y', '0vh');
    object.velocity({'background-position-y': '100vh'},speed,'linear',callback);
};
}//End Star Class 
//Initialize objects
var spaceButton = new Navigation('#spaceWarp');
var stars1 = new Stars('#stars1');
var stars2 = new Stars('#stars2');
var stars3 = new Stars('#stars3'); 
//run object
 spaceButton.spaceWarp('#starFrame','#spaceBK','3000','3500','3000','6000','2100','7000');

Answer 1

欢迎来到 javascript 的世界，您不只是使用它来绘制和移动框 :)

回答你的问题：

//Initialize objects
var spaceButton = new Navigation('#spaceWarp');
var stars1 = new Stars('#stars1');
var stars2 = new Stars('#stars2');
var stars3 = new Stars('#stars3'); 

您的对象的初始化很棒，但这里是挑战。你如何使stars1、stars2 和stars3 可用于spaceButton 对象？在该对象的范围内，stars1、stars2 和 stars3 是未定义的变量。如果您的对象是全局可用的，则通过 this 运算符进行检查。

通过this.starsX访问starsX对象

您需要使用三个引用更新您的函数。

this.spaceWarp = function(selector1,selector2,speed1,speed2,speed3,speed4,delay1,delay2, stars1, stars2, stars3){//spaceWarp Method function
var button = $(selector);
var starFrame  =$(selector1);
var frameSpeed = speed1;
var delay1 = delay1;
var spaceBK = $(selector2);
var bkTime = speed2;
var starSpeed = speed3;
var delay2 = delay2;
var stopStarSpeed = speed4;
var stars1 = stars1;
var stars2 = stars2;
var stars3 = stars3;

button.click(function(){
    starFrame.velocity({'top': '0vh'},frameSpeed);//works
    setTimeout(function () {
       spaceBK.velocity('fadeIn',{duration: bkTime});//works
       stars1.flyingStars(starSpeed);//does not work
       stars2.flyingStars(starSpeed * 1.5);//does not work but now starsX exists
       stars3.flyingStars(starSpeed * 2.5);//does not work
    }, delay1);
    setTimeout(function () {
       stars1.stopStars(stopStarSpeed);//does not work
       stars1.stopStars(stopStarSpeed);//does not work
       stars1.stopStars(stopStarSpeed);//does not work
     }, delay2);
});
};//End spaceWarp Method

并通过传递 starsX 对象的引用来调用函数

spaceButton.spaceWarp('#starFrame','#spaceBK','3000','3500','3000','6000','2100','7000', stars1, stars2, stars3);