まずソース:Qiitaをやめましょう。
別に参考にしたり新しい事に出会うために利用するのは良いのですが、Firefox作ってる団体が管理されているMDNの方が100倍信憑性が高いので裏付けを取るようにしてください。
まずはcallメソッドとはなんぞやを見に行きましょう。
JavaScriptのメソッドというのは、オブジェクトのプロパティに関数を代入したものです。
つまり関数とメソッドは定義上の違いはなくって、
thisに依存した設計の関数はオブジェクトのプロパティに持たせた方が便利だからメソッド、
thisに依存せず独立した関数はそのまま関数として取り扱った方が良い。
これくらいの違いです。
メソッドはFunction.prototypeで定義されているプロパティが使用可能です。
Function.prototype.callのページを見に行きます。
Arrayオブジェクトの中で宣言されてるthisがvar listsに置き換わるイメージでしょうか。
そのとおり、第一引数はthisになるとバッチリ書かれています。
ちゃんとMDNを見に行けば答えが書いてあるでしょ?
ここでcallメソッドの引数で渡されてるlistsはHTMLCollectionという配列とは異なったオブジェクトらしいですが、なぜ配列とは異なったオブジェクトがArrayオブジェクトの中のthisに置き変われるのか分からないです...。
JavaScriptは動的型付け言語なので、
Stringを期待している変数や引数に、NumberやObject、null値等をねじ込んでも別にエラーになりません。
(所持しているメソッドや文字列操作等で失敗して実行時エラーが飛び出す可能性はあるけどね)
Array.prototype.sliceというメソッドが存在したとして、
それのthisを無理やりすげ替えても別にエラーになりません。
これはどんなメソッドに関しても言えます。
もちろん、実行時エラーになる可能性も高いのでちゃんと裏付けを取ること。
じゃあなんで動くのか
少々寄り道しましたが、これが今回の話のキモになります。
まずArray.prototype.sliceに対応しているという
「配列の様なオブジェクト」に関して説明しなければなりません。
JavaScriptには配列(Array)に似てるけど型が違うというオブジェクトが沢山存在します。
まずなんでしたっけ?
element.getElementsByTagNameの戻り値を確認しましょう。
「elements は見つかった要素の「生」の NodeList で、サブツリー内に出現した順番になります。」
NodeListじゃねーか!
まぁいいや、このNodeListはNodeListという型であってArray型ではありません。
でもlengthプロパティはあるし[0]
というふうな添字プロパティでアクセス出来ますね?
この2つの条件を持つオブジェクトは「配列の様なオブジェクト」とJavaScriptで定義されており、
多くのArray.prototype系のメソッドのthisとして放り込んでも使える設計になっています。
Array ジェネリックメソッド - MDN
つまり、こんなお手製のしょぼいオブジェクトをあてがっても正常動作してしまいます。
JavaScript
1var obj = {
2 "0": "taro",
3 "1": "jiro",
4 "length": 2
5}
6Array.prototype.slice.call(obj, 0);
7// ["taro", "jiro"]
はい、見事本物の配列になって帰ってきました。
要するに実際に数値のプロパティにアクセス出来て、lengthプロパティを所持してれば何でも良いんですよ。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/21 01:03
退会済みユーザー
2019/02/21 01:24
2019/02/21 03:28