本文总结JavaScript中改变函数内部this指针指向的三种核心规则。首先,函数作为对象属性时,this指向该对象;其次,使用new关键字创建实例时,this指向新对象;最后,通过apply方法可灵活改变this指向。文章结合代码示例解析默认指向window的情况及绑定无传递性的特点,帮助开发者准确掌握this的后期绑定机制。
JavaScript this指向的三种核心规则
经过查阅大量资料,我总结了以下三条规则,这些规则足以解决目前遇到的所有相关问题。
规则0:函数本身是一种特殊类型,大多数情况下,可将其视为一个变量。
函数作为变量与对象属性的绑定
具体代码实现如下:
function a() {
{
alert(this);
}
或者
var a = function() {
{
alert(this);
} 上述两种写法均可视为创建了一个变量,该变量的值即为一个函数。
规则1:如果函数是某个对象的键值(key),那么 this 指向该对象。
这一规则易于理解:
代码示例如下:
var a = function(obj) {
{
alert(this == obj);
}
var o = {};
o.afun = a;
o.afun(o); // 输出 true 函数本质上是一个变量,但可以绑定到某个对象名下,此时 this 将指向该对象。
需要注意的是,未被绑定的函数,其默认 this 指向 window 对象。
默认指向window与绑定的非传递性
举例说明:
代码如下:
function a() {
{
// this == window
}
function a() {
{
// this == window
function b() {
{
// this == window
}
} 还需注意,绑定关系不具备传递性。例如上述嵌套函数中,a 绑定到对象 o 仅影响 a 函数本身,
而 b 仍然指向 window。
规则2:如果函数通过 new 调用,则会创建一个对象,且 this 指向新创建的对象。
使用new关键字创建实例时的this指向
var o = new a();
此时,o 不再是一个函数,实际上可以理解为执行了以下过程。
创建一个对象 var o = {};
然后,将 this 指向 o,并通过 this 对 o 进行初始化。
规则3:通过 apply 可以改变 this 的指向。
通过apply方法灵活改变this指向
apply 的绑定方式更加灵活,其功能大致等同于以下代码。
代码如下:
var a = function (obj) {
{
alert(this == obj);
};
obj.fun = a;
obj.fun(obj); // 输出 true 简单写法即为 a.apply(obj, [obj]); // 输出 true
JavaScript 的 this 可简单理解为后期绑定,若无明确绑定目标,则默认绑定至 window。
综合实例:each函数中的应用
综合实例:
jQuery 中常用的 each 函数,可将循环中的元素绑定到 this,便于操作。
此处仅作简单演示:
代码
代码如下:
function each(tagName, callback) {
{
var lists = document.getElementsByTagName(tagName);
for (var i = 0; i < lists.length; i++) {
{
callback.apply(lists[i]);
}
}
each("a",
function () {
{
this.style.color = "red";
}
); 可以看到,头部导航的链接均已变为红色。