使用原型方法訪問構造函數中的變量

Question

爲什麼我無法使用原型方法.nextSlide訪問構造函數中的變量HTML？

function test(root){ 

    var HTML = getAllHTML(); 

    function getAllHTML(){ 

     var boss, expoHTML; 
     var boss = document.querySelector(root); 

     expoHTML = { 

      slides: boss.querySelectorAll(".slide"), 
      prev: boss.querySelector(".control.prev"), 
      next: boss.querySelector(".control.next"), 
      current: boss.querySelector(".slide-current"), 
      total: boss.querySelector(".slide-total") 

     } 

     return expoHTML; 

    } 


} 


EXPOjs.prototype.nextSlide = function(){ 

    alert(HTML.current) 

} 


var newTEST = new test(".ieps"); 
newTEST.nextSlide(); 

Answer 1

這是一個「範圍」問題; Javascript中的每個變量都有一個範圍，這意味着：「誰可以看到這個變量」？

在您的情況下，HTML在函數test()中定義。這意味着，這將是明顯的：

• 在函數test()
• 中定義任何函數內test()

就是這樣。在test()之外，HTML將爲空。

現在，我可以看到你正在使用test（）作爲構造函數。有了這個，你進入了對象創建和Javacript的美妙世界。深呼吸：d

當你這樣做：

function Person(age){ 
    this.age = age; 
} 

然後你做：

var pavlo = new Person(23); 

基本上是 「新」 有效果：

• 創建一個空的物體
• 運行你的功能，以便this個指向新創建的對象
• 新創建的對象分配給pavlo

這意味着欺騙，你可以做

var pavlo = new Person(23); 
console.log(pavlo.age); 

然後有原型的功能。 如果定義了這樣的功能：在Person'sprototype對象定義也將成爲使用該構造函數創建的任何對象訪問

Person.prototype.setAge = function(newAge){ 
    this.age = newAge(); 
} 

任何函數（或與此有關的任何變量）。另外，this變量將成爲進行該調用的對象。

所以，如果您有：

function Person(age){ 
    this.age = age; 
} 

Person.prototype.setAge = function(newAge){ 

    `this` at this point is the object "calling" 
    this.age = newAge(); 
} 

var pavlo = new Person(23); 
console.log(pavlo.age); 

// pavlo is making the call. So, within `setAge()`, `this` will be `pavlo` 
pavlo.setAge(26); 

因此，對於您的解決方案：

function test(root){ 
    this.HTML = getAllHTML(); 
    // etc. 
} 

然後你的警惕應該是：

test.prototype.nextSlide = function(){ 
    alert(this.HTML.current); 
} 

注意，在Javascript中你應該具有以大寫字母開頭的構造函數（請參閱：Test而不是test）。

如果您不希望從外部訪問HTML，那麼約定會將變量名稱前面的下劃線（稱爲_HTML）放在前面。

還有是其他的方式，如果你絕對不得不讓這個變量遠離開發者。然而，這並不直截了當，大多數開發人員會說 - 絕對不值得。

一對夫婦的良好讀取（但是，我必須說，我看他們的時候，我開始用JS，他們困惑的時候了我的地獄的：d）

• http://javascript.crockford.com/private.html（你知道克羅克福德，右：？d）
• http://phrogz.net/JS/classes/OOPinJS.html（讀它，只有當你有真的瞭解以前的文章）

UPDATE：這又是一個夢幻般的關於此事的文章：https://blog.jcoglan.com/2012/01/19/the-cost-of-privacy

享受！