置信每一个前端的敌人都会遇到过 this.xxx is undefined 或者 this.xxx is not a function 的谬误,明明咱们定义了这个 xxx,然而还是要报错?令人百思不得其解,其实就是因为 this 指针的援用对象中,没有找到这个定义 xxx 导致的,因而明天来总结一下 this 指针的几种常见的指向问题。
因为 this 的定义中提到了上下文,因而咱们在这里先简略的梳理一下 Js 中的上下文。
一、执行上下文
上下文分为:
- 全局上下文:全局执行上下文是在代码执行时就创立了,函数执行上下文是在函数调用的时候创立的。
-
函数上下文:同一个函数,在不同时刻调用,会创立不同的执行上下文。
变量和函数的上下文决定了它们能够拜访哪些数据以及他们的行为。
每个 函数调用 都有本人的上下文。当代码执行流进入函数时,函数的上下文被推到一个上下文栈上。在函数执行完之后,上下文栈会弹出函数的上下文。—《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) // "小白"
(未完 …)