Array.prototype 的泛型应用

2010-04-28

在开始这篇文章之前，按照「惯例」我们先来道题目（出处）。

题目

请说明下面语句的输出：

x = {shift:[].shift};
x.shift();
console.info(x.length);

如果你回答正确，那么说明你已经了解 Array 函数的泛型应用。在理解这到题目之前，我我们首先要了解数组（Array）的 shift 定义。

MDC 中已经对相关的说明描述得非常的清楚

shift is intentionally generic; this method can be called or 
applied to objects resembling arrays. Objects which do not 
contain a length property reflecting the last in a series of 
consecutive, zero-based numerical properties may not behave 
in any meaningful manner.

同时，EMCAScript 中的定义也同时定义了对于 shift 操作对于对象 length 属性的改变，那么基本上我们可以了解到上题中的答案为

扩散思维

如果对于上面的题目还无法理解，那么我们更清楚的说明 Array.prototype.shift 对对象的 length 的影响。

x = {};
Array.prototype.shift.call(x);
console.info(x.length);

很明显，对于对象如果为定义 length 属性，则 shift 则会自动加上 length 属性并设置为 0 。

既然已经说到这里，那么下面的题目输出什么留给大家去思考。

x = function (a, b, c) {};
Array.prototype.shift.call(x);
console.info(x.length);

重新认识泛型

很明显，上面的题目有可能还是无法说明本篇文章的题目。泛型（Generic）应用其实期前也说明过，但这里主要说明 Array 方法对于「类数组」的操作使用。

强制转换为数组

var args = Array.prototype.slice.call(arguments);

这个用法比较火星，其实期前也用过，详细参见这里。

迭代数据

Array.prototype.forEach.call(arguments, function(i) {
    console.info(i);
});

如果对象能够被递归，则出了「传统」的 for、while 等语句以外，还可以考虑使用 Array 的 forEach 属性（注意 IE 会是悲剧）。 Array 的 forEach 方法详见这里。

其他的 Array 扩展用法可以散发自己的思维，如果对应浏览器的 Array 没有对应的实现方法，可以参见这里。

其实，不仅仅是 Array 方法，很多浏览器原生对象的方法都是泛型，我们完全可以利用这这些特性

使代码更为的清晰
使用原生方法，效率更高。

-- EOF --

What is "this"? - Part.2

2010-03-25

好了，我们继续上次留下的问题。

var x = 10;
var foo = {
    x: 20,
    bar: function () {
        var x = 30;
        return this.x;
    }
};

console.log(
    foo.bar(),             // 1.
    (foo.bar)(),           // 2.
    (foo.bar = foo.bar)(), // 3.
    (foo.bar, foo.bar)()   // 4.
);

我们考虑语句 3. 和上面的两个语句有什么不同

(foo.bar = foo.bar)(), // 3.

相比语句 2.，语句 3. 中的 Grouping Operator 中有赋值（「=」）语句。那么，我们首先得明白赋值语句干了啥，继续参考对应的 ECMA 文档

11.13.1 Simple Assignment (= )

The production 
    AssignmentExpression : LeftHandSideExpression = AssignmentExpression 

is evaluated as follows:

1. Evaluate LeftHandSideExpression.
2. Evaluate AssignmentExpression.
3.Call GetValue(Result(2)).
4.Call PutValue(Result(1), Result(3)).
5.Return Result(3).

其中，最重要的步骤就是 PutValue，我们继续刨根问底

8.7.2 PutValue(V, W)

1. If Type(V) is not Reference, throw a 
   ReferenceError exception.
2. Call GetBase(V).
3. If Result(2) is null, go to step 6.
4. Call the [[Put]] method of Result(2), passing GetPropertyName(V) 
   for the property name and W for the value.
5. Return.
6. Call the [[Put]] method for the global object, passing 
   GetPropertyName(V) for the property name and W for the value.
7. Return.

所以，我们根据上面的定义可以得知，语句返回的是 foo.bar 的函数值。因此，赋值操作符返回的是「值（Value）」而不是「引用（Reference）」。

