※スマホ対応はしてません。

タグ: .apply()

必殺の .apply()フックを打つべし! 打つべし!(JavaScript おれおれ Advent Calendar 2011 – 17日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 17日目

.apply()で成り済ましができたり仕事をスルーして丸投げしたりする事ができますが、さらにもうひとつ、フックを行う事ができます。

フック(hook)というのはフック船長のフック、鉤爪の事で、処理を「ひっかける」ような事です。ある関数が実行される際に、独自のコードを実行させる事ができます。

フック(Hook)は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。また、フックを利用して独自の処理を追加することを「フックする」という。

あの処理がどこで呼ばれてるかわからないときに

具体例をひとつ。例えばjQueryで「どこかのタイミングで勝手にクラス名が追加されてしまって困っている」という場合を考えます。その場合は .addClass()を「フック」して、ログ出力の処理を追加します。

(さらに…)

.apply()を駆使してスルー力を極めろ(JavaScript おれおれ Advent Calendar 2011 – 16日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 16日目

(※「スルー力」は「するーか」じゃなくて「するーりょく」です。)

.apply()を使って他の関数を実行できる事は昨日示しました。

これを応用して、メソッドが呼ばれた際にそのままスルーして、別のメソッドが呼ばれたかのように振る舞う事ができます。

スルー

例によって配列風のオブジェクトを考えます。これに .join()を実装しましょう。

var obj = {
  "0": "a",
  "1": "b",
  "2": "c",
  length: 3,
  join: function() { /* ??? */ }
};

console.log(obj.join());  // "a,b,c"にしたい
console.log(obj.join("/"));  // "a/b/c"にしたい

はてさて、どういう設計で実装しましょうか。仕様は? 試験は?

いえ、自分で書かずに丸ごと放り投げてしまいましょう。ここで .apply()の出番です。

(さらに…)

他人の能力を自分のものにできる .apply()で高度な成り済ましを(JavaScript おれおれ Advent Calendar 2011 – 15日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 15日目

JavaScriptの関数は関数オブジェクト(Functionのインスタンス)なので、メソッドを使う事ができます。中でも最も使用頻度が高いのが .apply()だと思います。

.apply()を使うとその関数を実行する事ができます。……というと「はてな?」ですが、着目すべきは実行する際のコンテキストと引数を自由に設定できるという点です。

例えば配列風のオブジェクトを考えます。このオブジェクトは配列じゃないので、Arrayインスタンスなら使えるはずのメソッドが使えません。

var arr = ["a", "b", "c"];
console.log(arr.length);  // => 3
console.log(arr[1]);  // => "b"
console.log(arr.join("/"));  // => "a/b/c"

var obj = {
  "0": "a",
  "1": "b",
  "2": "c",
  length: 3
};
console.log(obj.length);  // => 3
console.log(obj[1]);  // => "b"
console.log(obj.join("/"));  // TypeError: 'join'というメソッドはない

配列じゃない、でも配列のメソッドを使いたい……という時に便利なのが .apply()です。

(さらに…)