JavaScript中this指针详解，以及React中this指针的指向

2022-05-09

相信每一个前端的朋友都会遇到过this.xxx is undefined或者this.xxx is not a function的错误，明明我们定义了这个xxx，但是还是要报错？令人百思不得其解，其实就是因为this指针的引用对象中，没有找到这个定义xxx导致的，因此今天来总结一下this指针的几种常见的指向问题。
由于this的定义中提到了上下文，因此我们在这里先简单的梳理一下Js中的上下文。
一、执行上下文
上下文分为：

全局上下文：全局执行上下文是在代码执行时就创建了，函数执行上下文是在函数调用的时候创建的。
【JavaScript中this指针详解，以及React中this指针的指向】函数上下文：同一个函数，在不同时刻调用，会创建不同的执行上下文。

变量和函数的上下文决定了它们可以访问哪些数据以及他们的行为。
每个函数调用都有自己的上下文。当代码执行流进入函数时，函数的上下文被推到一个上下文栈上。在函数执行完之后，上下文栈会弹出函数的上下文。---《JavaScript 高级程序设计》

无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。然而，在严格模式下，如果进入执行环境时没有设置 this 的值，this 会保持为 undefined。如下代码：

function f() { "use strict"; // 这里是严格模式 return this; } console.log(f() === undefined); // true

在浏览器中全局上下文也是window对象，node.js中的全局对象是globalThis。

console.log(this === window); // true a = 1; console.log(window.a); // 1 this.b = "小白"; console.log(window.b)// "小白" console.log(b)// "小白"

（未完...）

推荐阅读

上一篇：python类的私有属性和公共属性说明

下一篇：python目标检测基于opencv实现目标追踪示例