浅析js中的arguments

Astrian 发布于2019-08-21 11:33 / 2324人阅读

摘要：不过还好，我们可以通过的特性进行统一对应上面第一种情况对应上面第二种情况因为在严格模式下，对象被禁止为函数参数创建和方法。使用代替只能被定义在函数参数的最后一个位置，传进函数的多余参数都将传进这个数组结束语欢迎指正错误和提出更多的关于的内容

arguments就是传递进函数的参数列表，它是一个类数组对象-Array-Like Object.
类数组对象，简单来说就是拥有length属性，如我们常用的NodeList,arguments，但却不能使用数组方法，如forEach,map等

1. length

var foo = function () {
  console.log(arguments.length)
}
foo() // 0
foo(1, 2) // 2

2. Function.arguments永远不要使用，已被废除，直接使用arguemnts对象 3. arguments对象会被参数或变量arguments覆盖

var foo = function () {
  console.log(arguments) // [10]
}
foo(10)

var bar = function (arguments) {
  console.log(arguments) // 10
}
bar(10)

var foo = function () {
  console.log(arguments) // [10]
}
foo(10)
var bar = function (arguments) {
  arguments = 20
  console.log(arguments) // 20
}
bar(20)

4.将arguments对象转化为数组对象

arguments = [].slice.call(arguments)

arguments = Array.from(arguments)

待补充(暂时没想到其余简洁的写法.)

5. arguments.callee指向当前正在被执行的函数 -- 应当停止使用

最常见的一个例子
阶乘

var foo = function (x) {
  return x >= 1 ? x * arguments.callee(x-1) : 1
}
console.log(foo(3)) // 6

关于它更详尽的解释，我更愿意给你推荐下面这个链接。
link-可能需要自备梯子
值得注意的一点是，在下面我们提到的ES5 use strict模式下，使用arguments.callee会报错.

5. arguments数量 >= parameters数量 -- 双向绑定

var foo = function (x, y) {
  arguments[0] = 10
  console.log(arguments[0], x) //10, 10

  x = 20
  console.log(arguments[0], x) //20, 20

  arguments[1] = 30
  console.log(arguments[1], y) //30, 30

  y = 40
  console.log(arguments[1], y) //40, 40
}
foo(1, 2)

6. arguments数量 < parameters数量 -- 缺省参数未双向绑定

var foo = function (x, y) {
  arguments[0] = 10
  console.log(arguments[0], x) //10, 10

  x = 20
  console.log(arguments[0], x) //20, 20

  arguments[1] = 30
  console.log(arguments[1], y) //30, undefined

  y = 40
  console.log(arguments[1], y) //40, 40
}
foo(1)

7. use strict

以上2种情况，会给我们在使用时稍不注意，不去区分，就会犯错。
不过还好，我们可以通过ES 5的use strict特性进行统一.

//对应上面第一种情况
var foo = function (x, y) {
  "use strict"
  arguments[0] = 10
  console.log(arguments[0], x) //10, 1

  x = 20
  console.log(arguments[0], x) //10, 20

  arguments[1] = 30
  console.log(arguments[1], y) //30, 2

  y = 40
  console.log(arguments[1], y) //30, 40
}
foo(1, 2)

//对应上面第二种情况
var foo = function (x, y) {
  "use strict"
  arguments[0] = 10
  console.log(arguments[0], x) //10, 1

  x = 20
  console.log(arguments[0], x) //10, 20

  arguments[1] = 30
  console.log(arguments[1], y) //30, undefined

  y = 40
  console.log(arguments[1], y) //30, 40
}
foo(1)

因为在严格模式下，arguments对象被禁止为函数参数创建getter和setter方法。

8. 使用...Rest代替

...Rest只能被定义在函数参数的最后一个位置，传进函数的多余参数都将传进这个数组

var foo = function (x, y, ...z) {
  console.log(z) // [3, 4, 5]
  console.log(Array.isArray(z)) // true
}
foo(1, 2, 3, 4, 5)

结束语

欢迎指正错误和提出更多的关于`arguments`的内容~

私有云服务器托管源码浅析 cdn浅析 Argumentative argument

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86849.html

浅析Vue响应式原理（三）

摘要：响应式原理之不论如何，最终响应式数据都要通过来实现，实际要借助新增的。在函数内，首先实例化一个实例，会在稍后添加为响应式数据自定义的中发挥作用。只有数组和对象才可能是响应式，才能返回实例。参考链接技术内幕揭开数据响应系统的面纱源码 Vue响应式原理之defineReactive defineReactive 不论如何，最终响应式数据都要通过defineReactive来实现，实际要借助...

tomener 2019-08-23 13:49 评论0 收藏0
koa-router 源码浅析

摘要：代码结构执行流程上面两张图主要将的整体代码结构和大概的执行流程画了出来，画的不够具体。那下面主要讲中的几处的关键代码解读一下。全局的路由参数处理的中间件组成的对象。代码结构 showImg(https://segmentfault.com/img/remote/1460000007468236?w=1425&h=1772); 执行流程 showImg(https://segmentf...

SillyMonkey 2019-08-20 12:16 评论0 收藏0
浅析webpack源码之processOptions处理Options以及入口函数（三）

摘要：我们打开根据上次所返回的这个因为有了上次的基础，比较容易读了大体逻辑是这样的先定义一个空对象同上次的一个逻辑，还是一个目前的方式只有一个满足如果满足的会执行一系列函数这个函数直接结果是的影响是打比如如果满足的话当你的时候就会在页面上出我们打开bin/cli.js根据上次所返回的Options processOptions(options)这个因为有了上次的基础，比较容易读了,大体逻辑...

doodlewind 2019-08-23 14:45 评论0 收藏0
redux浅析

摘要：概念是一个状态管理容器使用可以更好的管理和监测组件之间需要通信的数据。参考源码参考链接 redux概念 redux是一个状态管理容器,使用redux可以更好的管理和监测组件之间需要通信的数据。 redux基本原则单一数据源在redux中,整个应用保持一个数据源,数据源是一个树形的结构状态只读状态只读意思是不能直接修改,需要通过dispatch action方式才可以,返回的是一...

galois 2019-08-22 16:40 评论0 收藏0
浅析ajax

摘要：如果响应的内容类型是或，这个属性将保存包含着响应数据的文档。响应的状态状态的说明当对象把一个请求发送到服务器的过程中会经历几个状态，直到请求被处理，然后才接收一个回应。 1.什么是Ajax Ajax：是Asynchronous Javascript And XML的简写，即异步JavaScript和XML用途：动态刷新局部数据，无需卸载整个页面，从而带来更好的用户体验Ajax核心：XM...

objc94 2019-08-19 17:57 评论0 收藏0