JavaScript中this关键字的四种调用场景解析

JavaScript this 关键字概述

前言：this 是 JavaScript 中一个较为特殊的关键字，其应用范围广泛且方式灵活，这既体现了它的强大之处，也导致了它的使用难度。初学者往往容易对此感到困惑，为了彻底理清其逻辑，查阅了大量资料并将学习心得整理成文，以通俗易懂的方式呈现，既作为个人学习笔记，也供有需求的读者参考。

什么是this？

this 关键字的含义具体且明确，它指代当前的执行对象。这意味着 this 的指向并非固定不变，而是依赖于特定的上下文环境。

this 指向的四种调用场景

this 的指向主要分为三种情况：全局对象、当前所属对象或任意指定对象。判断具体属于哪种情况，完全取决于函数的调用方式。JavaScript 中主要的函数调用方式包括以下几种：

• 作为普通函数调用
• 作为对象方法调用
• 作为构造函数调用
• 使用 apply 或 call 调用

普通函数调用

1. 作为普通函数调用 ------这是最常见的调用方式，属于全局调用，此时 this 指向全局对象。

function test(){
 this.a = 5;
 alert(this.a);
 alert(this);
}
test(); // 5 [object Window]

如上所示：定义在全局的函数，其所有者即为当前页面，也就是 window 对象。因此调用 example() 时，调用对象为 Window，其中的 this 代表 Window 对象。

换一种写法：

var a = 5;
function test(){
 var a = 10;
 alert(this.a);
}
test(); //5

如上所示：在 test() 函数内部声明了一个局部变量 a，但调用 test() 的结果仍为 5。这说明此时函数内部的 this 依然代表全局对象，即 Window 对象。

再换种写法：

var a = 5;
function test(){
 this.a = 10;
}
test();
alert(a); //10

如上所示：调用 test() 函数后，全局变量 a 的值被更改。这一现象表明，此时 this 指向的是全局对象。

对象方法调用

2. 作为对象函数的调用 ------当函数作为某个对象的方法被调用时，this 指向该对象。

var name="张三";
 var person={
  name:"李四",
  showName:function(){
   alert(this.name);
  }
 }
 person.showName(); //输出 李四
 var other=person.showName;
 other(); //输出 张三

如上所示：执行 person.showName() 的结果为“李四”，说明此时 showName 中的 this 指向了 person 对象。

若将 person.showName 赋值给 other 变量，由于 other 属于全局变量，可视为 window 对象的一个属性。因此调用 other() 相当于调用 window.other()，此时 this 指向 window，输出结果为“张三”。

综上所述，当作为对象方法调用时，this 指向调用该方法的对象。

构造函数调用

3. 作为构造函数调用 ------构造函数用于生成新对象（object），此时 this 指向这个新创建的对象。

function animal(){
 this.name = "豆豆";
}
var dog = new animal();
alert(dog.name); // 输出 豆豆

如上所示：通过 new 关键字生成一个 object 类型的对象并赋值给 dog。执行该构造函数时，作用域内的 this 指向这个新对象（即 dog）。因此 this.name 等同于 dog.name，输出结果为“豆豆”。

apply 或 call 调用

4. 使用 apply 或 call 调用 ------apply() 是函数对象的一个方法，它用于应用某一对象的方法，并用另一个对象替换当前对象。

var a = "张三";
function test(){
 alert(this.a);
}
var b = {};
b.a = "李四";
b.n = test;
b.n(); //李四
b.n.apply(); //张三
b.n.apply(b); //李四

如上所示：b.n() 调用中，因为直接调用对象为 b，所以 this 指向 b，this.a 等于 b.a，结果为“李四”。

b.n.apply() 调用中，当 apply() 的参数为空时，表示没有对象替换当前对象，默认使用全局对象，因此 this 指向 window，结果为“张三”。

b.n.apply(b) 调用中，明确将当前的 this 指向替换为 b，因此 this 指向 b，结果为“李四”。

（本文参考了网上的资料和一些书籍，如有错误之处，欢迎指出，将及时改正，么么哒O(∩_∩)O）

总结：本文介绍了 JavaScript 中 this 关键字在各种情况下的含义，所举实例均较为简单，旨在帮助加深理解。虽然这只是 JavaScript 中的一个基础概念，但借此可以了解函数的执行环境。充分掌握 this 的相关知识，有助于在编写面向对象的 JavaScript 程序时更加得心应手。最后，感谢您的观看。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站