JavaScript中this指向详解：ES5与ES6箭头函数的区别

作者：半夏时间：2026-10-26 01:44:25浏览：553

本文深入解析JavaScript中this关键字的指向规则。在ES5中，this指向取决于函数运行时的调用环境，默认指向全局window对象；而在ES6中，箭头函数没有自己的this，其值由定义时的外层代码决定。文章通过具体代码示例对比了两种环境下this的行为差异，帮助开发者准确理解并应用this机制。

1、ES5中的this指向

this是JavaScript语言中的一个关键内部对象，它在函数执行期间自动生成，代表当前执行上下文所属的对象，且仅在当前函数作用域内有效。
在es5规范中，this的具体指向并非固定不变，而是完全取决于函数被调用时的运行环境。
没有直接挂载者(或称调用者)的函数中this，非严格模式下指向window，在use strict严格模式下，默认为undefined。以下都是在非严格模式下讨论

var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);
  }
};
var fn = obj.fn;
fn();     // hello window!
obj.fn(); // hello obj!

当执行obj.fn()这种对象方法调用时，fn函数内部的this会动态绑定到当前的调用者obj。然而，如果直接执行fn()（即未通过对象引用调用），this则会回退指向全局window对象。

var fn = obj.fn; // 等价于 window.fn = obj.fn;
fn();            // 等价于 window.fn();

需要注意的是，匿名函数的执行环境通常被视为全局环境，这会影响内部this的指向结果。

var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name); // 'hello obj!'
    return function() {
      console.log(this.name); // 'hello window!'
    };
  }
};
obj.fn()();

2、ES6中的this行为

es6规范引入了箭头函数，其具有独特的处理机制。

箭头函数内部不拥有独立的this绑定，这意味着它不会像普通函数那样根据调用方式改变this的值。
在箭头函数体内部，this对象始终指向定义该函数时所处外层代码块的this，而不是函数被调用时的上下文。换句话说，箭头函数的this是词法绑定的，继承自外层作用域。
由于没有自己的this，箭头函数不能用作构造函数。尝试使用new操作符实例化箭头函数会直接抛出TypeError错误。
箭头函数内部没有arguments对象。若需获取剩余参数，应使用Rest语法（Rest Parameters）来替代。
此外，箭头函数不支持yield表达式，因此它不能被用作Generator生成器函数。

为了直观展示差异，我们将上述普通函数示例修改为箭头函数形式：

// 示例代码1
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: () => {
    console.log(this.name);  // 这里的this指向的外层的this,即window对象，想当于上打印的是console.log(window.name);
  }
};
var fn = obj.fn;
fn();       // hello window!
obj.fn();   // hello window!

// 示例代码2
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);   // hello obj!
    return () => {
      console.log(this.name); // hello obj!  // this指向外层的this，即obj对象
    };
  }
};
obj.fn()();

总结：

在es5规范中，this的值主要取决于函数运行时的调用环境，其指向的是实际调用该函数的对象。
而在箭头函数中，this的值在函数定义阶段就已经确定，并不受后续调用对象的影响。

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

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13