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

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.prototype.setAge = function( newAge){
   this.age = newAge();
}

在Person's prototype對象中定義的任何函數（或與此相關的任何變量）也可以被使用該構造函數創建的任何對象訪問。 另外， this變量將是進行該調用的對象。

所以，如果你有：

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

Person.prototype.setAge = function( newAge){

   //`this` at this point is the object "calling" <-- This will throw an error if left uncommented.
   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 （你知道 crockford，對吧？：D）
• http://phrogz.net/JS/classes/OOPinJS.html （只有真正理解了上一篇文章后才能閱讀）

更新：這是關於此事的另一篇精彩文章： https : //blog.jcoglan.com/2012/01/19/the-cost-of-privacy

享受！

Answer 2

您正在嘗試訪問 Test 中的屬性，但 test 不是 Expojs 的一部分。 然后你試圖擴展Expojs的prototype ，這是一個壞主意，因為為你無法控制的代碼創建新成員從來都不是一個好主意。

如果您希望nextSlide成為 Test 的一部分，那么您必須使用Test.prototype.nextSlide() ，這將為名為nextSlide()的test對象創建一個新的prototype成員。 那么public實例成員就可以訪問了，比如this.getallHTML = function(){//usual stuff};

您需要將此關鍵字用於要在基本級別訪問的變量。 之后是abstraction的問題，如果你想保護代碼不被其他人錯誤地使用，你必須考慮這個問題。

我剛剛在 JavaScript 中做了很多關於面向對象的教程，正如你所看到的，到目前為止我已經學到了很多東西（仍在學習，所以我在這里可能沒有所有東西），但我建議做更多的研究。