Question

我的问题与此Javascript revealing module pattern, public properties

完全相同

在那个帖子中，给出了答案，但没有给出“为什么”。以下是我自己的例子重述的同一个问题：

myApp.User = function () {
    var firstName = 'Default',
        lastName = 'Default';

    function setFirstName(name) {
        firstName = name;
    }

    function setLastName(name) {
        lastName = name;
    }

    function getFirstName() {
        return firstName;
    }

    function getLastName() {
        return lastName;
    }

    return {
        getLastName: getLastName,
        **getFirstName: getFirstName**,
        setLastName: setLastName,
        setFirstName: firstName
    };
};

在这种情况下，User（）。getFirstName总是逃避“默认” - 即使我通过setFirstName函数将其更改为其他值。

如果我用setFirstName替换：

 return {
    getLastName: getLastName,
    **getFirstName: getFirstName**,
    setLastName: setLastName,
    setFirstName: firstName
};

我可以访问更改的值。我理解var firstName是按值传递的，这就是为什么不反映更新的值。我不明白这个功能有什么特别之处。指向函数内部值的指针在哪里？为什么所有功能“神奇地”都可以访问更新？

Answer 1

指向函数生命值的指针在哪里？

在函数的范围中 - 包含它可以访问的所有变量。此访问权限使函数实际为closure。

为什么所有功能“神奇地”都可以访问更新？

因为所有函数共享在更高范围内声明的变量。

Answer 2

他们不会神奇地＆＃34;获得对更新的访问权限。他们在<{1}}内，这就是他们可以访问变量位置的原因。

执行myApp.User时，因为myApp.User().getFirstName()在函数（范围）内，所以它将能够访问在此函数内部和此函数外部声明的变量。

getFirstName

在上面的示例中，function a(){ var b = "hello"; return { setB: function(c){ b = c; }, getB: function(){ return b; } }; } var obj = new a(); obj.getB(); //hello obj.setB("new"); obj.getB(); //new和getB都存在于您的对象中，他们可以访问setB范围内的所有变量。

Answer 3

看看你在第一个例子中做了什么

setFirstName: firstName

setFirstName不是对函数“setFirstName”的引用，而是变量'firstName'...您无权访问函数'setFirstName'。该功能仍然无法使用，因此您无法按照自己的意愿修改 firstName 。

它超出范围 - 你没有退回它，所以它可以被外面的世界使用，可以这么说。它不在函数范围的“外部”可用。返回函数（），并应用“setFirstName”，如下所示。

试试这个;

myApp.User = function () {
    var firstName = 'Default',
        lastName = 'Default';

    function setFirstName(name) {
        firstName = name;
    }

    function setLastName(name) {
        lastName = name;
    }

    function getFirstName() {
        return firstName;
    }

    function getLastName() {
        return lastName;
    }

    return {
        getLastName: getLastName,
        getFirstName: getFirstName,
        setLastName: setLastName,
        setFirstName: setFirstName
    };
}();
myApp.User.setFirstName('bill');
myApp.User.getFirstName();

Answer 4

var User = function () {
    var firstName = 'Default',
        lastName  = 'Default';

    return {
        getLastName:  function() { return lastName; },
        getFirstName: function() { return firstName; },
        setLastName:  function(name) { lastName = name; },
        setFirstName: function(name) { firstName = name; },
        getName:      function() { return firstName + ' ' + lastName; }
    };
};

var u = User(),
    v = User();
console.log( u.getName() + ' - ' + v.getName() );
// Outputs: 'Default Default - Default Default'
u.setFirstName( 'Alice' );
u.setLastName( 'Bob' );
console.log( u.getName() + ' - ' + v.getName() );
// Outputs: 'Alice Bob - Default Default'

Javascript揭示模块模式和变量

4 个答案: