我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:颠覆三观,javascript中的this到底指代的是啥? - js-this
颠覆三观,javascript中的this到底指代的是啥?(图3-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文讨论js/nodejs代码中,this的指向问题。测试环境:win10chrome@105.0.5195.102node@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

或者

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

非正常使用方式

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

方式一

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

这种直接就写this.的代码,输出为:

this {} undefined undefined

意思是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中的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();

输出:

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

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

相关链接

总结

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

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

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

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

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