何故callメソッドがあってundefinedではないのか

Question

javascriptのbindメソッドは、第一引数にレシーバオブジェクトのthis参照を指定でき、第二引数以降にそのレーシバオブジェクトに渡す引数を指定できるものと認識しております。
下記のソースは、モジラデペロッパネトワークというサイトでbindメソッドを解説し、且つbindの使いどころを指南されているときに出くわしたものです。

list関数に引数を与えると配列として返ってきて、それをlist1変数に代入しています。次に、this参照部分は、必要ないみたいなのでundefined、
list関数に渡したい37を配列の値として持つ返り値をleadingThirtysevenList変数に代入しています。そこに、さらに1と2と3を配列として扱う
list関数に渡し37、1、2、3という四つの値を持つ配列をlist3変数に代入していると読みました。

ここで二つ疑問が沸いたのですが、list関数内にあるsliceメソッドのあとにチェーンされているcallはいったい何の意味があるのでしょうか。
またlist3変数に代入するとき、list.bindを格納しているleadingThirtysevenListに1、2、3という三つの値を引数として受け取っていますが、
第一引数は、undefinedではないのでしょうか。leadingThirtysevenListは、list.bindを格納しているので第一引数は、this参照を指定できるのでは、と思ったのです。

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 先頭の引数がプリセットされた関数をつくる
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

Answer 1

Array.prototype.slice

list関数内にあるsliceメソッドのあとにチェーンされているcallはいったい何の意味があるのでしょうか。

Array.prototype.slice は this 値を配列に変換(ArraySpeciesCreate)してから処理します。
疑似配列となる arguments を Function.prototype.call の第一引数に指定し、第二引数以降を未指定にすることで配列変換処理だけを利用しています。

• 22.1.3.22 Array.prototype.slice (start, end) – ECMA-262 6th Edition

Function.prototype.bind

またlist3変数に代入するとき、list.bindを格納しているleadingThirtysevenListに1、2、3という三つの値を引数として受け取っていますが、
第一引数は、undefinedではないのでしょうか。

第一引数は 37 です。
undefined が指定されているのは this 値の方です。

'use strict';
function list () {
  console.log('this -> '+ this);
  console.log('arguments -> ' + JSON.stringify(arguments));
  return Array.prototype.slice.call(arguments);
}

list(1, 2, 3);               // this -> undefined & arguments -> {"0":1,"1":2,"2":3}
list.call(null, 1, 2, 3);    // this -> null      & arguments -> {"0":1,"1":2,"2":3}
list.bind('hoge')(1, 2, 3);  // this -> "hoge"    & arguments -> {"0":1,"1":2,"2":3}
list.bind(0, 37)(1, 2, 3);   // this -> 0         & arguments -> {"0":37,"1":1,"2":2,"3":3}

• 19.2.3.2 Function.prototype.bind ( thisArg , ...args) – ECMA-262 6th Edition

Strict Mode と 非Strict Mode(Sloppy Mode)

this 値の扱いにはStrict Modeと非Strict Mode(Sloppy Mode)で違いがあり、Strict Modeでは指定された値がそのまま使われますが、「非Strict Modeでは this 値に Object 型しか指定できない」という制約があります(ES3 仕様の名残です)。
その為、非Strict Modeでは次の仕組みで this 値が決定されます。

• this 値に Object 型が指定された場合
  -> 指定された Object 型を this 値とする
• this 値に Object, Undefined, Null 型以外が指定された場合
  -> 指定された値を Object 型に変換し、this 値とする
• this 値に Undefined, Null 型が指定された場合
  -> 規定値であるグローバルオブジェクトを this 値とする(undefined, null は Object 型に変換できない)

Re: aaaaaaaa さん

Comments

[aaaaaaaa]

ご回答有難うございました。
array.prototype.sliceにthisを配列に変更するという機能があったのですね。所持している書籍には記載されていないのでとても勉強になります。

Answer 2

まずとても重要なお話をします。

argumentsオブジェクトは配列ではありません。

これがとても重要なので、これを頭の片隅に置いた状態で以下をお読みください。

(function(){
    console.log(Array.isArray(["a", "b", "c"])); // true
    console.log(Array.isArray(arguments));       // false
    
    // ちなみにargumentsは数字キーを添え字とした単なるオブジェクト(一般にarray likeと言います)
    console.log(arguments); // {0: "a", 1: "b", 2: "c", length: 3}
})("a", "b", "c");

