從另一個對象類方法調用對象及其方法

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);