JavaScriptのthisの挙動について

質問

JavaScriptで次のCodeのようなコードを書いて実行したところ、Outputのようになります。
原因は、thisが保持できていなかったからです。
※先頭に#が付いているのが問題の箇所です。

Code:
Array.prototype.rs = function() // rs = random sort
{
var ret = {
list: new Array(),
length: new Number()
};
# var obj = {
# list: this
# };
var tmp = {
index: new Number(),
length: obj.list.length
};
while((ret.length = ret.list.length) < tmp.length)
{
tmp.index = Math.floor(Math.random() * (tmp.length - ret.length));
ret.list[ret.length] = obj.list[tmp.index];
obj.list.splice(tmp.index, 1);
}
return ret.list;
}

var list = new Array(1,2,3,4,5,6,7,8,9);
alert(list.rs());
alert(list.rs());

Output:
アラートウィンドウで 2,4,6,9,3,5,1,8,7 （一例）
アラートウィンドウで 出力無し

要するに、thisをobj.listに入れて、thisには触っていないのに、obj.listと同期してthisが消えているのです。

Code中で先頭に#を付けた部分を次のように変更すると期待通りに動作しましたが、腑に落ちません。

# var obj = {
# num: this.join('')
# };
# obj.list = obj.num.split('');

もっと簡潔な書き方や、迅速に動く書き方があればご教授頂きたいです。

回答No.2

Werner · ベストアンサー

> obj.list.splice(tmp.index, 1);
ここで 配列 this を破壊しています。
この時点で、obj.list == this (指してる先は同じ配列)なのですから、
obj.list.splice と this.splice は同じことです。

thisを破壊させない為には、参照だけコピーする
シャローコピーではなく、
各要素をコピーするディープコピーをすれば良いでしょう。

> Code中で先頭に#を付けた部分を次のように変更すると期待通りに動作しましたが、腑に落ちません。
> #var obj = {
> #num: this.join('')
> #};
> #obj.list = obj.num.split('');
2桁の要素が出てきたとたん破綻しそうな気がしますが…。
sliceメソッドは新しい配列を返してくれるので、これをつかえばいいでしょう。
var obj = {
　list: this.slice()
};

あと、ソートアルゴリズムに（シャッフル後の確率分布が均等になるという意味で）問題はないですが、
spliceは配列が長くなると結構重いので、要素の入れ替えだけでシャッフルできる
Fisher-Yates法がお勧めです。

お礼

解答ありがとうございます。

sliceってそんなことができたんですね。
勉強になります。

spliceが重くなるということも知りませんでした。
Fisher-Yates法…。初耳です。調べておきます。

何も知らないな、僕は。

ありがとうございました。

回答No.3

fujillin

すでにきちんと回答が出ていますので、いわずもがなですが・・・

元の配列を保存しておきたいのか直接シャッフルしたいのかが不明でしたので、両方可能な例。
flagをtureにすると元の配列は保存されます。（元はシャッフルされず新しい配列が返される）

var randomize = function(flag){
　var i, j, tmp, n = this.length;
　var a = flag?this.slice():this;

　for(i=0; i<n; i++){
　　j = Math.random()*n | 0;
　　tmp = a[i], a[i] = a[j], a[j] = tmp;
　}

　return a;
}

Array.prototype.rs = randomize;

var list = new Array(1,2,3,4,5,6,7,8,9);

alert("result=" + list.rs(true).join(", ") + "\nlist =" + list.join(", ")); //保存
alert("result=" + list.rs().join(", ") + "\nlist =" + list.join(", ")); //シャッフル

（インデントは全角空白になっています）

お礼

回答ありがとうございます。

これは…、Wernerさんの仰るFisher-Yates法というやつですね。
代入を,で区切れること、三項演算子の条件式の()がいらないことは初見です。

精進します。

回答No.1

babu_baboo

this のかいとうではありませんが・・・

var rs = function (a,b) {return Math.random () - .5};

alert ([0,1,2,3,4,5,6,7,8,9].sort (rs). sort (rs));

１かいだとかたよるらしいので、２かいする？！（笑）