JavaScript中this指向问题的三种解决方案：bind、that与闭包

作者：拾光时间：2026-10-23 13:36:09浏览：586

本文深入解析JavaScript中this指向变化的原理，对比三种常见解决方案：使用Function.prototype.bind固定上下文、通过that变量保存this引用以及利用闭包特性。文章结合具体代码示例，分析各方法的浏览器兼容性、适用场景及最佳实践，帮助开发者根据实际需求选择最合适的this绑定策略。

本文详细解析JavaScript中this、bind和that的实际应用案例，通过具体代码示例展示其工作原理，为开发者提供实用的参考指南。

JavaScript中this指向的动态特性

在JavaScript中，必须通过this关键字来访问类的成员变量或方法。然而，this的指向具有动态性：它取决于函数被调用时绑定的对象，而非定义时的对象。这一特性常令从C#、Java等静态类型语言转过来的开发者感到困惑。


function Foo(){
  this.message = 'This is message from Foo';
}

Foo.prototype.printMessage = function(){
  console.log(this.message);
}

function Foo2(){
  this.message = 'This is message from Foo2';
}

var foo = new Foo();
foo.printMessage();

var foo2 = new Foo2();
foo2.printMessage = foo.printMessage;
foo2.printMessage();

运行结果如下：

This is message from Foo

This is message from Foo2

使用bind固定函数上下文

造成上述现象的根本原因是this指向发生了改变。因此，JavaScript中this的行为与C++或C#中的机制存在显著差异。若需实现类似传统面向对象语言中this的行为，可借助Function.prototype.bind()方法显式指定函数的this值。


function Foo(){
  this.message = 'This is message from Foo';
  
  this.printMessage = (function(){
    console.log(this.message);
  }).bind(this);
}

function Foo2(){
  this.message = 'This is message from Foo2';
}

var foo = new Foo();
foo.printMessage();

var foo2 = new Foo2();
foo2.printMessage = foo.printMessage;
foo2.printMessage();

运行结果如下：

This is message from Foo

此外，还可以使用call和apply方法在函数调用时动态改变this的指向。

保存this引用的实践方案

bind函数的主要局限在于其仅在IE9及以上版本的浏览器中提供支持。此外，一旦开发者习惯了JavaScript动态this的用法，转而使用bind反而可能显得不够自然。在实际开发中，更常见的做法是保存this的引用。


function Foo(){
  var that = this;
  
  this.message = 'This is message from Foo';
  
  this.printMessage = function(){
    console.log(that.message);
  };
}

function Foo2(){
  this.message = 'This is message from Foo2';
}

var foo = new Foo();
foo.printMessage();

var foo2 = new Foo2();
foo2.printMessage = foo.printMessage;
foo2.printMessage();

运行结果与前述示例相同。

请注意，我们是通过that变量来访问message属性的（除that外，context和self也是常用的替代名称）。JavaScript的一个优势在于其闭包机制：上下文始终绑定在函数定义的位置。因此，无论该函数最终被绑定到哪个对象上，所捕获的that始终指向预期的对象。尽管此处严格来说属于“有闭包无封闭”的情形，但其原理与闭包一致。这也是实践中最常用且推荐的方法。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

2026-11-05 16:12:28

JS怎么使用展开运算符合并对象

2026-11-05 14:42:18

ES6+环境下判断JS对象为空的简洁写法

2026-11-05 12:12:23

怎么通过replacer函数自定义JS中JSON的格式化输出

2026-11-05 11:19:44

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

2026-11-05 11:16:58