そして、argumentsオブジェクトは配列ではないので、sliceメソッドをはじめとする、Arrayのprototypeにあるメソッド各種を直接呼び出すことが出来ません。

(function(){
    var list1 = ["a", "b", "c"].slice(1, -1); // 配列の場合は、sliceメソッドを直接呼び出せる
    console.log(list1); // ["b"]
    
    // argumentsは配列ではないので、sliceメソッドを持っていない。(のでundefinedを返す)
    console.log(typeof(arguments.slice)); // "undefined"
})("a", "b", "c");

ところでこのargumentsオブジェクト。確かにArrayではないのですが、構造自体は配列に非常に似ていますよね。

argumentsオブジェクトと配列との差は、Arrayオブジェクトでないがゆえに、Arrayのsliceメソッドを持っていないというだけです。

であれば、**明示的にthisにargumentsを渡せば、配列とみなして振る舞ってくれるかも？**と思うかもしれません。
実際のところその通りで、Arrayとみなして振る舞います。

(細かい条件を言えば、数字キーを添え字として、lengthプロパティに整数値を持つオブジェクトは、それ自体が配列でないとしても、配列として振る舞います。)

(function(){
    var list1 = ["a", "b", "c"].slice(); // 配列の場合は、sliceメソッドを直接呼び出せる
    console.log(list1); // ["a", "b", "c"]
    
    // 因みに、[].sliceとArray.prototype.sliceは(ユーザ側で上書きしてなければ)同一です。
    console.log([].slice === Array.prototype.slice); // true
    
    var list2 = Array.prototype.slice.call(arguments); // thisにargumentsを指定してsliceメソッドを呼び出す
    console.log(list2); // ["a", "b", "c"]
    
    // 因みにsliceの仕様上、元々のthisが配列じゃないものであっても、戻り値は必ずArrayに変換される。
    console.log(Array.isArray(list2)); // true
})("a", "b", "c");

これが最初の疑問の回答です。
配列ではないものに対して、callを用いて明示的にthisを指定することにより、配列として振る舞わせてしまうことで、sliceを実現しています。

そしてなぜargumentsオブジェクトにこんな面倒臭い処理を施すかというと、sliceの仕様を利用して、array likeなargumentsオブジェクトを、ピュアなArrayに変換するために使用しています。
上記のサンプルコードで、出力のlist2はArray.isArrayの結果がtrueになったことが確認できるかと思います。

---

次にbindの話ですが、 aaaaaaaa さんは以下の様な挙動を期待していた、ということであってますよね？

function f(){
    console.log(this);
}

var f1 = f.bind(undefined);

f1();       // これはきっとundefinedだろう。
f1("hoge"); // これはきっとthisが"hoge"に上書きされて「"hoge"」と表示されるだろう。

残念ながらbindの仕様はこうはなっていません。

以下に説明を加えますが、ここで1点注意があります。
それは、以降の挙動の説明はstrict modeかどうかで結果が変わるということです。

(※strict modeとはなにか？の説明はここでは深く話しませんが、「先頭に"use strict";を付けると、挙動チェックが厳密になる」程度に思ってくれても差し支えありません。)

以下は、strict modeでない場合について話します。

bindの第一引数にnullまたはundefinedを指定した場合は、その関数のthisは必ずグローバルオブジェクトを参照するようにします。

function f(){
    console.log(this);
}

// thisにundefinedを指定したため、グローバルオブジェクトで束縛される。
var f1 = f.bind(undefined);

// これはグローバルオブジェクト(ブラウザ上ではwindowオブジェクト)を指す。
f1(); // [object Window]

// 一度bindによってthisが束縛されたものに対して、callで強制的にthisを上書きしようとしても、上書きすることが出来ない。
f1.call("hoge"); // [object Window]

bindがこのようにthisを1度しか指定することが出来ない仕様なので、bindが返す関数は再度thisを指定するための引数を(必要が無いので)用意していません。

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// この時点でこれ以降のleadingThirtysevenListのthisは
// グローバルオブジェクト以外になり得ないことが確定する
var leadingThirtysevenList = list.bind(undefined, 37);

// なので、以降の関数呼び出しにおいて、第一引数でthisを上書きする必要がなく、
// 実際にそのような引数は提供されていない。(※thisと引数が束縛されただけの単なる関数を返す)
var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

これが2個目の疑問の回答です。

Comments

[aaaaaaaa]

ご回答有難うございました。
ご丁寧な回答をいただきまして、とても理解が深まりました。

