JavaScript this 指针的指向规则与改变方法

this 指针的默认指向规则

第1步：明确 this 指向方法的调用者

当以 obj.method() 的形式调用函数时，方法内部的 this 指向该对象 obj。

// 定义一个用户对象
var user = { name: '段光伟' };
// 添加获取名称的方法
user.getName = function(){ return this.name; };

// 调用此方法，this 指向 user
user.getName(); // 返回 '段光伟'

第2步：理解全局调用时 this 指向 window

如果在调用函数时没有明确指定对象（即直接调用函数名），在非严格模式下，this 默认指向全局对象（浏览器中为 window）。

var user = { name: '段光伟' };
user.getName = function(){ return this.name; };

// 将函数赋值给 window 对象的属性
window.name = '李妞妞';
window.getName = user.getName;

// 此时 this 指向 window
window.getName(); // 返回 '李妞妞'

// 直接调用，this 同样指向 window
getName(); // 返回 '李妞妞'

第3步：掌握匿名代码块的 this 归属

独立执行的代码块（如顶层脚本中的语句）可视为在一个匿名方法中执行，根据上述规则2，其 this 也指向 window。

this // 指向 window 对象

如何改变 this 指针的默认指向

除了默认的自动绑定，JavaScript 提供了 apply 和 call 方法来显式地指定函数执行时的 this 值。

第4步：使用 apply 方法指定 this

apply 接收两个参数：第一个是作为 this 的对象，第二个是包含参数的数组。

var user = { name: '段光伟' };
user.hi = function(message){ return this.name + ':' + message; };

// 默认情况
window.name = '李妞妞';
user.hi('你好'); // 输出 '段光伟:你好'

// 使用 apply 强制 this 指向 window
user.hi.apply(window, ['你好']); // 输出 '李妞妞:你好'

第5步：使用 call 方法指定 this

call 与 apply 类似，区别在于传递参数的方式：call 接受参数列表而非数组。

var user = { name: '段光伟' };
user.hi = function(message){ return this.name + ':' + message; };

// 默认情况
window.name = '李妞妞';
user.hi('你好'); // 输出 '段光伟:你好'

// 使用 call 强制 this 指向 window
user.hi.call(window, '你好'); // 输出 '李妞妞:你好'

构造函数中的 this 指向

在使用 new 关键字调用构造函数时，函数体内的 this 指向新创建的对象实例。

var User = function(name) {
  this.name = name;
};
User.prototype.hi = function(){
  return this.name;
};

var user = new User('段光伟');
user.hi(); // 输出 '段光伟'

实战测试：隐式丢失问题

理解 this 的关键在于区分函数引用时的上下文。如果将方法赋值给另一个变量后调用，会丢失原有的对象绑定。

var User = function(name){
    this.name = name;
};
User.prototype.hi = function(){
    return this.name;
};

var user = new User('段光伟');
user.hi(); // 输出 '段光伟'

// 将方法提取为独立函数
var hi = user.hi;

// 此时直接调用，this 指向 window
hi(); // 猜猜这里的输出？结果将是 undefined 或全局属性值

在上述测试中，由于 hi 是直接调用而非对象方法调用，且未使用 call/apply/bind 绑定，因此 this 指向 window，而 window 上并无 name 属性（除非之前手动设置），所以返回 undefined。

以上就是 JavaScript this 指针的指向规则与 call/apply 用法的详细内容，更多关于前端开发基础的资料请关注本站其它相关文章！