JavaScript this解析

最新推荐文章于 2022-04-01 10:57:27 发布

yinjiangQAQ

最新推荐文章于 2022-04-01 10:57:27 发布

阅读量157

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/yinjiangQAQ/article/details/104035283

版权

本文主要探讨JavaScript中this的不同含义，分别在全局环境、函数、prototype、对象和箭头函数中进行详细解释。通过实例分析call、apply和bind的区别，以及它们如何与prototype相互作用。在对象中，this用于引用对象的其他属性。而在箭头函数中，this是词法绑定，不创建自己的this值。

摘要由CSDN通过智能技术生成

前言

想码这篇博文的动力是源于刷了网易2020年正式批的前端笔试题，里面有一道涉及到关于JavaScript this的问题。

在这里插入图片描述
由于这道题是我瞎蒙的，所以真正的解题思路是什么样的，我想真真正正了解一下。顺便全面地了解JavaScript的this

不同环境中的this含义不一样

全局中的this

浏览器环境下

在浏览器里，在全局范围内，this等价于window对象。用var声明一个变量和给this或者window添加属性是等价的

<script>
   console.log(this === window) //true
   
   var a = 3;
   console.log(this.a, window.a)//3  3
</script>

说明：在浏览器中window对象同时也是全局对象

node环境中

在node环境里，在全局范围内，如果你用REPL(通过执行一个js文件来运行你的代码)执行一个脚本文件，用var声明一个变量并不会和在浏览器里面一样将这个变量添加给this。

index.js 文件在node环境中执行

var foo = "bar";
console.log(this.foo);//undefined

但是如果你不是用REPL执行脚本文件，而是直接执行代码，结果和在浏览器里面是一样的(神坑)

 > var foo = "bar";
 > this.foo
 bar
 > global.foo
 bar

在node环境里，用REPL运行脚本文件的时候，如果在声明变量的时候没有使用var或者let，这个变量会自动添加到global对象，但是不会自动添加给this对象。如果是直接执行代码，则会同时添加给global和this

index.js 文件在node环境中执行

 foo = "bar";
 console.log(this.foo);//undefined
 console.log(global.foo);//bar

函数(function)中的this

如果不是用new调用，在函数里面使用this都是指代全局范围的this。无论是浏览器环境还是node环境

<script>
testa()
function testa(){
     testb()
    function testb(){
        console.log(this === window)//true
      }
 }
 //在node环境下
</script>
index.js 文件在node环境中执行

foo = "bar";

function testThis () {
  this.foo = "foo";
}

console.log(global.foo);//ba