2015-06-07 197 views
3

我正在學習有關Javascript中的this關鍵字。我正在嘗試使用內部對象函數訪問外部對象屬性的方法。例如:如何使用內部對象函數訪問外部對象屬性Javascript

var outer = { 
    prop : 'prop', 
    func : function(){ 
     return this.prop; 
    }, 
    inner : { 
     func : function(){ 
     return this.prop; 
     } 
    } 
    } 
    --> outer.func() : 'prop' 
    --> outer.inner.func() : undefined 

我明白爲什麼它不工作,但我不知道如何訪問外部對象的prop

+0

請查看我對@connexo的評論,然後請詳細說明爲什麼要這樣做。 – Alnitak

+0

因爲我有一個函數,它有一個參數,它是一個沒有名字的外部對象,並且有一個想要訪問外部函數的內部對象。我想知道是否有任何訪問它而不調用外部對象的名稱。 :)我看到現在沒有辦法。感謝您的建議@Alnitak。 –

回答

4

讓函數屬性的內部知道已分配給包含該屬性的對象的變量名稱通常是一個非常糟糕的主意。它引入了不需要的依賴關係,更重要的是防止存在多個此類對象的實例。

另一種構造是下面的「模塊模式」,使用一個閉包和一個允許任何嵌套屬性訪問該(本地)變量的變量。

var outer = (function() { 
    var prop = 'prop'; 
    return { 
     prop: prop, 
     func: function() { 
      return prop; 
     }, 
     inner : { 
      func : function() { 
       return prop; 
      } 
     } 
    } 
})(); 
+2

在這一點上可能值得注意的是,這反映了所謂的*模塊模式*。 – connexo

1
var outer = { 
    prop : 'prop', 
    func : function(){ 
     return this.prop; 
    }, 
    inner : { 
     func : function(){ 
     return outer.prop; 
     } 
    } 
    } 
+0

在_general_中,根據聲明爲該變量屬性的函數的名稱引用變量是個不錯的主意。它會導致不應該存在的依賴 - 通常應該使用該函數內的this引用來解決這個問題。 – Alnitak

+0

同意,但OP問如何使用當前構造訪問,我假設。 – connexo

0

您可以使用一個參考outer訪問的道具。例如:

var outer = { 
    prop : 'prop', 
    test : function() { 
     return this === outer; 
    }, 
    func : function(){ 
     return this.prop; 
    }, 
    inner : { 
     func : function(){ 
     return outer.prop; 
     }, 
     test: function() { 
     return this === outer; 
    } 
    } 
} 

console.log(outer.func()) // prop 
console.log(outer.test()) // true 
console.log(outer.inner.func()) // prop 
console.log(outer.inner.test()) // false 

https://jsfiddle.net/gk2fegte/2/

當你內在的對象中調用this.prop這並不指向外,但到inner對象。查看上面代碼中的test函數。

0

您正在使用JavaScript對象字面值和函數,以使「this」關鍵字的上下文不同。您可以在How does "this" keyword work within a function?中查看有關「this」關鍵字的更多詳細信息。在你的情況下,使用「outer.prop」來訪問