简单地聊一聊 JavaScript 中 this 的指向(1)

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

指向上下文

执行上下文是语言规范中的一个概念，通俗地说，也就是我们函数执行前做一些准备，函数在执行中可能用到的都可以在执行上下文中找到，也就是函数执行的环境，也就是变量作用域（以及作用域链，来自外部作用域的闭包中的变量）、函数参数和 this 对象的值。调用堆栈是一个执行环境的集合。

this 是 JavaScript 的关键字，当前执行上下文对象一个属性。this 在不同的环境、不同的作用下，this 具有不同的含义。在浏览器环境中 this 指向的是 window，而在 node 环境下 this 指向 global。虽然不同环境下，我们访问全局方式不同，但是也提供一个通用方式在不同环境下都可以访问到全局对象，这就是 globalThis

var one = 1
复制代码

这个变量就是全局变量，是一个全局对象的一个属性，我们通过 window.one 访问到该变量的值。在浏览器端也可以通过 this.one、 self.one 和 frames.one 都可以访问到该变量。

var tut = {
    title :"machine learning",
    description:function(){
      console.log(this.title);//"machine learning"
      console.log(window)//window
    }
  };

tut.description();
复制代码

当我们在一个对象中 this 则指向该 tut 对象，也就是 this 不再指向全局对象。

function Article(){
    return this;
}
console.log(Article());//window
复制代码

创建一个函数，然后返回 this,调用函数查看返回值，这时 this 指向全局对象 window。不过使用严格模式，则返回值为 undefined

function Article(){
    "use strict"
    return this;
}
复制代码

类中的 this

我们都知道在 ES6 引入了 class 的关键字，也就是 JavaScript 开始从语言层面上支持面向对象编程。其实 class 并不是什么新的东西，就是一个语法糖，其实就是一个函数，也不能这样简单这里理解，应该理解为一个容器。我们之前通过函数和原型就模拟出一个类，不过这些比较繁琐，需要很多步骤。

class Tut1{
    constructor(){}
    description(){}
}

function Tut2(){}
Tut2.prototype.description = function(){}
复制代码

const Tut3 = (function(){
    function Tut(){}
    Tut.prototype.description = function(){}
    Tut.cal = function(){}

    window.Tut = Tut

})();
复制代码