在 JavaScript 对象中创建变量时，代码如何知道在哪里添加新变量？ [复制]

Question

我正在学习 JavaScript 课程，我很好奇当我将代码注销到控制台时，代码如何知道在对象属性上方包含 age 值？这是课程中的代码：

var john = {
    name: 'John',
    lastName: 'Smith',
    yearOfBirth: 1990,
    job: 'teacher',
    isMarried: false,
    family: ['Jane', 'Mark', 'Bob'],
    calculateAge: function() {
        this.age = 2016 - this.yearOfBirth;
   }
};

john.calculateAge();
console.log(john);

如果我理解正确，我会在这一行创建一个age 变量：

this.age = 2016 - this.yearOfBirth;

当我查看控制台时，age 属性及其值在对象属性上方说明。是什么决定了这个演示文稿？

Answer 1

您的示例中没有 age 变量。这一行：

this.age = 2016 - this.yearOfBirth;

将属性age 添加到john 变量引用的对象。

并且对象属性没有排序。这意味着在程序内部，age 属性并不高于所有其他属性。这也意味着您不能确定当使用像 for..in 这样的迭代构造时，age 将位于顶部。

当我查看控制台时，会显示年龄变量及其值 在对象属性上方。

如果您使用console.log 显示对象，则它使用按字母顺序排列键的格式。尝试使用不同的名称，例如xge，您会看到它会靠近底部输出。

Answer 2

正如您在下面的 sn-p 中看到的，您正在创建变量 age 并将其添加为 this 的属性

var john = {
 name: 'John',
 lastName: 'Smith',
 yearOfBirth: 1990,
 job: 'teacher',
 isMarried: false,
 family: ['Jane', 'Mark', 'Bob'],
 calculateAge: function() {
 console.log('#1', this);
 this.age = 2016 - this.yearOfBirth;
 console.log('#2', this);
 }
};

john.calculateAge();
console.log(john);