0

我是 JavaScript 新手，可能没有使用正确的术语，所以请多多包涵。

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

我希望页面上显示以下内容您好，我的名字是 John Smith，我今年 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>

谢谢

4

1 回答 1

2

在您创建要分配给suzie属性的对象时，employees是undefined. 在整个表达式完成之前评估属性初始值设定项。

这是上面发生的事情的顺序：

  1. 引擎创建一个employees以初始值调用的变量undefined。
  2. 引擎创建一个空白对象（最终将分配给employees）。
  3. 引擎创建另一个空白对象（最终将成为john属性值）。
  4. 它评估"John Smith"并在来自 #3 的空白对象上创建一个名为 的属性name，并为其赋予该值。
  5. 它对 、 和 重复age该job过程greet。
  6. 它将该对象分配给john上面#2 中的对象的属性。
  7. 它创建另一个空白对象（成为suzie）。
  8. 它评估"Suzie Alport"并在来自 #7 的对象上创建一个名为 的属性name，并为其赋予该值。
  9. 它对age和重复该过程job。
  10. 它尝试评估表达式employees.john.greet并失败，因为employeesis undefined。

如果你把它分成两部分，它就可以工作（直到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 方法。仅在初始页面加载document.write期间以您可能希望的方式工作；初始页面加载后，它将完全清除现有文档并开始在同一窗口中写入新文档。

例如，您可以将段落附加到document.body以下内容：

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

以上两种情况的实时示例（来源）

于 2013-09-13T12:14:54.173 回答