JavaScript调用从对象提取的方法为何打印变量无值？

核心原因是JavaScript普通函数的this指向是运行时动态绑定的，只和函数的调用方式有关，和定义位置没有关系。

两种调用方式的this绑定逻辑分别如下：

• 执行youtuber.feature()时
  属于对象方法调用场景，此时this会隐式绑定到触发调用的youtuber对象上，因此可以正常读取到对象上的name、content属性，输出符合预期。
• 执行youtubeFun()时
  你只是把feature函数本身的引用赋值给了youtubeFun变量，调用时没有绑定任何所属对象，属于独立函数调用场景，非严格模式下会触发this的默认绑定规则，this会指向全局对象：
  • 浏览器环境下全局对象为window，window自带默认值为空字符串的name属性，所以this.name输出空值
  • 全局对象上没有你定义的content属性，所以this.content输出undefined

最终就出现了第二行输出没有对应值的情况。

如果需要让赋值后的函数仍然保留youtuber作为this上下文，可以用bind方法显式绑定：

let youtubeFun = youtuber.feature.bind(youtuber);
youtubeFun(); // 此时输出和第一种调用一致

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