Głębokie funkcje zagnieżdżania w JavaScript

Question

Nie mogę znaleźć właściwego przykładu dla miłości mojego życia, jak to zrobić, a nawet jeśli jest to możliwe. W oparciu o moje zrozumienie poskładane z fragmentów exmaples, mam wymyślić następującą strukturę

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

Jednak to nie działa (oczywiście). Byłbym bardzo wdzięczny, gdyby ktoś wskazał mi właściwy kierunek!

Answer 1

To jest po prostu zrobić z:

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

Kod inaczej nie ma sensu. this Funkcja wewnętrzna nie odnosi się do samej funkcji, odnosi się do kontekstu obiektu, w którym funkcja jest wywoływana. I nawet nie wywołujesz funkcji w kodzie.

Jeśli powiem obj.func(), wówczas this w środku func będzie obj dla tego połączenia. Zatem przypisanie this.asd = true przypisze true do właściwości tego obiektu: "asd".

Jeśli chciał zrobić zagnieżdżone klasy, wygląda zupełnie inaczej:

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

    } 

    ClassA.prototype.method1 = function() { 

    }; 

    function ClassB() { 

    } 

    ClassB.prototype.method1 = function() { 

    }; 

    return ClassA; 
}()) 

tylko ClassA mogą teraz dokonywać wystąpień ClassB. To powinno osiągnąć takie same cele jak klasy zagnieżdżone w java.

Answer 2

Zobacz http://jsfiddle.net/CstUH/

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

Edit 1:

Można również użyć

new t().nestedOne.nest() 

zamiast

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

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

Edit 2:

Albo jeszcze bardziej skondensowana:

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

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

Answer 3

W funkcji JS są prime klasa obiektów i można uzyskać do nich dostęp bezpośrednio w kodzie [tj bez użycia odbicia).

Kod można umieścić wewnątrz t ciało będzie wykonywane, gdy faktycznie wykonujący t:

t(); 

Napisałeś t.nestedOne,nest(), ale t ma nestedOne nieruchomości - należy zrobić tak:

var t = { 

    nestedOne : { 

     nest : function() 
     { 

      alert("here"); 

     }   

    } 

}; 

t.nestedOne.nest();    ​ 

Radzę ci, abyś odbył wycieczkę na samouczku John Resig's Learning Advanced JavaScript, to było dla mnie bardzo pouczające.

Answer 4

Prosty program obsługi wywołania zwrotnego, który napisałem dzisiaj jako przykład tego, w jaki sposób robię głębokie zagnieżdżanie. Przepraszam, jeśli to nie kolana pszczół, jeśli chodzi o styl kodowania, sprawiło, że koncepcja stała się dla mnie nieco jaśniejsza.

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

żywo: http://jsfiddle.net/Ps5Uf/

• UWAGA: Aby wyświetlić wyjścia konsoli, wystarczy otworzyć inspektora w chromie i kliknij na zakładkę "Konsola".