properties - Why this JavaScript property returns empty string, while JavaScript function works fine? - Stack Overflow

admin管理员组

文章数量:1397156

Consider this simple JavaScript module pattern:

var human = (function () {
    var _name = '';
    return {
        name: _name,
        setName: function (name) {
            _name = name;
        }
    }
})();
human.setName('somebody');
alert(human.name); // shows an empty string
human = (function () {
    var _name = '';
    return {
        name: function() {
            return _name;
        },
        setName: function (name) {
            _name = name;
        }
    }
})();
human.setName('somebody');
alert(human.name()); // shows 'somebody'

Why the second closure works fine, while the first closure is not working? See example here.

Please also see this fiddle, which proves that simple properties can be used instead of getter functions.

Consider this simple JavaScript module pattern:

var human = (function () {
    var _name = '';
    return {
        name: _name,
        setName: function (name) {
            _name = name;
        }
    }
})();
human.setName('somebody');
alert(human.name); // shows an empty string
human = (function () {
    var _name = '';
    return {
        name: function() {
            return _name;
        },
        setName: function (name) {
            _name = name;
        }
    }
})();
human.setName('somebody');
alert(human.name()); // shows 'somebody'

Why the second closure works fine, while the first closure is not working? See example here.

Please also see this fiddle, which proves that simple properties can be used instead of getter functions.

• javascript
• properties
• closures
• getter-setter

Share Improve this question Follow asked Feb 5, 2013 at 12:25 user1968030user1968030

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

In Javascript

• Strings and primitive types (boolean and numeric) are passed by value
• Objects, arrays, and functions are passed by reference

As name is a string name: _name will store the current value of _name and not the reference to _name.

setName in your example will modify only _name.

getName will access _name which holds the current value.

.name will access the copied value which was set during the initialisation (name: _name).

See also SO: Javascript by reference vs. by value

Try with this:

var human = (function () {
    var _name = '';
    var returnObj = {};
    returnObj.name = _name;
    returnObj.setName = function (name) {
        _name = name;
        returnObj.name = name;
    };

    return returnObj;
})();
human.setName('somebody');
alert(human.name);

The problem with your code was that setName was assigning a value to the _name variable and you ware accessing the name property of the returned object.

本文标签：