クラス -> 内部関数

Posted by muchag | JavaScript |
初回投稿：2015-02-28 (土) 0:27:09 | 最終更新：2015-02-28 (土) 0:38:35

内部関数は、ちょっと特殊みたい。

内部関数とは

クラス内に設置したローカルメソッド。
外部からは呼べない。

< View plain text >
js

  1. var hoge = ( function() {
  2.  
  3.   // constructor
  4.   var hoge = function() {
  5.     this.x = 5;
  6.   };
  7.  
  8.   // 内部関数（クラス内メソッド）
  9.   function moge() {}　← これ
  10.  
  11.   var p = hoge.prototype;
  12.  
  13.   p.f1 = function() {
  14.     return true;
  15.   };
  16.  
  17.   return hoge;
  18. })();

　

呼び出し

コンストラクタからでも、公開メソッドからでも関数名（メソッド名）で呼び出せた。

< View plain text >
js

  1. p.f2 = function() {
  2.     moge();
  3. };

　

特殊なところ
this

内部関数内では、this を使えない。
解決策は後述。
　

引数

引数があると、通常通りでは呼び出せなかった。

< View plain text >
js

  1. function moge( arg ) {}
  2.  
  3. p.f2 = function() {
  4.     moge( arg );
  5. };

これでは、syntax error にはならないけど、値が渡らない。
　

解決策

上記２点を一度に解決。
（解決法はわかったけど、まだあまりよく理解できていない）

apply メソッド、または call メソッドを利用する。

つまり、下記のように呼び出す。

< View plain text >
js

  1. function moge( arg ) {}
  2.  
  3. p.f2 = function() {
  4.     moge.apply( this, arg );
  5.     moge.call( this, arg );
  6. };

　

誰それ

参考サイトを見ると

callはFunction.prototypeの中にあります。

あと味：applyとcallの使い方を丁寧に説明してみる

と書いてあるので、プロパティ・オブジェクト からの呼び出しだから、というなのかもしれないけど、今はまだよくわかっていない。
　

this はどこへいった・・・

引数に指定した this。
でも、内部関数側は受け取っていない。

どうも、自動的に（強制的に？暗示的に？）受け取るらしく
これで、内部関数内で this を利用できる。

また、何も this を渡さなければいけないわけではなく
要は内部関数内で this と記述して利用したいオブジェクトを指定すればよいらしい。
　

両者の違いは？

apply

< View plain text >
js

  1. var args = [ 1, 2, 3 ];
  2. moge.apply( this, args );

apply は、this 以外の引数を、配列にまとめて渡す。
本当に配列を渡すときとか、引数が多い時、または変更が頻繁にあるときなどには便利。
　
call

< View plain text >
js

  1. moge.call( this, 1, 2, 3 );

call は、this 以外の引数を列挙して渡す。
　

参考サイト

あと味：applyとcallの使い方を丁寧に説明してみる

Posted by muchag | JavaScript |
初回投稿：2015-02-28 (土) 0:27:09 | 最終更新：2015-02-28 (土) 0:38:35

クラス -> グレートなつくりかた

Posted by muchag | JavaScript |
初回投稿：2015-02-27 (金) 21:27:25 | 最終更新：2015-02-28 (土) 0:03:11

JavaScript は滅多に使わないので、今までクラスとは無縁できたけど、これからは是非クラスを利用していきたい。

以前、つかみ という JavaScript クラスの基本について書いたけど、今回は グレートなつくりかた という記事を見つけたので、改めて基本記事を作成。

グレートなつくりかた
< View plain text >
js

  1. var hoge = (function() {
  2.  
  3.   var FOOFOO = 777; // クラス内定数
  4.  
  5.   // constructor
  6.   var hoge = function(arg) {
  7.     this.x = 5;
  8.     this.y = 10;
  9.     this.z = arg;
  10.   };
  11.  
  12.   var p = hoge.prototype;
  13.  
  14.   p.f1 = function() {
  15.     return true;
  16.   };
  17.  
  18.   p.f2 = function() {
  19.     return false;
  20.   };
  21.  
  22.   return hoge;
  23. })();
  24.  
  25. var instance = new hoge(1);
  26. // hoge {x: 5, y: 10, z: 1, f1: function, f2: function}

Qiita：【javascript】やさしいクラスの作り方
より引用。
　
この書き方だと、１クラス１ブロックになって、見やすい。 😎
　
せっかくなので、覚書用に改変。

< View plain text >
js

  1. var hoge = ( function() {
  2.  
  3.   var FOOFOO = 777; // クラス内定数
  4.   var foo = 777;    // クラス内変数
  5.  
  6.   // constructor
  7.   var hoge = function( arg ) {
  8.     this.x = 5;
  9.     this.y = 10;
  10.     this.z = arg;
  11.   };
  12.  
  13.   // 内部関数（クラス内メソッド）
  14.   function moge() {}
  15.  
  16.   var p = hoge.prototype;
  17.  
  18.   p.f1 = function() {
  19.     return true;
  20.   };
  21.  
  22.   p.f2 = function() {
  23.     return false;
  24.   };
  25.  
  26.   return hoge;
  27. })();
  28.  
  29. var instance = new hoge(1);
  30. // hoge {x: 5, y: 10, z: 1, f1: function, f2: function}

　

参考サイト

Qiita：【javascript】やさしいクラスの作り方
Qiita：[JavaScript]クラス、関数、オブジェクト クラス

Posted by muchag | JavaScript |
初回投稿：2015-02-27 (金) 21:27:25 | 最終更新：2015-02-28 (土) 0:03:11

クラス -> つかみ

Posted by muchag | JavaScript |
初回投稿：2011-10-27 (木) 16:57:36 | 最終更新：2015-02-27 (金) 23:56:40