为何执行指定JavaScript代码时会打印出'book1'？

首先我们先把你的完整代码贴出来，方便一步步分析：

function defineReactive(data, key, val) { 
  observe(val); // 递归遍历所有子属性 
  console.log(key,val); 
}
function observe(data) { 
  Object.keys(data).forEach(function(key) { 
    console.log(data,key,data[key]) 
    defineReactive(data, key, data[key]); 
  }); 
};
var library = { book1: { name: '' } };
observe(library);

接下来我们拆解代码的执行流程，就能明白'book1'的打印来源：

1. 启动：调用observe(library)

   • library是包含book1属性的对象，进入observe函数后，Object.keys(data)会提取出对象的可枚举键，这里得到的是['book1']。
   • 随后进入forEach循环，当前循环的key变量值就是'book1'。

2. 第一次打印'book1'：来自observe内的日志

   • 循环里第一行就是console.log(data,key,data[key])，这里的key就是'book1'，所以这行代码会直接输出'book1'（同时还会打印整个library对象和book1对应的子对象）。

3. 第二次打印'book1'：来自defineReactive内的日志

   • 紧接着调用defineReactive(data, key, data[key])，传入的key依然是'book1'，val是{ name: '' }。
   • 在defineReactive函数里，先递归调用observe(val)处理子对象（这部分会处理name属性，但和book1的打印无关），然后执行console.log(key,val)——这里的key还是'book1'，所以会再次打印'book1'以及对应的子对象。

总结一下：两次打印'book1'分别来自observe函数循环内的日志输出，以及defineReactive函数里的日志输出，本质都是在处理library的book1属性时，这两处console.log都引用了当前的key变量，而这个变量的值恰好是'book1'。

内容的提问来源于stack exchange，提问作者qq554026461