2012-08-26 150 views
5

我無法找到一個恰當的例子,說明如何做到這一點,甚至是否可能。基於我從零散的片段中得到的理解,我想出了以下結構JavaScript中的深層嵌套功能

  var t = function() 
     { 
      this.nestedOne = function() 
      { 
       this.nest = function() 
       { 
        alert("here"); 
       } 
      } 
     } 
     t.nestedOne.nest(); 

但是,這不起作用(很明顯)。如果有人能指出我正確的方向,我將不勝感激!

+2

你想實現什麼? – NicoSantangelo

+0

我想模仿通常在編程語言中看到的嵌套類。它使得OOP非常有組織,圖書館更有條理。我知道JavaScript並不是真正爲複雜的OOP構建的,但不管它有什麼用處。 JavaScript對函數有一種非正統的方法,但我可以完全明白它爲什麼如此強大。 –

回答

3

即簡單地做:

var t = { 
    nestedOne: { 
     nest: function() { 
      alert('here'); 
     } 
    } 
}; 

您的代碼,否則就沒有意義了。內函數不涉及函數本身,它指的是函數被調用的對象上下文,而且你甚至不會調用代碼中的函數。

如果我說obj.func()然後this裏面func將爲obj爲那個電話。因此,分配this.asd = true將爲該對象的"asd"屬性分配true

如果你想做一個嵌套類,它看起來非常不同:

ClassA = (function() { 
    function ClassA() { 

    } 

    ClassA.prototype.method1 = function() { 

    }; 

    function ClassB() { 

    } 

    ClassB.prototype.method1 = function() { 

    }; 

    return ClassA; 
}()) 

只有ClassA的現在可以ClassB的實例。這應該實現與java中的嵌套類相同的目標。

+0

你已經提供了一個答案,表明他是一種更乾淨的方式去做人們通常想要的東西,但是他看起來總是困惑於函數的工作方式(裏面的代碼還沒有運行)你是否想要包含一個關於它? – Incognito

+0

@Incognito sure – Esailija

+1

@Incognito tbh,他的理解是如此搞砸,我不知道該怎麼辦。 – Esailija

2

http://jsfiddle.net/CstUH/

function t(){ 
    function f(){ 
     this.nest = function() 
     { 
      alert("here"); 
     } 
    } 
    this.nestedOne = new f(); 
} 
var myt=new t(); 
myt.nestedOne.nest() 

編輯1:

您還可以使用的

new t().nestedOne.nest() 

代替

var myt=new t(); 
myt.nestedOne.nest() 

http://jsfiddle.net/CstUH/1/

編輯2:

甚至更​​緊湊:

function t(){ 
    this.nestedOne = new function(){ 
     this.nest = function(){ 
      alert("here"); 
     } 
    } 
} 
new t().nestedOne.nest() 

http://jsfiddle.net/CstUH/2/

1

在JS功能素類對象,您可以直接訪問它們在代碼[即沒有使用反射或所以]。

你把裏面將執行t體實際執行t當代碼:

t(); 

你寫t.nestedOne,nest(),但t沒有nestedOne財產 - 你應該這樣做:

var t = { 

    nestedOne : { 

     nest : function() 
     { 

      alert("here"); 

     }   

    } 

}; 

t.nestedOne.nest();    ​ 

我建議你在John Resig's Learning Advanced JavaScript教程上進行一次旅行,這對我來說非常有啓發性。

0

我今天寫了一個簡單的回調處理程序,作爲我如何進行深層嵌套的示例。我很抱歉,如果不是代碼風格的蜜蜂跪下,它會讓我的概念更清晰一些。

function test() { 
     this.that = this; 
     this.root = this; 

     this.jCallback = new Array(new Array()); // 2d 
     this.jCallbackCount = -1; 
     this.str = "hello"; 


     // Callback handler... 
     this.command = { 
     that : this, // let's keep a reference to who's above us on the food chain 
     root : this.root, // takes us back to the main object 

     // add : function() { var that = this; console.log(that.that.str); }, 
     add : function(targetFnc, newFunc) { 
      var that = this; 
      var home = that.that; // pretty much root but left in as an example of chain traversal. 
      var root = this.root; // useful for climbing back up the function chain 

      // console.log(that.that.str); 
      home.jCallbackCount++; 
      // target, addon, active 
      home.jCallback[home.jCallback.length] = { 'targetFunc' : targetFnc, 'newFunc' : newFunc, 'active' : true, 'id': home.jCallbackCount}; 

      console.log('cbacklength: ' + home.jCallback.length); 
      console.log('added callback targetFunction:[' + targetFnc + ']'); 

      return home.jCallbackCount; // if we want to delete this later...  
     }, 

     run : function(targetFnc) { 
      var that = this; 
      var home = that.that; 
      console.log('running callback check for: ' + targetFnc + ' There is : ' + (home.jCallbackCount + 1) + 'in queue.'); 
      console.log('length of callbacks is ' + home.jCallback.length); 

      for(i=0;i < home.jCallback.length - 1;i++) 
      { 
       console.log('checking array for a matching callback [' + targetFnc + ']...'); 
       console.log('current item: ' + home.jCallback[i]['targetFunc']); 
       if(home.jCallback[i]['targetFunc'] == targetFnc) 
       { 
       // matched! 
       home.jCallback[i]['newFunc'](); 
       } 

       // console.log(that.that.jCallback[i].targetFunction); 
      } 
     } 
     }; 

    } 

    test.prototype = { 
     say : function() { 
     var that = this; 
     console.log('inside'); 
     // that.command('doSay'); 
     that.command.run('doSay'); 
     console.log(that.str); 
     } 


    } // end proto 



    // BEGIN TESTING ************************************************************************** 
    // BEGIN TESTING ************************************************************************** 
    // BEGIN TESTING ************************************************************************** 
    var testing = new test(); 


    testing.command.add('doSay', function() { console.log('213123123'); }); 
    testing.command.add('doSay', function() { console.log('12sad31'); }); 
    testing.command.add('doSay', function() { console.log('asdascccc'); }); 


    testing.say(); 

直播: http://jsfiddle.net/Ps5Uf/

  • 注意:要查看控制檯輸出,只需打開檢查中鉻,然後單擊 「控制檯」 選項卡上。