JavaScript深入之类数组对象与arguments about blog HOT 48 OPEN

@eczn 哈哈，把原型指向Array.prototype后就可以调用Array.prototype上的方法，行为上确实是跟数组一样，然而Array.isArray和Object.prototype.toString不认呐😂

from blog.

关于第一个问题，写个简单例子：

var fun1 = function(){}

fun1.test = 'test';

console.log(fun1.test)

函数也是一种对象，我们可以通过这种方式给函数添加一个自定义的属性。
这个解决方式就是给 data[i] 这个函数添加一个自定义属性，这个属性值就是正确的 i 值。

from blog.

@AngellinaZ 其实是 (...).i = i 给函数添加了 i 属性，然后通过 arguments.callee.i 获取了这个属性值:

(data[i] = function () { console.log(arguments.callee.i) }).i = i;

就相当于：

data[i] = function () { console.log(arguments.callee.i)
data[i].i = i;

from blog.

@jxZhangLi 哈哈，都可以啦，因为对于类数组对象的判断，其实可以很宽，也可以很严格，比如说判断 length 属性存在，更严格的话，可以判断 length 属性值必须是数字，再严格的话，可以判断 length 属性值必须大于 0，再再严格的话，可以判断 length -1 属性值必须存在，看 API 的设计者想严格到什么程度啦，在满足当前业务的情况下，即使设计的很宽松，也是可以的，但是作为一个库的设计者的话，还是应该设计的更加严格一点~

from blog.

@ClarenceC 有读者说看我的文章没有看懂，看评论看懂了😂

from blog.

哈哈，那我把我的回复再回复一遍哈，如果以后有相同的问题，大家也都可以看到~

from blog.

关于第二个问题，是把foo的参数传递给bar，可以看这个跑通的例子：

function foo() { bar.apply(this, arguments); }

function bar(a, b, c) { console.log(a, b, c) }

foo(1, 2, 3)

from blog.

关于caller，直接截图MDN哈：

from blog.

233 很接近 但是还是有所区别

from blog.

感觉如果类数组对象的原型指向 Array.prototype 他可以被认为是一个数组了。

毕竟 typeof {} 跟 typeof [] 结果是一样的。

from blog.

解释的很详细！！我再补充点

类数组检测

function isArrayLike(o) {
    if (o &&                                // o is not null, undefined, etc.
        typeof o === 'object' &&            // o is an object
        isFinite(o.length) &&               // o.length is a finite number
        o.length >= 0 &&                    // o.length is non-negative
        o.length===Math.floor(o.length) &&  // o.length is an integer
        o.length < 4294967296)              // o.length < 2^32
        return true;                        // Then o is array-like
    else
        return false;                       // Otherwise it is not
}

arguments

如图可以看出

1. arguments的长度只与实参的个数有关，与形参定义的个数没有直接关系。
2. arguments 有一个Symbol(Symbol.iterator)属性这个表示该对象是可迭代的

思考

• 字符串可以像类数组一样操作是因为js自动包装成String对象的原因，String对象照上面检测函数也是类数组对象。不过因为本身值不能被改变，所以给指定下标赋值不会改变。

from blog.

Array.prototype.concat.apply([], arguments)
这个是不是写错了，不应该是arguments

from blog.

@stoneyallen 十分感谢指出，确实是写错了。o(￣▽￣)ｄ

from blog.

谢谢楼主的分享！我把您的文章里的 demo 全敲了一遍，有两个地方不太明白，还请指教！
md格式的不太会用写的有点丑陋，还请见谅

callee 属性 解决闭包经典面试题的那个例子，虽然跑通了，但不明白是什么意思？
这是什么写法，不太懂？？
(data[i] = function () { console.log(arguments.callee.i) }).i = i;

传递参数里面，demo 没有跑通

`

     function foo(){

              bar.apply(this,arguments); 

             // 这句的意思是把 bar的参数 传递给 foo 吗？ 如果是的话，下面会打印出 3 ，

             console.log(arguments.callee.length); // 0
     }

    function bar(a,b,c){
              console.log(arguments); // []
              console.log(arguments.callee.length); // 3
    }
    foo()
    bar()

`

还有楼主应该在补充讲一下，arguments还有一个属性 caller 指向 调用当前函数的函数的引用

from blog.

@gnipbao 非常感谢补充！o(￣▽￣)ｄ

这个类数组对象的判断方法应该是来自《JavaScript权威指南》吧，很多库比如 underscore 和 jQuery 中也有对数组和类数组对象的判断，比如 jQuery 的实现:

function isArrayLike(obj) {

    // obj必须有length属性
    var length = !!obj && "length" in obj && obj.length;
    var typeRes = type(obj);

    // 排除掉函数和Window对象
    if (typeRes === "function" || isWindow(obj)) {
        return false;
    }

    return typeRes === "array" || length === 0 ||
        typeof length === "number" && length > 0 && (length - 1) in obj;
}

underscore 的实现：

  var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
  var isArrayLike = function(collection) {
    var length = collection.length;
    return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};

from blog.

var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
var isArrayLike = function(collection) {
var length = collection.length;
return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};
这种判断方式 array 也会返回 true

from blog.

@dongliang1993 确实是这样的, jQuery 和 underscore 的 isArrayLike 都是既判断数组又判断类数组对象的~

from blog.

这样的话，感觉 _.each 函数就有点问题了，
_.each = _.forEach = function(obj, iteratee, context) {
iteratee = optimizeCb(iteratee, context)
var i, length
if (isArrayLike(obj)) { // const obj = {a: 1, length: 1} 会直接进入到下面的循环，变成了obj[0],obj[1]
for (i = 0, length = obj.length; i < length; i++) {
iteratee(obj[i], i, obj)
}
} else {
const keys = _.keys(obj)
for (i = 0, length = keys.length; i < length; i++) {
iteratee(obj[keys[i]], keys[i], obj) // (value, key, obj)
}
}
return obj
};
其实应该是要用 for in 来遍历吧？

from blog.

@dongliang1993 没有问题呐，类数组对象是可以使用 for 循环遍历的呐~

from blog.

@mqyqingfeng 我的意思是，如果是 obj = { name: 'xiaoming', length: 1 } 这样的类数组对象，isArrayLike 判断为 true，然后进入相应的迭代器，用 for 循环是 iteratee(obj[i], i, obj) 这样的，可是 i 是 0, 1, 2...这样的数字，那 obj[0],obj[1] 都是 undefined呀，可是 obj 明明是有 'name' 这个属性的。不知道大佬有没有看明白我的意思。。。

from blog.

@dongliang1993 确实会出现这样的问题， { name: 'xiaoming', length: 1 } 可以通过 underscore 的 isArrayLike 验证，但是在 each 函数中，obj[0] 为 undefined。关键还是在于这个对象并不是一个严格意义上的类数组对象，isArrayLike 可以校验出我们开发中会用到的 arguments 对象，满足我们的开发需求，但是对于我们故意创造出的对象，确实也会漏掉~

from blog.

@dongliang1993 如果用 for in 遍历类数组对象的话，length 和 自定义的一些属性也会被遍历到，也会导致问题吧~

from blog.

好像说在函数中传递arguments给任何参数，将导致Chrome和Node中使用的V8引擎跳过对其的优化，这也将使性能相当慢。
请问博主知道其中的原因么？

from blog.

忘了在哪里看到的了

from blog.

@huangmxsysu 这个是来自 blueBird 的 wiki，https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments，以前也查过这个问题，之所以降低性能，是因为:

Leaking the arguments object kills optimization because it forces V8 to instantiate the arguments as a Javascript object instead of optimizing them into stack variables.

当时想不明白的是为什么 [].slice.call(arguments) 依然会导致性能损失，现在想想，可能是因为将 this 指向 arguments，所以依然保持了对 arguments 的引用吧

from blog.

其实本篇应该添加 leaking arguments 的部分，告诉大家不要乱用 arguments 😂

from blog.

噢好像是因为这个原因哈！
是啊，昨天看到你数组去重那篇中有个_.union函数,就想着应该讲arguments转换一下，类似这样

function union() {
	//最好能把arguments转换一下
	var args = new Array(arguments.length);
	for(var i = 0; i < args.length; ++i) {
	    args[i] = arguments[i];
	}
    return unique(flatten(args, true, true));
}

from blog.

flatten那篇

from blog.

@huangmxsysu 我并不确定直接传递 arguments 会不会导致性能损失，因为在 wiki 里也只是讲了以下三种情况会导致 leaking arguments:

function leaksArguments1() {
    return arguments;
}

function leaksArguments2() {
    var args = [].slice.call(arguments);
}

function leaksArguments3() {
    var a = arguments;
    return function() {
        return a;
    };
}

而且也讲到了：

STRICTLY fn.apply(y, arguments) is ok, nothing else is, e.g. .slice. Function#apply is special.

我简单做了个试验：

function otherFunc(a, b) {
  "use strict";
  return a + b;
}

function withArguments() {
    "use strict";
    var a = arguments;
    return otherFunc.apply(null, arguments);
}

function withLeakingArguments() {
  "use strict";
  var a = arguments;
  return otherFunc.apply(null, [].slice.call(arguments));
}

function withCopy() {
  "use strict";
  var a = [];
  var i, len = arguments.length;
  for (i = 1; i < len; i += 1) {
    a[i - 1] = arguments[i];
  }
  return otherFunc.apply(null, a);
}

console.time('with arguments')
for (var i = 0; i < 100000; i++) {
    withArguments(1, 2)
}
console.timeEnd('with arguments')

console.time('with leaking arguments')
for (var i = 0; i < 100000; i++) {
    withLeakingArguments(1, 2)
}
console.timeEnd('with leaking arguments')

console.time('with copy')
for (var i = 0; i < 100000; i++) {
    withCopy(1, 2)
}
console.timeEnd('with copy')

一次试验的结果为：

当然这个测试可能并不准确，并不能确定就是 leaking arguments 导致的性能损失，不过我想直接使用 arguments 的话，底层应该会有优化

from blog.

@mqyqingfeng

let  elements = document.getElementsByClassName('box');

Array.prototype.splice.call(elements, 0);

// Uncaught TypeError: Cannot assign to read only property 'length' of object '#<HTMLCollection>'

// slice方法可以

from blog.

@veedrin 感谢指出哈~ 确实没有注意到这个问题。

如果是普通的类数组对象，使用 splice 是可以转换的，比如：

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"] 

然而对于 HTMLCollection，length 属性为只读，splice 底层还是会修改 length 的长度，这才导致了报错。

from blog.

@mqyqingfeng 为什么你们判断是不是类数组，isArrayLike 函数需要这么多判断，直接查看它的 是否为 [object object] 和 length 存在就行了吗？难道在哪些情况下会有问题吗？这个我还没遇到过哦，请指教指教！

from blog.

这篇文章的内容比上那几章瞬间简单了很多啊😂,没有源码没有模拟.不过精彩的地方还是在评论区,很多学习的地方啊.

from blog.

为什么箭头函数中去掉了 arguments?

from blog.

补充一点箭头函数和 arguments 相关的规范部分：

当函数初始化的时候,如果是箭头函数，会设置内部属性 [[ThisMode]] 为 'lexical'

If kind is Arrow, set the [[ThisMode]] internal slot of F to lexical.

当创建函数上下文的时候:

If the value of the [[ThisMode]] internal slot of func is lexical, then

NOTE Arrow functions never have an arguments objects.

Let argumentsObjectNeeded be false.

from blog.

这里应该是数组，类数组本来就是对象~

from blog.

(data[i] = function () { console.log(arguments.callee.i) }).i = i;

请问大大，arguments.callee.i是给函数添加i属性，那外围的(...).i = i 是什么意思

from blog.

@HuangQiii 感谢指出哈，这里写错了，应该是数组

from blog.

var data = [];

for (var i = 0; i < 3; i++) {
    (data[i] = function () {
       console.log(arguments.callee.i) 
    }).i = i;
}

data[0]();
data[1]();
data[2]();

// 0
// 1
// 2

我想问下， 按照之前的文章，AO是在执行函数的时候才进行初始化，然后在函数执行的过程中改变AO。这行代码 data[0].i=0 执行的时候，还没有执行 data[0]，所以这时候还没有进入函数执行上下文，那么i是怎么保存到 data[0] Context 的 AO中的？

from blog.

@EtheriousNatsu i 的值是存放在 data[i].i 中的，当执行 data[0]() 的时候，此时相当于：

var data = [
   {i: 0},
   {i: 1},
   {i: 2}
]

function() {
  console.log(data[0].i)
}

这行代码 data[0].i=0 执行的时候，虽然没有执行 data[0]，但是 data[i] = function () { console.log(arguments.callee.i) } 已经执行了，i 的值就保存在这个函数对象中。

from blog.

var data = [];

for (var i = 0; i < 3; i++) {
    (data[i] = function () {
       console.log(arguments.callee.i) 
    }).i = i;
}

data[0]();
data[1]();
data[2]();
// 0
// 1
// 2

作者你好，你说的这里利用闭包，我没太理解，执行结果我是理解的。
上面循环完的结果就是下面这样

data[0] = function(){
  console.log(arguments.callee.i) 
}
data[0].i = 0;
data[1] = function(){
  console.log(arguments.callee.i) 
}
data[1].i = 1;
data[2] = function(){
  console.log(arguments.callee.i) 
}
data[2].i = 2;

所以

data[0](); //0
data[1](); //1
data[2](); //2

因为我理解的闭包就是在函数中声明了某个变量，然后在函数内部返回了一个子函数且子函数使用了这个变量；
😂然后上面的例子我感觉就是访问了一个(函数)对象的属性

--------分割线-------
是我看错了😂，没认真看标题
讲个闭包经典面试题使用 callee 的解决方法：,原来你说的意思是利用callee达到闭包的效果，并不是说利用闭包

from blog.

大大，请问这里是不是应该是形参和arguments不会共享？arguments代表实参的值呀

传入的参数，实参和 arguments 的值会共享，当没有传入时，实参与 arguments 值不会共享

除此之外，以上是在非严格模式下，如果是在严格模式下，实参和 arguments 是不会共享的。

`
function foo(name, age, sex, hobbit) {
'use strict';
console.log(name, arguments[0]); // name name

// 改变形参
name = 'new name';

console.log(name, arguments[0]); // new name name

// 改变arguments
arguments[1] = 'new age';

console.log(age, arguments[1]); // age new age

// 测试未传入的是否会绑定
console.log(sex); // undefined

sex = 'new sex';

console.log(sex, arguments[2]); // new sex undefined

arguments[3] = 'new hobbit';

console.log(hobbit, arguments[3]); // undefined new hobbit

}

foo('name', 'age')
`

from blog.

sex = 'new se
x';

console.log(sex, arguments[2]); // new sex undefined

大大，请问这里是不是应该是形参和arguments不会共享？arguments代表实参的值呀

传入的参数，实参和 arguments 的值会共享，当没有传入时，实参与 arguments 值不会共享

除此之外，以上是在非严格模式下，如果是在严格模式下，实参和 arguments 是不会共享的。

`
function foo(name, age, sex, hobbit) {
'use strict';
console.log(name, arguments[0]); // name name

// 改变形参
name = 'new name';

console.log(name, arguments[0]); // new name name

// 改变arguments
arguments[1] = 'new age';

console.log(age, arguments[1]); // age new age

// 测试未传入的是否会绑定
console.log(sex); // undefined

sex = 'new sex';

console.log(sex, arguments[2]); // new sex undefined

arguments[3] = 'new hobbit';

console.log(hobbit, arguments[3]); // undefined new hobbit

}

foo('name', 'age')
`

当没有传入时，实参与 arguments 值不会共享
// 测试未传入的是否会绑定
console.log(sex); // undefined

sex = 'new sex';

console.log(sex, arguments[2]); // new sex undefined

from blog.

(data[i] = function () {
console.log(arguments.callee.i)
})
js 的赋值语句会返回值，比如上面就会返回
function () {
console.log(arguments.callee.i)
}

from blog.

`
function test(a, b, c = 10) {
console.log(arguments); // [1, 2]
console.log(a, b, c); // 1 2 10
arguments[0] = 2; // [2, 2]
console.log(a); // 1
a = 3; // 3
console.log(arguments); // [2, 2]
b = 3;
console.log(arguments[1]); // [2, 2]
c = 20;
console.log(arguments); // [2, 2]
}

test(1, 2);
`
目前浏览器和node环境测试表明 实参和arguments之间没有什么关联了。有人解释下吗

from blog.

`
function test(a, b, c = 10) {
console.log(arguments); // [1, 2]
console.log(a, b, c); // 1 2 10
arguments[0] = 2; // [2, 2]
console.log(a); // 1
a = 3; // 3
console.log(arguments); // [2, 2]
b = 3;
console.log(arguments[1]); // [2, 2]
c = 20;
console.log(arguments); // [2, 2]
}

test(1, 2);
`
目前浏览器和node环境测试表明 实参和arguments之间没有什么关联了。有人解释下吗

MDN找到答案了，是因为我使用了参数默认值。

在严格模式下，剩余参数、默认参数和解构赋值参数的存在不会改变 arguments对象的行为，但是在非严格模式下就有所不同了。

当非严格模式中的函数没有包含剩余参数、默认参数和解构赋值，那么arguments对象中的值会跟踪参数的值（反之亦然）

from blog.

只有非严格模式下，且形参中没有rest参数、默认值和结构赋值时 arguments 才会与参数绑定。

from blog.

function foo() { bar.apply(this,arguments) }
这个里面的this 是谁的this呀，为啥这样写

from blog.