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

Question

我为某些动画创建了一些类/对象。我创建了一个名为Navigation（）的类，另一个类名为Stars（）。每个类都有自己的方法和与之相关的对象。我在Navigation（）类中创建了一个方法，该方法试图运行一个方法和与之关联的对象。 Navigation类方法不会运行Stars方法。再次，我没有使用导航类对象调用Stars类方法。我想从Navigation Class Method中调用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.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);