如何使用javascript中同一對象內的公共方法訪問私有變量？

Question

我正在嘗試通過此鏈接了解封裝

 function Test() { var prop1 = "one"; this.prop2 = "two"; function meth1() { console.log("Inside meth1" + prop1); } this.meth2 = function() { console.log(this.prop2 + "................, " + meth1()); }; this.meth4 = function(val) { prop1 = val; console.log("inside meth4" + prop1); } } var tc = new Test(); var result1 = tc.meth2(); var result3 = tc.prop1; 

根據通過this.meth2訪問的鏈接meth1()應該可以工作，但令我驚訝的是我未定義。

您能否說明一下這里發生的事情。 我正在為此使用IE 9

LOG: Inside meth1one 
LOG: two................, undefined 

Answer 1

Rajesh的答案中的代碼很棒，但是我想補充一些有關JavaScript封裝和“ this”行為的信息。

首先，在我的示例中，我不會使用“ new”，因為它很邪惡。 “新”強制您在函數內部使用此函數，並且其行為並不是真正透明的。 沒有它，您的代碼本身和范圍的用法將更容易理解。

關於在代碼中引用不同的變量有兩個重要的事實：

1）'this'指向使用它的對象。 這可能會導致混淆，因為函數是一類對象，但是子函數中的“ this”指向父函數（Test（））。 不要在函數內部使用“ this”以避免混淆，請在對象內部使用它。

2）JavaScript具有功能范圍，這就是封裝的基本原理。 內部函數可以看到在外部對象中聲明的變量。 在內部函數中用相同的名稱重新聲明變量會覆蓋外部變量，而不是創建優先級更高的內部副本。

如果在不使用函數內部使用“ new”和“ this”的情況下構建代碼，則您的問題應該是不言而喻的：

function build_test_object() {

    //This object will house all the functionality we will need to return
    var that = {};

    //This is a variable visible only while executing build_test_object
    var prop1 = "one";

    //display_prop1 is a function that is visible only inside build_test_object
    //This way it will be protected after you use build_test_object: the function itself cannot be changed even if the object is altered
    var display_prop1 = function () {
        window.alert(prop1);
    }

    //And now we assign this function to the object we will return.
    that.disp_prop = display_prop1;

    //Returning the finished object
    return that;
}

//Create the object
var test_object = build_test_object();
//Display the property
test_object.disp_prop();

請注意，如何不能從build_test_object代碼外部更改prop1和display_prop1。 即使替換了test_object.disp_prop，它們也將保持不變（如果build_test_object中的其他方法使用prop1或display_prop1，則這一點很重要）。 這被稱為閉包：build_test_object（）已解決，其函數范圍內的任何未暴露的東西都是不可變的。

對於JavaScript的范圍，閉包和正確的封裝方法的全面說明，我建議道格拉斯·克羅克福德（Douglas Crockford）撰寫的“ JavaScript：The Good Parts”，因為這超出了該站點上一個問題的范圍。

Answer 2

除了@Michael的答案外，當您嘗試將函數作為類時，請記住要返回值。 此值將公開可用。 在類結構中， var result3 = tc.prop1; 應該返回undefined 。 訪問它的唯一方法應該是函數。 以下是代表

 function Test() { // To hold context as object inside functions var self = this; self.prop1 = "one"; self.prop2 = "two"; // method to access prop1 function meth1() { return self.prop1; } // method to access prop2 function meth2() { return self.prop2; }; // Properties that will be publically available. // Never add private variables here. return{ "meth1":meth1, "meth2":meth2 } } var tc = new Test(); var result1 = tc.meth1(); // Should be "one" var result2 = tc.prop1; // Should be "undefined". Private property var result3 = tc.meth2(); // Should be "two" console.log(result1,result2,result3) 

Answer 3

您已成功從this.meth2()內部調用meth1() this.meth2() 。 那是您Inside meth1one console.log()內部meth1() console.log()顯示的Inside meth1one消息的地方。

在undefined你的日志的下一行看到了價值僅僅是因為你試圖顯示返回的值meth1()但meth1()沒有返回值！ 因此，其返回值是undefined ，如this.meth2() console.log()所顯示。

調試技巧

我建議在JavaScript調試器中逐步執行代碼，而不僅僅是依賴console.log() 。 一步步進入每個函數和每一行代碼。 這將幫助您了解代碼中的控制流。

為了使此過程更容易，請多行編寫函數，而不要使它們成為一排直線，例如：

function meth1() {
    console.log( "Inside meth1" + prop1 );
}