JavaScript this 关键字核心机制与四种调用场景详解

JavaScript this 关键字核心机制与四种调用场景详解

解析 JavaScript 中 this 关键字

本文全面解析 JavaScript 的 this 函数机制，梳理核心知识点，旨在彻底阐明该关键字的实际应用方式。

在代码函数执行期间，

.1 若以直接方式调用函数，则 this 指向 window 对象 .2 在类调用场景下，this 指向该类本身 .3 通过 .apply(obj) 调用方法时，方法内部的 this 指向 obj；若未传递参数，则指向 window .4 当 function 作为构造函数执行时，内部的 this 指向新创建的对象

归纳为：a类直构

this 是 JavaScript 语言的关键字，代表函数运行过程中自动生成的内部对象，其作用域仅限于函数内部。下文将分四种情形深入探讨 this 的具体用法，供感兴趣者参考。

this 属于 JavaScript 语言的关键字。

它代表函数运行期间自动生成的内部对象，且只能在函数内部使用。例如，

　　function test(){ 

　　　　this.x = 1; 

　　} 

依据函数使用的具体场景不同，this 的值会发生变化。其核心原则在于：this 指向调用该函数的对象。

下文将分四种情况，对 this 的用法进行详细讨论。

情况一：纯粹的函数调用

情形一：普通函数调用

此为函数的常规用法，属于全局性调用，因此 this 代表全局对象 Global。

参考以下代码，其运行结果为 1。

　　function test(){ 

　　　　this.x = 1; 

　　　　alert(this.x); 

　　} 

　　test(); // 1 

为验证 this 即为全局对象，对代码进行如下调整：

var x = 1; 

　　function test(){ 

　　　　alert(this.x); 

　　} 

　　test(); // 1 

运行结果仍为 1。进一步调整：

　var x = 1; 

　　function test(){ 

　　　　this.x = 0; 

　　} 

　　test(); 

　　alert(x); //0 

情况二：作为对象方法的调用

情形二：作为对象方法调用

函数亦可作为某对象的方法被调用，此时 this 指向该上级对象。

　　function test(){ 

　　　　alert(this.x); 

　　} 

　　var o = {}; 

　　o.x = 1; 

　　o.m = test; 

　　o.m(); // 1 

情况三：作为构造函数调用

情形三：作为构造函数调用

所谓构造函数，即通过该函数生成一个新对象（object）。此时，this 指向这个新对象。

　function test(){ 

　　　　this.x = 1; 

　　} 

　　var o = new test(); 

　　alert(o.x); // 1 

运行结果为 1。为表明此时 this 并非全局对象，对代码进行如下调整：

　var x = 2; 

　　function test(){ 

　　　　this.x = 1; 

　　} 

　　var o = new test(); 

　　alert(x); //2 

运行结果为 2，表明全局变量 x 的值保持不变。

情况四：apply调用

情形四：apply 调用

apply() 是函数对象的一个方法，用于改变函数的调用上下文，其第一个参数指定了改变后的调用对象。因此，this 指向该第一个参数。

var x = 0; 

　　function test(){ 

　　　　alert(this.x); 

　　} 

　　var o={}; 

　　o.x = 1; 

　　o.m = test; 

　　o.m.apply(); //0 

当 apply() 的参数为空时，默认调用全局对象。因此，此时的运行结果为 0，证明 this 指向全局对象。

若将最后一行代码修改为

o.m.apply(o); //1

运行结果变为 1，证明了此时 this 代表对象 o

感谢阅读，希望能对大家有所帮助，感谢各位对本站的支持！