JavaScript面向对象编程：请解释为何f.a有返回值而f.b与c.a返回undefined

先把问题里的代码放出来，方便对照：

function f() { 
  f.a = "test 1"; 
  this.b = "test 2"; 
  return this; 
} 
let c = f(); 
console.log(f.a); // 输出"test 1"
console.log(f.b); // 输出undefined
console.log(c.a); // 输出undefined

咱们一步步拆解这段代码的执行逻辑，就能搞清楚每个结果的原因：

• 为什么console.log(f.a)有返回值？
  在JavaScript里，函数本身也是一个对象。当执行f.a = "test 1"时，我们是直接给f这个函数对象本身添加了一个名为a的属性，属性值是"test 1"。所以当后续访问f.a时，直接从函数对象f上读取这个属性，自然能拿到对应的值。

• 为什么console.log(f.b)返回undefined？
  这里的关键是this的指向。因为我们是直接调用f()（没有用new关键字构造实例），在非严格模式下，这种直接调用的方式会让this指向全局对象（浏览器环境里是window，Node.js环境里是global）。所以执行this.b = "test 2"时，实际上是给全局对象添加了b属性，而不是给函数f添加。当我们访问f.b时，函数对象f本身并没有这个属性，所以返回undefined。

• 为什么console.log(c.a)返回undefined？
  函数f最后return this，而这里的this是全局对象，所以变量c其实是全局对象的一个引用。全局对象上并没有名为a的属性（a是挂在函数f上的），所以访问c.a时找不到对应属性，返回undefined。

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