JavaScript中this指向详解及call、apply、bind用法解析

作者：纸飞机时间：2026-10-22 14:02:53浏览：422

本文深入解析JavaScript中this关键字的三种主要指向场景：全局对象、当前对象及构造函数新实例。详细对比call与apply在参数传递上的差异，并探讨bind方法延迟执行的特性。通过代码示例说明函数丢失this时的修复方案，帮助开发者掌握函数调用机制与上下文绑定技巧。

JavaScript中this的三种指向场景

在实际开发中，this 关键字的指向并非在函数定义阶段确定，而是在函数执行时根据运行环境动态决定。通常情况下，this 的指向可以归纳为以下三种主要情形：

第一种情况：当函数以普通函数的形式被调用时，this 指向全局对象（在浏览器环境中通常指 window）。

第二种情况：当函数作为对象的方法被调用时，this 指向调用该方法的对象本身。

第三种情况：当函数作为构造函数，通过 new 关键字被调用时，this 指向新创建的对象实例。

以下是针对上述三种情况的代码示例：


window.name = 'myname';
function getName() {
  console.log(this.name);
}
getName(); //输出myname

示例展示了普通函数调用场景下的 this 指向。


var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob

示例展示了对象方法调用场景下的 this 指向。


function Boy(name) {
  this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

对于构造函数调用的第三种情况，存在一个特殊例外：如果构造函数内部通过 return 语句返回了一个对象，那么最终结果将是返回的那个对象，而非新创建的对象实例。在这种情况下，构造函数内的 this 实际上并未起到构建新对象的作用。

示例展示了构造函数返回非对象值时的行为。


function Boy(name) {
  this.name = name;
  return { //返回一个对象
    name: 'Jack'
  }
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack

示例展示了构造函数返回对象值时的行为。


function Boy(name) {
  this.name = name;
  return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

call与apply方法的区别与应用

接下来介绍 call 和 apply 方法的作用。

apply 方法接收两个参数：第一个参数用于指定函数内部 this 的指向；第二个参数是一个数组或类数组对象，用于传递被调用函数所需的参数列表。

以下是 apply 方法的代码示例。


function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming

call 方法传入的参数数量不固定。与 apply 相同，其第一个参数用于指定函数内部 this 的指向；从第二个参数开始，后续每个参数将依次传递给被调用函数。

以下是 call 方法的代码示例。


function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping

bind方法特性及模拟实现

此外，现代主流浏览器均实现了 bind 方法。与 call 和 apply 不同，bind 仅改变函数内部 this 的指向，并不会立即执行函数，而是返回一个新的函数，需要手动调用该新函数来执行。

示例展示了如何模拟浏览器的 bind 方法实现。


Function.prototype.bind = function(obj){
  var self = this;
  return function(){
    return self.apply(obj,arguments);
  }
};
var obj = {
  name: 'Bob',
  age: 12
};
var func = function(){
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(obj);
func('sing','shopping');

this指向丢失的解决方案

最后讨论 this 丢失的问题。

在某些特定场景下，this 的指向会发生丢失，此时我们可以借助 call、apply 或 bind 方法来重新绑定 this 的指向。

示例展示了当 getName 方法作为 boy 对象的属性调用时，this 指向 boy 对象；但当另一个变量引用 getName 方法并作为普通函数调用时，this 指向全局对象 window。


var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefined

示例展示了即使在函数内部定义的函数，如果作为普通对象调用，this 同样指向 window 对象的情况。


var boy1 = {
  name: 'Bob',
  age: 12,
  getInfo: function() {
    console.log(this.name);
    function getAge() {
      console.log(this.age);
    }
    getAge();
  }
}
boy1.getInfo(); //Bob
        //undefined

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28