JavaScript中this指向的核心规则与判断方法

JavaScript中this指向的核心规则与判断方法

JavaScript中this指向问题

this指向的学习难点与突破

回顾初学 JavaScript 的经历，this 的指向机制曾让许多人感到困惑，甚至与闭包、原型链并称为 JS 开发中的三大难点。若要精通 JavaScript，必须掌握这些核心概念。相比之下，this 指向的逻辑相对直观，难度较低，因此建议从这一基础入手进行突破。

默认指向原则

掌握 this 指向的关键口诀是：函数由哪个对象调用，this 就默认指向该对象（注意 this 始终指向对象而非原始值）。所谓“默认指向”，是指未通过箭头函数、call、apply 或 bind 等方法人为改变指向时的状态。本文仅探讨 this 的默认绑定行为。

全局作用域中的this

在全局作用域以及全局作用域内的普通函数中，this 默认指向全局对象 window。

严格模式下的this

在严格模式下，全局作用域内的函数中，this 默认指向 undefined，这是严格模式规范所规定的行为。

// 非严格模式下
console.log(this); // Window
function doSomething(){
 console.log(this); // Window
}
doSomething(); // 这里可以看成window.doSomething()，所以函数里的this指向全局对象window
// 严格模式下
'use strict';
console.log(this); // Window
function doInStrict(){
 console.log(this); // undefined
}
doInStrict();

对象方法中的this

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

var a = 1;
var obj = {
 a: 2,
 fn: function(){
  console.log(this); // {a: 2, fn: ƒ}
  console.log(this.a); // 2
 }
};
obj.fn();

上述代码执行后，打印结果证实此时 this 指向调用函数的对象 obj。如果将对象中的函数赋值给全局变量 fn1，再执行 fn1，结果会有何不同？

var a = 1;
var obj = {
 a: 2,
 fn: function(){
  console.log(this); // Winidow
  console.log(this.a); // 1
 }
};
var fn1 = obj.fn;
fn1(); // 可以看成window.fn1();

从示例可以看出，fn1 与 obj.fn 引用的是同一个函数，但由于调用方式不同，函数内部 this 的指向也随之改变。

复杂调用场景分析

接下来分析一个更复杂的嵌套调用示例：

var a = 0;
function fn(){
	consoloe.log(this.a);
}
var obj1 = {
	a: 1,
	fn: function(){
		console.log(this.a);
	}
};
var obj2 = {
	a: 2,
	fn: function(){
		fn();
		obj1.fn();
		console.log(this.a);
	}
}
obj2.fn();

执行结果依次打印 0、1、2。当 obj2 调用 fn 函数时，首先执行的是内部的 fn() 调用。该函数定义在全局作用域，因此可视为 window.fn()，此时函数内部的 this 指向全局对象 window，this.a 获取的是全局变量 a 的值（0）。

接着执行 obj1.fn()，该调用从 obj1 中查找并执行 fn 函数。由于调用者是 obj1，此时函数内部的 this 指向 obj1 自身，因此 this.a 获取的是 obj1 中 a 的值（1）。

最后打印的是 obj2.fn 内部的 console.log(this.a)。由于该函数是由 obj2 调用的，this 自然指向 obj2，因此 this.a 的结果为 2。

通过上述示例可以得出结论：函数内部 this 的指向取决于调用函数的对象，而与函数定义的位置无关。

内置函数回调中的this

Window内置函数的回调函数中，this指向Window对象。

对于 window 的内置函数（如 setInterval、setTimeout 等），其回调函数中的 this 指向 window 对象。

var name = 'window';
var obj = {
 name: 'obj',
 func: function(){
  setTimeout(function () {
   console.log(this.name) // window
  },1000)
 }
}

obj.func()

在实际开发中，经常需要改变 this 的指向。具体方法请参考 JS 中 this 指向的更改，此处不再赘述。需要明确的是，this 既不指向函数自身，也不指向函数的词法作用域；它是在函数被调用时动态绑定的，具体指向完全取决于函数在哪里被调用。

判断this绑定的核心规则

确定函数直接调用的位置后，可依据以下规则判断 this 的绑定对象。

1. 由 new 调用？绑定到新创建的实例对象上。
2. 由 call、apply、bind 调用？绑定到指定的对象上。
3. 由上下文对象调用？绑定到那个上下文对象上。
4. 默认情况：在严格模式下绑定到 undefined，否则绑定到全局对象 Window 上。
5. ES6 中的箭头函数会继承外层函数调用的 this 绑定，这与 var self = this; 的绑定机制类似。

到此这篇关于浅谈JavaScript中this的指向问题的文章就介绍到这了,更多相关JavaScript中this指向问题内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！