我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

苏南大叔准备在本文中描述一个普通人不会这么想的谜题，就是非正常的代码用法，但是也没有报错，运算结果也比较出人意料。甚至于在本文中，node环境和浏览器环境下，运算的结果都有很大差别。

苏南大叔：颠覆三观，javascript中的this到底指代的是啥？ - js-this
颠覆三观，javascript中的this到底指代的是啥？（图3-1）

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文讨论js/nodejs代码中，this的指向问题。测试环境：win10，chrome@105.0.5195.102，node@16.14.2。

正常的使用方式

this一般会出现在类的方法里面。所以，this正常的使用方法是这样的：

function Person(name){
  this.name = name;
  this.getName = function(){
    console.log(this);
      return this.name;
  }
}
var p1 = new Person("sunan");
console.log(p1.getName(), p1 instanceof Person); //sunan  true
JavaScript

或者

class Person2{
  constructor(name){
      this.name=name;
  }
  getName(){
      console.log(this);
      return this.name;
  }
}
var p2 = new Person2("苏南大叔");
console.log(p2.getName(), p2 instanceof Person2); //苏南大叔  true
JavaScript

非正常使用方式

下面的代码是非正常使用的方式，考察点有两个：1:this指的是谁，2:this.属性究竟指的是谁。

方式一

a="a"
var b="b"
console.log("this",this,this.a,this.b);
JavaScript

这种直接就写this.的代码，输出为：

this {} undefined undefined
JavaScript

意思是this为{}。

方式二

a = "a"
var b = "b";
(function () {
  console.log("function", this.a, this.b, typeof (this));
  console.log(this);
  if (typeof global !== 'undefined' && global !== null) {
    console.log("global", global.a, global.b, typeof (this));
    console.log("global?", this === global)
  }
  if (typeof Window !== 'undefined' && Window !== null) {
    console.log("Window", Window.a, Window.b, typeof (this));
    console.log("Window?", this === Window)
    console.log("window", window.a, window.b, typeof (this));
    console.log("window?", this === window)
  }
})();
JavaScript

苏南大叔：颠覆三观，javascript中的this到底指代的是啥？ - global-a
颠覆三观，javascript中的this到底指代的是啥？（图3-2）

这次把this.移动到function()定义里面了，

  • 如果是在node环境下，运行上述代码的话，this.指代的是global.。而且，对于没有使用var的全局变量a，是可以访问到的。而使用了var的全局变量b，是无法访问到的。
  • 如果是在浏览器环境下，运行上述代码的话，this.指代的是window.。全局变量无论带不带var，都可以被访问到。
运行环境this.var
node@16.14.2global.有var则注册不到global
chrome@105window.有没有var都可以注册到window

苏南大叔：颠覆三观，javascript中的this到底指代的是啥？ - window-b
颠覆三观，javascript中的this到底指代的是啥？（图3-3）

方式三

a="a"
var b="b"
var c={};
c.fn = function(){
  console.log("function",this,this.a,this.b,typeof(this));
};
c.fn();
JavaScript

输出：

function { fn: [Function (anonymous)] } undefined undefined object
Plain text

这里的this.是c={}这个变量，而同样的匿名函数在自执行的时候，this.还是global.或者window.。赋值过后，这个this.又发生了变化。因为这个{}内部，确实没有注册a或者b。所以使用this.a或者this.b都得到的是undefined。

相关链接

总结

就同一个带var的b变量，在node环境下和chrome下面居然得到的值不同，这个是始料未及的事情。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   node