在这种情况下,为什么“This”在javascript函数中充当私有成员?

时间:2015-04-03 16:24:59

标签: javascript debugging this private-members

我尝试在一个函数中调用一个公共成员,它显示为'undefined',但该函数有效...

- 编辑 -
正如@Shane Voisard所指出的this是我职能之父的成员。

解决方案是给函数命名(正如Shane在答案中加下划线的那样)。

...或将函数附加到名称:

MySite.Public.Logo = { 

        inject : function(target){

             this.name = 'Logo';
             ...
        }
}

在控制台中:

MySite.Public.Modules.Logo.name; //return "Logo" 

依此类推... thx SO

- /编辑 -

我的文件系统是这样的

root folder :
-rw-r--r--  1 www-data www-data 1921 avril  3 17:31 0.js
drwxr-xr-x  9 www-data www-data 4096 avril  3 17:37 public

public folder :
-rw-r--r-- 1 www-data www-data  214 avril  3 17:37 0.js
drwxr-xr-x 2 www-data www-data 4096 avril  3 17:40 modules
drwxr-xr-x 2 www-data www-data 4096 avril  3 17:40 factories
drwxr-xr-x 2 www-data www-data 4096 avril  3 17:40 functions
drwxr-xr-x 2 www-data www-data 4096 avril  2 22:22 singleton

module folder : 
-rw-r--r-- 1 www-data www-data  28 mars  31 06:07 1.js
-rw-r--r-- 1 www-data www-data 348 avril  3 17:51 logo.js

按此顺序加载:
root/0.js初始化MySite = {}
public/0.js初始化MySite.Public = {}
module/1.js初始化MySite.Public.Modules = {}

当加载了所有其他所需文件时,public/0.js会调用MySite.Public.Modules.Logo(),这已在logo.js加载到浏览器时初始化。该功能有效,我可以从logo.js返回。但this成员中没有一个是公开访问的......

logo.js的内容:

MySite.Public.Modules.Logo = function(){

        this.name = 'Logo';

        this.build = function(){
                var logo = MySite.Public.Factories.HTML.make('logo');
                return logo;
        };  

        this.inject = function(target){
                var logo = this.build();
                var target = MySite.Public.Functions.ToolBox.getElementByName(target); //getElementByName is a custom function
                target.appendChild(logo);
        }; 

}

在控制台中:

MySite.Public.Modules.Logo.inject('body'); // undefined is not a function...
MySite.Public.Modules.Logo.build(); // undefined is not a function...
MySite.Public.Modules.Logo.name; // ""
typeof MySite.Public.Modules.Logo; // "function"

logo.js的内容: //来测试我给构造函数指定的函数

MySite.Public.Modules.Logo = function(target){

        this.name = 'Logo';

        this.build = function(){
                var logo = MySite.Public.Factories.HTML.make('logo');
                return logo;
        };  

        this.inject = function(target){
                var logo = this.build();
                var target = MySite.Public.Functions.ToolBox.getElementByName(target);
                target.appendChild(logo);
        };  

        this.inject(target);

}

在控制台中:

MySite.Public.Modules.Logo('body'); //works

仍然......

MySite.Public.Modules.Logo.inject('body'); // undefined is not a function...
MySite.Public.Modules.Logo.build(); // undefined is not a function...
MySite.Public.Modules.Logo.name; // ""
typeof MySite.Public.Modules.Logo; // "function"

请问有人知道我做错了吗?

1 个答案:

答案 0 :(得分:1)

尝试:

MySite.Public.Modules.Logo()
MySite.Public.Modules.name // "Logo"

当您调用徽标()时,this.name会引用MySite.Public.Modules对象。当您在对象方法上下文中调用函数时,javascript会在运行时隐式地将对象分配给调用函数内的this

如果需要在函数对象上定义的方法,请为函数指定一个名称,然后引用函数内的名称:

MySite.Public.Modules.Logo = function init(target){

        init.l_name = 'Logo';
        init.getName = function { return l_name };

        init.build = function(){
                var logo = MySite.Public.Factories.HTML.make('logo');
                return logo;
        };  

        init.inject = function(target){
                var logo = init.build();
                var target = MySite.Public.Functions.ToolBox.getElementByName(target);
                target.appendChild(logo);
        };  

        init.inject(target);

}

修改name property of a function object might be read only,具体取决于javascript环境。因此,您可能需要在内部使用不同的属性名称并公开一个漂亮的访问器方法。例如,在Chrome开发者工具中,我无法分配到init.name

MySite是您的全局对象,但您引用Innov24,就像Innov24 = MySite一样。

我强烈推荐Javascript: The Good Parts by Douglas Crockford