javascript - 为什么我收到此错误 : Uncaught TypeError: cannot read property 'john' of undefined

Question

我是 JavaScript 新手，可能没有使用正确的术语，所以请耐心等待。

http://jsbin.com/IPaDAJO/1/

我希望页面上显示以下内容大家好，我叫约翰·史密斯，今年 29 岁。您好，我叫 Suzie Alport，今年 24 岁。

我想了解为什么 Suzie 不能引用 John 的greet 方法？

<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>

谢谢

Answer 1

在创建分配给 suzie 属性的对象时，employees 处于未定义状态。在整个表达式完成之前对属性初始值设定项进行求值。

以下是上面事情发生的顺序:

1. 引擎创建一个名为 employees 的变量，其初始值为 undefined。
2. 引擎创建一个空白对象(最终将分配给员工)。
3. 引擎创建另一个空白对象(最终将成为 john 属性值)。
4. 它评估“John Smith”，并在#3 中的空白对象上创建一个名为name 的属性，并为其赋予该值。
5. 它会针对age、job 和greet重复该过程。
6. 它将该对象分配给上面#2 中对象的 john 属性。
7. 它创建了另一个空白对象(成为 suzie)。
8. 它评估“Suzie Alport”，并在#7 中的对象上创建一个名为name 的属性，并为其赋予该值。
9. 它会重复age 和job 的过程。
10. 它尝试计算表达式 employees.john.greet 并失败，因为 employees 是未定义。

如果你把它分成两部分，它就可以工作(直到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();

这是可行的，因为在我们尝试评估 employees.john.greet 之前，对上面 #2 中创建的对象的引用已分配给 employees 变量。

<小时/>

旁注:

避免在现代网页和应用程序中使用document.write。相反，使用 DOM methods 。 document.write 仅在初始页面加载期间按照您希望的方式工作；初始页面加载后，它将完全清除现有文档并开始在同一窗口中写入新文档。

例如，您可以将段落附加到 document.body 中，如下所示:

function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = String(msg);
  document.body.appendChild(p);
}

Live Example与上述两者( source )