本文详细解析JavaScript中this关键字在不同调用模式下的指向逻辑。涵盖全局函数、构造函数、对象方法、apply/call/bind以及原型链和闭包场景。通过代码示例说明this如何随调用者动态变化，帮助开发者准确理解并控制上下文对象。
JavaScript this关键字概述
[[t0]]
this是JavaScript语言中的一个关键字。其具体指向的值会随着函数使用场合的不同而发生变化。尽管存在多种情况，但核心原则保持一致：this始终指向调用当前函数的那个对象。
this的定义与基本规则
一、定义
1. this是函数内部的一个特殊对象（或称为this引用），它引用的是函数据以执行的环境对象。
2. this引用是一种在JavaScript代码中随时可用的只读变量。它指向一个对象，且具有根据代码上下文语境自动改变引用对象的特性。其引用规则如下：
• 在最外层代码中，this引用指向的是全局对象。
• 在函数内部，this的指向根据函数调用的方式不同而有所区别。具体表现如下：
1）构造函数的调用——this引用指向所生成的对象。
2）方法调用——this引用指向接收方对象。
3）apply或call调用——this引用指向由apply或call的参数指定的对象。
4）其他方式的调用——this引用指向全局对象。
二、根据以上分析及相关资料，this对象（引用）的使用情况总结如下：
不同调用模式下的this指向
JavaScript是动态类型语言，this关键字在执行时才能确定具体指向。因此，this永远指向调用者，即对“调用对象”的引用。简而言之，调用的方法属于哪个对象，this就指向那个对象。根据函数调用方式的不同，this可以指向全局对象、当前对象或其他任意对象。
1. 全局函数调用：在全局函数中，this会指向全局对象window。（函数调用模式）
//代码清单1
<script type="text/javascript">
var message = "this in window"; //这一句写在函数外面和里面是一样效果
function func() {
if(this == window){
alert("this == window");
alert(message);
this.methodA = function() {
alert("I'm a function");
}
}
}
func(); //如果不调用func方法，则里面定义的属性或方法会取不到
methodA();
</script>func()的调用结果为this == window， this in window
methodA()的调用结果为I'm a function
2. 构造函数调用：即使用new的方式实例化一个对象，this会指向通过构造函数生成的对象。（构造器调用模式）
代码清单2
<script type="text/javascript">
function Func() {
if (this == window) {
alert("this == window");
}
else {
alert("this != window");
}
this.fieldA = "I'm a field";
alert(this);
}
var obj = new Func();
alert(obj.fieldA); //this指向的是对象obj
</script>3. 对象方法的调用：this指向当前对象。任何函数，只要该函数被当做一个对象的方法使用或赋值时，该函数内部的this都是对该对象本身的引用。也可理解为this写在一个普通对象中，this指向的就是对象本身。（方法调用模式）
（方法的定义： 作为对象属性的函数称为方法）
//代码清单3
<script type="text/javascript">
var obj = {
x: 3,
doit: function(){
if(this == window){
alert("this == window");
}else{
alert("method is called: " + this.x);
}
}
};
obj.doit(); //this指向的是对象obj
</script>4. 通过apply或call方法调用：this指向传入的对象。
apply 或call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 （apply调用模式）
//代码清单4
<script type="text/javascript">
var obj = {
x: 3,
doit: function(){
alert("method is called: " + this.x);
}
};
var obj2 = {x: 4};
obj.doit(); //3,this指向obj
obj.doit.apply(obj2); //4,this指向obj2
obj.doit.call(obj2); //4,this指向obj2
</script>原型链与闭包中的this处理
5. 原型链中的this --原型对象及构造函数中的this指向新创建的实例对象。使用prototype扩展方法可以使用this获取到源对象的实例，私有字段无法通过原型链获取。
//代码清单5
<script type="text/javascript">
function Func() {
this.fieldA = "I'm a field";
var privateFieldA = "I'm a var";
}
Func.prototype = {
ExtendMethod: function(str) {
alert(str + " :" + this.fieldA);
alert(privateFieldA); //出错,私有字段无法通过原型链获取。
}
};
var obj = new Func();
obj.ExtendMethod("From prototype"); //此时构造函数及原型链中的this指向对象obj
</script>6. 闭包中的this --闭包：写在function中的function，this指向全局对象window。
6.1 对象中的闭包
//代码清单6
<script type="text/javascript">
var name = "The window";
var obj = {
name: "My Object",
getNameFunc: function(){
return function(){
return this.name;
}
}
};
alert(obj.getNameFunc()()); //The window
</script>此时，闭包中的this指向全局对象window，只能取到全局对象的属性。那么对象内部的属性（外部函数的变量）要想访问又怎么办呢？ 把外部函数的this对象保存在一个闭包能访问的变量就可以了。看如下代码：
//代码清单7
<script type="text/javascript">
var name = "The window";
var obj = {
name: "My Object",
getNameFunc: function(){
var that = this;
return function(){
return that.name;
}
}
};
alert(obj.getNameFunc()()); //My object
</script>将外部函数的this赋值给that变量，就能读取到外部函数的变量。
6.2 不管是直接引用function，还是实例化一个function，其返回的闭包函数里的this都是指向window。
//代码清单8
<script type="text/javascript">
function a() {
alert(this == window);
var that = this;
var func = function() {
alert(this == window);
alert(that);
};
return func;
}
var b = a();
b(); //true, true, [object Window]
var c = new a();
c(); //false, true, [object object]
</script>其他场景下的this指向
7. 函数使用bind()方法绑定一个对象，this会指向传给bind()函数的值。
//代码清单9
<script type="text/javascript">
window.color = "red";
var obj = {color: "blue"};
function sayColor(){
alert(this.color);
}
var objSayColor = sayColor.bind(obj);
objSayColor(); //blue
</script>8. 内嵌在HTML元素中的脚本段，this指向元素本身
//代码清单10
<div onclick="test(this)" id="div">Click Me</div>
<script type="text/javascript">
function test(obj) {
alert(obj); //[object HTMLDivElement]
}
</script>9. 写在script标签中：this就是指全局对象window。这个跟第一点的全局函数调用的全局变量一样。
以上所述是小编给大家介绍的JavaScript中的this引用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！