嵌套函数和吹走全局变量

时间:2013-09-05 06:40:14

标签: javascript

我需要了解一些事情,我有done up a plunk来帮助传达我的问题。

JavaScript的:

// "person" written as a plain object
var person = {
    showName: function () { return this.name; },
    setName: function (newName) { this.name = newName; }
};

//  room is class where nested function is a lambda
var room1 = {
    capacity: 10,
    exits: 2,
    count: 0,
    person: 'this property is a String, not an Object',
    addPerson: function (name) {
        this.count += 1;
        this.person = name;
        var nestedFunction = function (name) {
            this.person = name + ' name has been blown away';
        }(name);
    }
};

//  room is class where nested function is a method
var room2 = {
    capacity: 10,
    exits: 2,
    count: 0,
    person: 'this property is a String, not an Object',
    addPerson: function (name) {
        this.count += 1;
        this.person = name;
        function nestedFunction(name) {
            this.person = name + ' name has been blown away';
        }(name);
    }
};

HTML:

<input id="PersonObjectButton" type="submit" value="Click Me First to See Person showName Method Called"
           onclick="person.setName('Dave');alert(person.showName());" /> <br /> 
<input id="PersonObjectButtonAwry" type="submit" value="Click Me To Blow Away Global Variable" 
           onclick="room1.addPerson('Alan');alert(person);" /> <br />              
<input id="PersonObjectButtonFine" type="submit" value="Click Me to See Person showName Method Called" 
           onclick="room2.addPerson('Alan');alert(person.showName());" /> <br />  

如果您运行该插件并点击顶部按钮,则会显示名称“Steve”。那里没什么难的。当您单击下面的按钮时,它会显示“Alan现在在这里。其他名称已被吹走”。我想我明白了。基本上, room1 中的嵌套函数是一个函数和NOT方法。因为它不是具有任何对象成员的方法,所以它位于全局命名空间中并且它会消除 person 变量(因此,关键字不会保持对 room1 对象的引用。

这是我不太关注的第3个按钮。如果刷新页面并单击第3个按钮,您将看到该变量不会消除全局命名空间中的 person 变量。在这种情况下, this 关键字确实包含对 room1 对象的引用。

我的问题是,命名函数是什么,它不是作为函数表达式创建的,它使它成为 room2 对象的成员,尽管它是拼图?或者甚至为什么不吹掉全球变量呢?

2 个答案:

答案 0 :(得分:3)

这是因为room2中的nestedFunction定义和(name)是两个单独的语句。

var nestedFunction = function (name) {
    this.person = name + ' name has been blown away';
}(name);

此代码将创建一个函数,使用name变量调用它,然后将返回值赋给nestedFunction

function nestedFunction(name) {
    this.person = name + ' name has been blown away';
}(name);

另一方面,此代码创建一个命名函数。该操作的返回值始终未定义,因此您无法立即调用该函数。相反,它将被视为两个单独的陈述:

function nestedFunction(name) {
    this.person = name + ' name has been blown away';
};(name);

它创建一个函数,然后计算变量!

要在Javascript控制台中演示:

function nestedFunction(name) {
     console.log("called")
}("example")
// "example"

答案 1 :(得分:2)

room1中,您有一个立即执行的函数表达式(也称为IIFE)。你是对的this指的是全局对象。因此

var nestedFunction = function (name) {
    this.person = name + ' name has been blown away';
}(name);

相当于

window.person = name + ' name has been blown away';

在第二种情况下,您使用函数声明。即使它看起来像,它的功能仍然是而不是。代码实际上被解释为两个语句:

function nestedFunction(name) {
    this.person = name + ' name has been blown away';
} // end of function declaration
(name); // an expression statement which doesn't do anything

相同
function nestedFunction(name) {
    this.person = name + ' name has been blown away';
}
name;

或只是

function nestedFunction(name) {
    this.person = name + ' name has been blown away';
}

  

我的问题是,有关命名函数的内容是什么,它不是作为函数表达式创建的,它使它成为room2对象的成员,尽管它是嵌套的?

没有,成为room2的属性值。

  

或者甚至为什么不吹掉全局变量呢?

因为该函数永远不会执行。如果您在声明后添加nestedFunction();,则其行为与room1完全相同。