[英]Why am I getting this error: Uncaught TypeError: cannot read property 'john' of undefined
I am new to JavaScript and may not be using correct terms so please bear with me. 我是JavaScript的新手,可能没有使用正确的术语,所以请耐心等待。
http://jsbin.com/IPaDAJO/1/ http://jsbin.com/IPaDAJO/1/
I am expect the following be displayed on the page Hello my name is John Smith and I am 29 years old. 我希望页面上显示以下内容您好我的名字是John Smith,我今年29岁。 Hello my name is Suzie Alport and I am 24 years old.
您好,我的名字是Suzie Alport,我今年24岁。
I want to understand why can't Suzie refer to John's greet method? 我想明白为什么Suzie不能提到John的问候方法?
<script>
var employees = {
john: {
name: "John Smith",
age: 29,
job: "web developer",
greet: function(){
document.write("Hello my name is " + this.name + " and I am " + this.age + " years old. ");
}
},
suzie: {
name: "Suzie Alport",
age: 24,
job: "nursery assistant",
greet: employees.john.greet
}
};
employees.john.greet();
employees.suzie.greet();
</script>
Thanks 谢谢
As of the time that you're creating the object you're assigning to the suzie
property, employees
is undefined
. 当您创建要分配给
suzie
属性的对象时, employees
是undefined
。 The property initializers are evaluated before the overall expression is complete. 在整个表达式完成之前评估属性初始值设定项。
Here's the order in which things happen above: 以下是事情发生的顺序:
employees
with the initial value undefined
. employees
的变量,其初始值为undefined
。 employees
). employees
)。 john
property value). john
属性值)。 "John Smith"
and creates a property on the blank object from #3 called name
, giving it that value. "John Smith"
并在#3名为name
的空白对象上创建一个属性,为其赋予该值。 age
, job
, and greet
. age
, job
和greet
。 john
property on the object from #2 above. john
属性。 suzie
). suzie
)。 "Suzie Alport"
and creates a property on the object from #7 called name
, giving it that value. "Suzie Alport"
并在#7 name
为对象创建一个属性,赋予它该值。 age
and job
. age
和job
的过程。 employees.john.greet
and fails because employees
is undefined
. employees.john.greet
表达式并因为employees
undefined
而失败。 If you break it into two pieces, it works (until document.write
blows things up): 如果你把它分成两部分,它可以工作(直到
document.write
搞砸了):
var employees = {
john: {
name: "John Smith",
age: 29,
job: "web developer",
greet: function(){
document.write("Hello my name is " + this.name + " and I am " + this.age + " years old. ");
}
}
};
employees.suzie = {
name: "Suzie Alport",
age: 24,
job: "nursery assistant",
greet: employees.john.greet
};
employees.john.greet();
employees.suzie.greet();
That works because before we try to evaluate employees.john.greet
, a reference to the object created in #2 above has been assigned to the employees
variable. 这是有效的,因为在我们尝试评估
employees.john.greet
之前,已将对上面#2中创建的对象的引用分配给employees
变量。
Side note: 边注:
Avoid using document.write
in modern web pages and applications. 避免在现代网页和应用程序中使用
document.write
。 Instead, use DOM methods . 相反,使用DOM方法 。
document.write
only works the way you likely want it to during the initial page load; document.write
仅在初始页面加载期间以您希望的方式工作; after initial page load, it will wipe out the existing document entirely and start writing a new document in the same window. 在初始页面加载后,它将完全擦除现有文档并开始在同一窗口中编写新文档。
For instance, you can append paragraphs to the document.body
like this: 例如,您可以将段落附加到
document.body
如下所示:
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
Live Example with both of the above ( source ) 以上两者的实例 ( 来源 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.