jackieli123723 / jackieli123723.github.io

✅lilidong 个人博客
9 stars 0 forks source link

es6箭头函数 arguments问题 #75

Open jackieli123723 opened 5 years ago

jackieli123723 commented 5 years ago

es6箭头函数 arguments问题

我们在调试的时候经常用到console.log去打印调试信息,但是每次写都要一大堆而且参数还不定,这样就调试麻烦 ,我么可以封装一个log函数来处理

es5

var log = function(){ //ok
  return console.log.apply(console,arguments)
}
log(1) //1

用es6箭头函数实现呢?

const log = () => {console.log.apply(console,arguments)}???报错  Uncaught ReferenceError: arguments is not defined

查阅文档发现 那如果我们就是要访问箭头函数的参数呢?

你可以通过命名参数或者 rest 参数的形式访问参数:

let nums = (...nums) => nums;

ok 我们试试这个方式

const log = (...nums) => console.log(nums); // 没改变this输出数组 log(1) //[1]

const log = (...nums) => console.log.apply(console,nums); //ok 修复this log(1) //1

我们用https://babeljs.io/repl编译来还原事故现场

const log  = (...nums) => console.log(nums);

编译为

"use strict";

var log = function log() {
  for (var _len = arguments.length, nums = new Array(_len), _key = 0; _key < _len; _key++) {
    nums[_key] = arguments[_key];
  }

  return console.log(nums); //这里可以看出打印的是原数组
};

正确的方式

const log  = (...nums) => console.log.apply(console,nums);

编译为

"use strict";

var log = function log() {
  for (var _len = arguments.length, nums = new Array(_len), _key = 0; _key < _len; _key++) {
    nums[_key] = arguments[_key];
  }

  return console.log.apply(console, nums); //改变this
};