[英]Accessing property of javascript object returns undefined, why?
I am trying to learn how to create JavaScript class in another .js file and access it from anywhere else.我正在尝试学习如何在另一个 .js 文件中创建 JavaScript 类并从其他任何地方访问它。 I have read a few examples, but can't seem to understand it completely.
我读了几个例子,但似乎不能完全理解它。
For example, how do I access the following:例如,我如何访问以下内容:
//code in file2.js getterTest = (function() { var _x = 15; return { doSomething: function() { _x += 5; }, get x() { return _x; } } }); //code in file1.js console.log(getterTest._x); //undefined console.log(getterTest.x); //should give 15 getterTest.doSomething(); console.log(getterTest.x); //should give 20
But it all gives undefined
and the .doSomething
method gives not a function .但这一切都给出了
undefined
并且.doSomething
方法给出了not a function 。
I will go home now and read more about closure as @Liam suggested and will see what is going on tomorrow.我现在要回家,按照@Liam 的建议阅读更多关于关闭的信息,然后看看明天会发生什么。
Ok lets break this down好的,让我们分解一下
getterTest = (function() {});
getterTest
is a function pointer. getterTest
是一个函数指针。 ie it is a variable that holds the un-envoked function.即它是一个保存未调用函数的变量。
If I do:如果我做:
getterTest = (function() {});
getterTest();
I invoke the function.我调用了这个函数。
If I do:如果我做:
getterTest = (function() {});
var result = getterTest();
result contains the function returned from the getterTest function, ie an object ( {}
) that contains a function and a gettable x property结果包含从 getterTest 函数返回的函数,即一个包含函数和 gettable x 属性的对象 (
{}
)
result = {
doSomething: function() {
_x += 5;
},
get x() {
return _x;
}
}
so I could do:所以我可以这样做:
getterTest = (function() {});
var result = getterTest();
result.x;
Really though;确实如此; what you want is for
getterTest
to work like this:你想要的是
getterTest
像这样工作:
getterTest = function() {
var _x = 15;
return {
doSomething: function() {
_x += 5;
},
get x() {
return _x;
}
}
}();
//invoke the function and store this in your variable by adding () above
//code in file1.js
//console.log(getterTest._x); //this is private so can't be accessed (you can only access things that are returned)
console.log(getterTest.x); //should give 15
getterTest.doSomething();
console.log(getterTest.x); //should give 20
You cannot access _x outside of the closure, because it's scope is the function.您不能在闭包之外访问 _x,因为它的作用域是函数。 This is , essentially, the point of closures.
本质上,这就是闭包的要点。 To keep things in scopes and to keep the "global context" clean.
将事物保持在范围内并保持“全局上下文”清洁。
You might notice I kinda use "function" and "object" interchangeably in the above.您可能会注意到我在上面交替使用“函数”和“对象”。 People not used to Javascript find this odd but there is a good reason.
不习惯 Javascript 的人会觉得这很奇怪,但这是有充分理由的。 In Javascript a function is an object o_O
在 Javascript 中,函数是一个对象o_O
Again this is one of the principals of what your trying to achieve here.同样,这是您在这里尝试实现的主要目标之一。 It's all basically about encapsulation
基本上都是关于封装的
please do as,请这样做,
//code in file2.js
getterTest = (function() {
var _x = 15;
return {
doSomething: function() {
_x += 5;
},
get x() {
return _x;
}
}
}()); // added '()'
//code in file1.js
console.log(getterTest._x); //undefined
console.log(getterTest.x); //15
getterTest.doSomething();
console.log(getterTest.x);
you need to instantiate the class and then call the functions.您需要实例化类,然后调用函数。
var g = getterTest();
console.log(g.x); //15
g.doSomething();
console.log(g.x); //20
If you call getterTest()
on each call, it will always get a new version of the class如果您在每次调用时调用
getterTest()
,它将始终获得该类的新版本
console.log(getterTest().x); //15
getterTest().doSomething();
console.log(getterTest().x); //15
I know this is not ideal for you.我知道这对你来说并不理想。 But this is the correct way to call the functions in
file2.js
Other choice is to rewrite file2.js
但这是调用
file2.js
函数的正确方法 其他选择是重写file2.js
Good luck!祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.