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

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

指向上下文

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

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

var one = 1
复制代码

这个变量就是全局变量,是一个全局对象的一个属性,我们通过 window.one 访问到该变量的值。在浏览器端也可以通过 this.oneself.oneframes.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

})();
复制代码

猜你喜欢

转载自juejin.im/post/7017421276750807047

相关文章