如何从JavaScript模块中的私有和公共函数访问公共财产？

Question

I'm wondering how to access a public property from private and public functions in a JavaScript module?

For example, if this is my module:

var PersonModule = (function(){

    var sayHello = function(){
        alert("Hello " + name);
    }

    var privateChangeNameToBob = function(){
        this.name = "Bob";
    }

    var changeName = function(){
        privateChangeNameToBob();
    }

    return {
        name: "",
        sayHello: sayHello,
        changeName: changeName
    }   
})();

Neither sayHello or the changeName functions work correctly because I don't know how to access the public name property. Is there a way to do this? I've worked around it by using private variables with getters and setters, but I'm wondering if I can do it without them.

Answer 1

You need a reference to the result object:

var PersonModule = (function(){
    function sayHello() {
        alert("Hello " + person.name);
    }
    function privateChangeNameToBob() {
        person.name = "Bob";
    }
    function changeName() {
        privateChangeNameToBob();
    }

    const person = {
        name: "",
        sayHello,
        changeName
    };
    return person;
})();

Of course, given your singleton IIFE module, you could just as well refer to PersonModule.name directly.

Answer 2

In the way you're doing it the name variable that you're using as public it's not the same as the one in your sayHello method. You have to understand that this is a MODULE not a class that needs to be instantiated. The IIFE already instantiates it for you. To do what you want you can use the below model. Use self. in the public methods/vars and nothing in the private. Then it will all work.

 var PersonModule = (function(){ var self = {}; var privateChangeNameToBob = function(){ self.name = "Bob"; }; self.sayHello = function(){ console.log("Hello " + self.name); }; self.changeName = function(){ privateChangeNameToBob(); }; self.name = ""; return self; })(); PersonModule.name = 'Test'; PersonModule.changeName(); PersonModule.sayHello(); 

Answer 3

You need to declare the property inside your closure. Check this example out to understand it better:

var ClassName = function(constructorParam) {
 
    var privateProperty = 'Im a private property';
    this.publicProperty = 'Im a public property';
 
    function privateMethod() {
        console.log('Private method');
    }
 
    this.publicMethod = function() {
        console.log('Public method');
        // We can call private properties
        console.log(privateProperty);
        // Either private methods
        privateMethod();
    }
 
}
 
var instance = new ClassName('Here goes something to constructor');
instance.publicMethod();

Answer 4

Your this.name in privateChangeNameToBob is setting name as a property of that function, not of the module. You can, instead, use it like so:

var PersonModule = (function(){
    var name = '';
    //...
    var privateChangeNameToBob = function(){
        name = "Bob";
    }
    return {
        name: name,
        sayHello: sayHello,
        changeName: changeName
    };
})();

See fiddle here: https://jsfiddle.net/yv8uqh5y/

One last note is a design pattern you may find useful. You can declare a variable named base or similar within your module scope, like so:

var PersonModule = (function(){
    var base = {};

    base.name = '';

    base.sayHello = function() {/* ... */};
    //...

    return {
        name: base.name,
        sayHello: base.sayHello,
        changeName: base.changeName
    };
})();

See fiddle here: https://jsfiddle.net/k63u9bfo/

This way you can reference the base of your module without having to worry what this maps to (eg. if you're trying to access the module internally using this within an anonymous function declared within a module method.