申し訳ありませんが一つ質問させてください。
引数オブジェクト(arguments)は、配列のように、添え字的な意味合いを持つプロパティ名と値で構成されたものであって配列ではないので、array.prototypeがもつsliceメソッドが使えない。
そのために、callを使いthis参照に引数オブジェクトを与えることでarray.prototypeの持つsliceメソッドが使えるようになった。

別の回答者さんの回答で、array.prototype.sliceがthisを配列に変換することが分かりました。
ここで疑問なのですが、ここでいうthisは、array.prototype内のthisだと思うのですが、なぜarray.prototypeのthisに引数オブジェクトを与えることでsliceメソッドなどarray.prototypeがもつメンバを利用できるようになるのでしょうか。

[think49]

> なぜarray.prototypeのthisに引数オブジェクトを与えることでsliceメソッドなどarray.prototypeがもつメンバを利用できるようになるのでしょうか。
配列に変換する事で [[Prototype]] が Array.prototype になる為です。
プロトタイプチェーンの説明についてもう一度、目を通しておくことをお勧めします。

Answer 3

###A1

list関数内にあるsliceメソッドのあとにチェーンされているcallはいったい何の意味があるのでしょうか。

callは関数を実行します。
hoge(); でも、hoge.call(); でも通常は結果は同じです。
ただcallはthisを指定して実行することが出来るので、普通に呼び出すのとちょっと違った使い方が出来ます。（chromeのconsoleで実験）

function hoge(v){
  if(this !== window)console.log(this.x + ':' + v);
  else console.log('false' + ':' + v);
}
a = {x:2};
hoge(3); // false:3
hoge.call(a,3); // 2:3

Array.prototype.slice.call(arguments); つまりこれは
thisをarguments(関数に渡した引数を配列にしたもの)に固定してArrayのslice関数を呼び出す。ってことですね。（chromeのconsoleで実験）

[37,1,2,3].slice(); //[37,1,2,3]
[37,1,2,3].slice(0,2); //[37,1]
Array.prototype.slice.call([37,1,2,3]); //[37,1,2,3]
Array.prototype.slice.call([37,1,2,3],0,2); //[37,1]

###A2

第一引数は、undefinedではないのでしょうか。

bindもcallと同類(?)で、callは即時実行したのに対し、bindはthisを固定した関数オブジェクトを新たに生成しているようです。引数も固定でセットできるおまけつき。
第一引数をundefinedにするとthisが未設定状態になります。
（chromeのconsoleで実験）

function hoge(v){
  if(this !== window)console.log(this.x + ':' + v);
  else console.log('false' + ':' + v);
}
hoge(1); // false:1

a={x:2};
hoge2 = hoge.bind(a,37);
hoge2(); // 2:37

hoge3 = hoge.bind(undefined,37);
hoge3(); // false:37

Comments

[hirohiro]

私が書いた例はどうなってるかを確認するためのもので、逆に「それが出来たから何がうれしいのか？」はさっぱり分からないと思います。MDNのほうにはその部分が書かれていますが基本な事は分かってる前提で書かれているので、いきなり読むと理解を進めにくいこともありますね。ただここが読めるとJavascriptの世界が広がると思います。

[aaaaaaaa]

ご回答有難うございました。
重ね重ね申し訳ありませんが質問させてください。

>>this !== window
これは、this参照がグローバルオブジェクトでなければ・・・という式だと認識しました。aと{x:2}は、グローバルオブジェクトのプロパティですが、「// 2:3」と返ってくるということは、グローバルオブジェクトとグローバルオブジェクトのプロパティは、等価ということなのでしょうか。

[hirohiro]

a = {x:2};　これはwindowのプロパティ｢a｣が参照しているオブジェクトになります。
a={x:1,b:{x:2}};
もしこう書いたら、グローバル変数aに{x:1,b:{x:2}}このオブジェクトへの参照が代入され、a.bに{x:2}このオブジェクトへの参照が代入されます
そしてこんな風に参照可能です。「console.log(a.b.x); //2」

hoge.call(a,3); // 2:3
これによって関数hoge内のthisはaですよと指定しています。
aは{x:2}を参照しておりwindowオブジェクトでは無いので、ifを通過しています。

[aaaaaaaa]

ご回答有難うございました。
bindの第一引数に、nulやundefinedを指定するとグローバルオブジェクトを参照するようにcallも参照するからundefinedが第一引数だと「//false:37」になるわけですね。