回答編集履歴

ビルトインオブジェクト、ネイティブオブジェクト、Function\.prototype\.apply, getElementById\.\.\.etc の説明を追加

2016/11/06 03:00

投稿

think49

スコア18166

test CHANGED Viewed

@@ -1,3 +1,7 @@
+### Function.prototype.apply.call
 関数が `Function.prototype` を継承していなくとも `TypeError` を発生させません。
@@ -22,4 +26,414 @@
+### Function.prototype.apply の用途
+用途によって呼び出し方も変わるものです。
+```JavaScript
+function fn () {
+  console.log(arguments);
+}
+fn.apply(null, [1, 2, 3]);  // [1, 2, 3]
+```
+ユーザ定義関数をそのまま呼び出す場合は `Function.prototype` を継承している事がコード制作者にとって自明なので問題ありません。
+しかし、その関数の所在が明らかでない場合、例えば引数で受け取った関数の場合はどうでしょう。
+```JavaScript
+function hoge (fn) {
+  fn.apply(null, [1, 2, 3]);
+}
+```
+この場合、`hoge()` が呼び出されるまで `fn.apply(null, [1, 2, 3]);` が実行可能か判断することが出来ません。
+それが**どんな関数であっても呼び出せることを保証するなら** `Function.prototype.apply.call` で呼び出すのが確実です。
+```JavaScript
+function hoge (fn) {
+  Function.prototype.apply.call(fn, null, [1, 2, 3]);
+}
+```
+### コールバック関数
+前節では説明を省略しましたが、引数に何らかのアクションをする場合は引数値をテストして例外処理を設けるのが安全な設計です。
+私はこの手の問題はESで規定されたビルトイン関数を参考にすることが多いのですが、ここでは `Array.prototype.forEach` を事例にあげます。
+```JavaScript
+[1, 2, 3].forEach(null); // TypeError: null is not a function
+```
+以下、ES7 (ES2016)より引用します。
+> **22.1.3.10 Array.prototype.forEach ( callbackfn [ , thisArg ] )**
+> 1. Let O be ? ToObject(this value).
+> 2. Let len be ? ToLength(? Get(O, "**length**")).
+> 3. If IsCallable(callbackfn) is false, throw a **TypeError** exception.
+>
+> - [22.1.3.10 Array.prototype.forEach ( callbackfn [ , thisArg ] ) - ECMAScript® 2016 Language Specification](http://www.ecma-international.org/ecma-262/7.0/#sec-array.prototype.foreach)
+> **7.2.3 IsCallable ( argument )**
+> 1. If Type(argument) is not Object, return false.
+> 2. If argument has a [[Call]] internal method, return true.
+> 3. Return false.
+> - [7.2.3 IsCallable ( argument ) - ECMAScript® 2016 Language Specification](http://www.ecma-international.org/ecma-262/7.0/#sec-iscallable)
+第一引数 `callbackfn` を Object 型に変換し、`[[Call]]` を持たない場合に `TypeError` 例外を発生させます。
+同様の処理をしたい場合は次のように書きます。
+```JavaScript
+function sample (callbackfn) {
+  callbackfn = Object(callbackfn); // Object 型に変換する
+  if (typeof callbackfn !== 'function') { // callbackfn が [[Call]] を持たないなら
+    throw new TypeError(callbackfn + ' is not a function');
+  }
+}
+```
+次に `Function.prototype.apply` を使うケースを想定します。
+上記コードを拡張するなら、引数 `callbackfn` が `Function.prototype` を継承しているかを判定すればいいでしょう。
+```JavaScript
+function sample (callbackfn, _arguments) {
+  callbackfn = Object(callbackfn); // Object 型に変換する
+  if (typeof callbackfn !== 'function') { // callbackfn が [[Call]] を持たないなら
+    throw new TypeError(callbackfn + ' is not a function');
+  }
+  if (!(callbackfn instanceof Function)) {
+    throw new Error(callbackfn ' must be an instance of Function');
+  }
+  callbackfn(_arguments);
+}
+```
+ただし、iframe等、異なる所属のドキュメント上で生成された関数に対して上記コードは期待通りに動作しないので厳密性を上げるにはもう少し手を入れる必要があります。
+```JavaScript
+if (!(callbackfn instanceof Function) || Object.prototype.toString.call(callbackfn) !== '[object Function]' || ) {
+  throw new Error(callbackfn ' must be an instance of Function');
+}
+```
+ここまで説明しておいて何ですが、実際にはここまで書くことはありません。
+**ECMAScript には [[Call]] を持たない値に対して関数呼び出ししようとした場合に TypeError 例外を返す仕様がある**からです。
+```JavaScript
+function sample (callbackfn, _arguments) {
+  callbackfn = Object(callbackfn); // Object 型に変換する
+  callbackfn(_arguments);          // [[Call]] を持つ値にたいして関数呼び出しを実行する
+}
+sample(null); // TypeError: callbackfn is not a function
+```
+そして、`Function.prototype.apply` にも `[[Call]]` が存在しない場合に `TypeError` 例外を発生させる規定があります。
+> **19.2.3.1 Function.prototype.apply ( thisArg, argArray )**
+> 1. If IsCallable(func) is false, throw a **TypeError** exception.
+> - [19.2.3.1 Function.prototype.apply ( thisArg, argArray ) - ECMAScript® 2016 Language Specification](http://www.ecma-international.org/ecma-262/7.0/#sec-function.prototype.apply)
+従って、Object 型への型変換処理を除けば次のように書けます。
+```JavaScript
+function sample (callbackfn, _arguments, thisArg) {
+  return Function.prototype.apply.call(callbackfn, thisArg, _arguments);
+}
+function callbackfn1 () {
+  console.log(arguments);
+}
+sample(callbackfn1, [1, 2, 3]); // [1, 2, 3]
+sample.__proto__ = null;
+sample(callbackfn1, [1, 2, 3]); // [1, 2, 3] ([[Prototype]] が Function.prototype でなくとも実行できる)
+sample({});                     // TypeError: Function.prototype.apply was called on #<Object>, which is a object and not a function
+sample(null);                   // TypeError: Function.prototype.apply was called on null, which is a object and not a function
+```
+### getElementById.apply()
+jQuery に影響されてか次のようなショートカット関数をたまに見かけます。
+```JavaScript
+function $ (id) {
+  return document.getElementById(id);
+}
+```
+このコードには `document` が現在のページの `document` に固定されているという問題があります。
+iframe要素、`DOMParser` で生成、`window.open` 等、他の所属の `document` も指定できたり、任意の要素ノードを指定できる方が汎用性が高まるでしょう。
+```JavaScript
+function $ (id, node) {
+  var getElementById = document.getElementById,
+      _arguments = Array.prototype.slice.call(arguments);
+  _arguments = [id].concat(_arguments.slice(2));  // 第二引数を取り除いた引数リストを生成する
+  if (Object(node) !== node || !('nodeType' in node) || typeof node.getElementById !== 'function') { // Object 型ではない、もしくは nodeType プロパティを持たない、もしくは getElementById プロパティが [[Call]] を持たないなら
+    node = document;
+  }
+  return getElementById.apply(node, _arguments);
+}
+console.log($('hoge'));
+console.log($('hoge', document));         // 任意の this 値を指定できる
+console.log($('hoge', document, 1, 2));   // document.getElementById('hoge', 1, 2) と等価 (将来的に getElementById が第二引数以降を持つようになっても対応できる)
+document.getElementById.__proto__ = null; // [[Prototype]] に Function.prototype がセットされていない状態にする
+console.log($('hoge'));                // TypeError: getElementById.apply is not a function
+console.log($('hoge', document));         // TypeError: getElementById.apply is not a function
+console.log($('hoge', document, 1, 2));   // TypeError: getElementById.apply is not a function
+```
+`getElementById` は DOM 規定のAPIですが、DOM がJavaScript 以外も考慮されたAPIという事もあってか [[Prototype]] に `Function.prototype` が存在する事を保証していません。
+多くの実装では `document.getElemehtById.apply` が期待通りの動作するよう実装されていますが、仕様にない以上、次のように `Function.prototype` を継承していない実装がある可能性があります。
+- [DOM Standard](https://dom.spec.whatwg.org/)
+- [DOM Standard 日本語訳](https://triple-underscore.github.io/DOM4-ja.html)
+```JavaScript
+document.getElementById.__proto__ = null;           // [[Prototype]] に Function.prototype がセットされていない
+document.getElementById.apply(document, ['hoge']);  // TypeError: document.getElementById.apply is not a function
+```
+前節と同様、`Function.prototype.apply` を直接呼び出せば安全に実装できます。
+```
+function $ (id, node) {
+  var getElementById = document.getElementById,
+      _arguments = Array.prototype.slice.call(arguments);
+  _arguments = [id].concat(_arguments.slice(2));  // 第二引数を取り除いた引数リストを生成する
+  if (Object(node) !== node || !('nodeType' in node) || typeof node.getElementById !== 'function') { // Object 型ではない、もしくは nodeType プロパティを持たない、もしくは getElementById プロパティが [[Call]] を持たないなら
+    node = document;
+  }
+  return Function.prototype.apply.call(document.getElementById, node, _arguments);
+}
+document.getElementById.__proto__ = null; // [[Prototype]] に Function.prototype がセットされていない状態にする
+console.log($('hoge'));
+console.log($('hoge', document));        // 任意の this 値を指定できる
+console.log($('hoge', document, 1, 2));  // document.getElementById('hoge', 1, 2) と等価 (将来的に getElementById が第二引数以降を持つようになっても対応できる)
+```
+### 更新履歴
+- 2016/11/06 12:00 コールバック関数、Function.prototype.apply, getElementById...etc の説明を追加
 Re: kkkke さん