為什么我收到此錯誤：未捕獲的TypeError：無法讀取undefined的屬性'john'

Question

我是JavaScript的新手，可能沒有使用正確的術語，所以請耐心等待。

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

我希望頁面上顯示以下內容您好我的名字是John Smith，我今年29歲。 您好，我的名字是Suzie Alport，我今年24歲。

我想明白為什么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>

謝謝

Answer 1

當您創建要分配給suzie屬性的對象時， employees是undefined 。 在整個表達式完成之前評估屬性初始值設定項。

以下是事情發生的順序：

1. 引擎創建一個名為employees的變量，其初始值為undefined 。
2. 引擎創建一個空白對象（最終將分配給employees ）。
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 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);
}

以上兩者的實例 （ 來源 ）