因为函数体需要 this 值获取 x 属性的值，那么接下来我们考虑改函数时调用时的上下文作用域以及背后的具体流程。尤其注意第七条规则

...
6. If Type(Result(1)) is Reference, Result(6) is GetBase( Result(1)). 
    Otherwise, Result(6) is null.
7. If Result(6) is an activation object, Result(7) is null. Otherwise,
    Result(7) is the same as Result(6).
8. Call the [[Call]] method on Result(3), providing Result(7) as 
    the this value and providing the list Result(2) as the 
    argument values.
…

那么在这种情况下，GetBase 操作实际上返回的是 null，因此此条语句函数执行的作用域为 global ，在浏览器中也就是 window 。

(foo.bar = foo.bar)()

那么，上面的语句中我们可以得知

Grouping Operator 中的赋值语句返回的是 foot.bar 的函数值（「Value」）
该函数执行的上下文作用域为 window

那么，在该函数中执行获取 this.x 也就是获取 window.x 的值。因此，这条语句返回的就是 10 。如果还不理解，考虑下面的代码段

var x = 10;
(function() {
    return this.x; // 这里会返回什么？
})();

如果理解了上面的语句的前因后果，那么题目中的语句 4. 就能举一反三给推导出来。首先我们来了解逗号运算符（「,」）的定义，我们就可以得之语句

(foo.bar, foo.bar)

返回的也是 foo.bar 的值「Value」而非引用「Reference」，那么接下来的事情其实就是和语句 3. 一样的了。因此，语句 4. 返回的液是 window.x 的值，也就是 10 。

总结下，那么上面的输出总的来说是

20 20 10 10

-- Split --

似乎目前为止，我们已经完全回答出了当初设定的问题。但恐怕会留下疑虑，就是传值「Value」和引用「Reference」之间到低有何不同、函数的作用域以及 this 的指向是否已经真正了解？

是的，这个题目已经完了，而我们的问题似乎还是没有怎麽搞清楚。OK，下次我们来详细讨论下这个问题…

-- To be continued --

What is "this"? - Part.1

2010-03-24

呃，这次的标题有些「装逼」，首先我们从道题目开始。

这是道有趣的题目：考虑下面的代码，考虑 console.log 输出的值：

var x = 10;
var foo = {
    x: 20,
    bar: function () {
        var x = 30;
        return this.x;
    }
};

console.log(
    foo.bar(),             // 1.
    (foo.bar)(),           // 2.
    (foo.bar = foo.bar)(), // 3.
    (foo.bar, foo.bar)()   // 4.
);

-- Split --

实际上，题目真正意思求 console.log 中依次四条语句的值。为了方便讲述，上面的语句分别标注为 1-4。

首先，是「1.」这条语句相对来说比较明朗（其实我们也经常这样写）。调用 foo 的 bar 方法，因此 bar 的 this 指向（作用域）为 foo，因此就等于是取 foo 上面的 x 属性（也就是 foo.x）的值，那么语句返回的值就是 20 。

然后是「2.」这条语句。我们可能对 Grouping Operator （也就是「()」）犹豫不决，那么我们找找 ECMA 中相关定义：

11.1.6 The Grouping Operator

The production PrimaryExpression : ( Expression ) is evaluated as follows:

    1. Evaluate Expression. This may be of type Reference.
    2. Return Result(1).

NOTE 

This algorithm does not apply GetValue to Result(1). The principal 
motivation for this is so that operators such as delete and typeof 
may be applied to parenthesised expressions.

因此，由于 foo.bar 是个引用「Reference」，所以使用组操作符 (foo.bar) 返回的引用是和 foo.bar 是一样的。

如果还不理解，那么考虑下面的表达式：

console.log(foo.bar === (foo.bar))

因此，

(foo.bar)();

返回的也是 foo.x 的值，也就是 20 。

目前为止上面的前两个语句的解释，想必已经了解。细心的读者会发现，其实题目的重点是在 3. 和 4. 两条语句。

要解释后面的两个语句恐怕这篇文章会塞不下，请留给我点喝水的时间，我们下篇继续。