JavaScript，箭头函数能否访问this和arguments？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文聚焦于箭头函数里面的this和arguments，箭头函数是一种特殊的函数。它的代码内部的this以及arguments表现，和普通函数代码差别较大。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：nodejs@20.18.0，chrome@132.0.6834.84。箭头函数不是不支持this，只是this的设置方式不同。arguments对象虽然不支持，但是有替换方案。

箭头函数

箭头函数是一种更简洁的函数写法，通常用于简单的、无复杂逻辑的函数。

var f = (s, n) => {
  console.log(s, n);
};
f("苏", "南"); //苏 南

this访问

试图访问this：

var f = () => {
  console.log(this);
};
f();

纯node环境下，输出：

{}

页面环境下，输出：

Window {window: Window, self: Window, document: document, name: '', location: Location, …}

运行时绑定this失败

对于箭头函数来说，使用bind()/apply()/call()绑定this，是不生效的。

var f = (s, n) => {
  console.log(s, n); // 苏 南
  console.log(this); // {}
};
f.bind({ author: "sunan" }, "苏", "南")();

输出：

苏 南
{}

参考文章：

• https://newsn.net/say/js-func-bind.html

命名时绑定

箭头函数的this，并不支持后续的动态绑定。而是在定义的时候，就进行了绑定。而且this取自上下文，准备的来说，是取自上一层作用域。

var fn = function () {
  return (s, n) => {
    console.log(s, n); // 苏 南
    console.log(this); // { author: "sunan" }
  };
};
fn.call({ author: "sunan" })("苏", "南");

输出：

苏 南
{ author: 'sunan' }

所以，尽量少用箭头函数和this.的搭配组合，可能会产生歧义。

访问 arguments

试图访问arguments：

var f = () => {
  console.log(arguments);
};
f();

纯node环境下，输出：

[Arguments] {
  '0': {},
  '1': [Function: require] {},
  '2': {},
  '3': 'D:\\test.js',
  '4': 'D:\\'
}

页面环境下，直接报错：

VM135:3 Uncaught ReferenceError: arguments is not defined
    at f (<anonymous>:3:15)
    at <anonymous>:5:1

解决方案

使用...reset剩余参数，代替arguments。

var f = function (...args) {
  console.log(args); // [ '苏', '南' ]
};
f("苏", "南");

参考文章：

• https://newsn.net/say/js-func-args.html

继承外部arguments

如果箭头函数的外部，存在合法的arguments参数，这个在作用域里面属于全局变量。会直接导致箭头函数里面的arguments非法变合法。例如：

function su() {
  var f = () => {
    console.log(arguments);
  };
  f("没啥用的参数");
}
su("su", "nan");

输出是：

Arguments(2) ['su', 'nan', callee: ƒ, Symbol(Symbol.iterator): ƒ]

没有prototype

prototype这个词，听起来是很遥远。但是，它却能区分箭头函数和普通函数。箭头函数没有.prototype。

function s() {}
console.log(s.prototype); // {}

let n = () => {};
console.log(n.prototype); // undefined

对比方案

本文的对比代码如下。重大区别就是，没有使用箭头函数，而是普通的命名函数。

var f = function (s, n) {
  console.log(s, n); // 苏 南
  console.log(this); // { author: 'sunan' }
  console.log(arguments); // [Arguments] { '0': '苏', '1': '南' }
  console.log(Array.from(arguments)); // [ '苏', '南' ]
};
f.bind({ author: "sunan" }, "苏", "南")();

输出：

苏 南
{ author: 'sunan' }
[Arguments] { '0': '苏', '1': '南' }
[ '苏', '南' ]

结语

更多苏南大叔的JavaScript经验文章，请点击：

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。