jajavascriptを再学習の7【配列メソッドを騙して使う件】

まぁ、サンプルと結果を先にだして見ましょう。

---

結果

---

いやいや、なかなかどうしてこういう結果なのです。
本によると、『配列メソッドを騙して使う』となってるのですが、
そんなに騙してるとも思えません。
Array.pushをArray.push.callとして呼び出し、
thisをObjectを指定しているというだけなので、
javascriptのArrayは、ArrayじゃなくてObjectでもOKという仕様
と言ってしまえばそれまでな気もします。。

本を読んだだけのときは、
lengthプロパティを追加してやらないと、
Array.push.callが失敗するのかと思いましたが、
設定しなくてもちゃんと動作します。（IE/CRM/FFX/OPR）

だから気分的には、こんな感じ(O^^O)


もっとわかりやすいサンプルとしては、こんな感じかな。。
配列にArray.pushした場合と、ObjectにArray.pushした場合。

 var abc = ["背負い投げ"];
 Array.prototype.push.call(abc,"出足払い");
 Array.prototype.push.call(abc,"横三角絞め");
 var def = {"得意技":"背負い投げ"};
 Array.prototype.push.call(def,"出足払い");
 Array.prototype.push.call(def,"横三角絞め");
 assertprop(abc,"abc");
 assert(true,"abc[0] = " + abc[0]);
 assert(true,"abc[1] = " + abc[1]);
 assert(true,"abc[2] = " + abc[2]);
 assertprop(def,"def");
 assert(true,"def[0] = " + def[0]);
 assert(true,"def[1] = " + def[1]);
 assert(true,"def[2] = " + def[2]);

jajavascriptを再学習の6【無名関数】と再帰

ということで、無名関数いきましょう。

 window.onload = function(){
  assert(true,"onload!!!");
 };

 var ninja = {
  seoi:function seoinage(){ assert(true,"ninja 背負い投げ!"); },
  ohsoto:function (){ assert(true,"ninja 大外刈り!"); }
 };
 ninja.出足払い = function(){ assert(true,"ninja 出足払い!");  };
 ninja.出足払い();
 ninja.seoi();
 ninja.ohsoto();
 assert(true,ninja.seoi.name);
 assert(true,ninja.ohsoto.name);
 assert(true,"------------END------------");

まぁこんな感じなわけですが。。

６行目７行目はそれぞれninjaObjectのプロパティとして関数を設定していますが、
前者は名前付き、後者は無名関数です。
それは、nameプロパティを表示させた結果(4)(5)を見ればわかるとおりです。

ただし、この【seoinage】という名前の関数、nameプロパティとして参照する外の用途
があるのかといわれれば、、ほとんどない。
なぜなら、関数の中からしか、この名前は参照できないからだ。
よって、再帰的に使う時には、その用途がある程度の話である。
（－＿－；）

あと、現実的に使うかどうか別にして、
９、10行目と(1)の表示を見ればわかるとおり、日本語もOKっすね。

---

ということで、無名関数のサンプルで、こんなノリのやつが本にはかかれていたわけですが、

 var ninja = {
  chop:function (n){
   return (n>1)? ninja.chop(n-1) + "-chop" : "chop";
  }
 };
 assert(true,ninja.chop(4));

しかし、、まぁよくないサンプルとしてはいいのですが、、
プログラム的には、あまりに美しくないわけです。
せっかく【ninja】というobjectを定義（生成？）しておきながら、
そのプロパティとしての関数の中で、また【ninja】を参照するという。。。
本では、色々な使い方の中でよくない理由を述べてるのはいいのですが、、
いや、これ、それ以前の問題！くらいの認識を持たないとダメだよね。。
で、結論としてはもちろん、

 var ninja = {
  chop:function chopper(n){
   return (n>1)? chopper(n-1) + "-chopper" : "chopper";
  }
 };
 assert(true,ninja.chop(4));

そう、こういう風に関数に名前をつけましょうという話でした。
もちろん、arguments.calleeという話題も無いわけじゃないが、それはそれで。(o^^o)

jajavascriptを再学習の5【javascriptのthis】

javascriptのthisはよくわからないっすよねー。
なにかというと、
【callの第一引数に文字列Objectを設定可能】
なのですよね。

前回のサンプルによると、

function foreacher(list,callback){
 for(var w=0;w<list.length;w++){
  callback.call(list[w],w);
 }
}
var waza=["背負投","払腰","袖釣込腰","内股すかし","出足払い"];
foreacher(waza,
 function(idx){
  assert(this == waza[idx],waza[idx]);
 }
);

なんてことを書いてるわけですが。。
よくthisって何かって説明で、
【自分自身を表すObject】みたいに書いてあります。
まったくその通りなんですが、、、
サンプルを見てみると、、
waza[idx]は明らかに文字列です。
typeof(waza[idx]) は"string"です。
でも、this == waza[idx]はtrueです。
でも、this === waza[idx]はfalseです。
まぁここまではよしとしましょう。
しかしながら、以下はどうでしょう。
●その１

var moji = {};
moji.abc = function(){alert("moji-abc");};
moji.abc();

これを実行すると、alertが出ます。当然の結果です。でも、、、
●その２

var moji = "moji";
moji.abc = function(){alert("moji-abc");};//１
moji.abc();//２

これを実行すると、エラーです。
ためしに、typeof(moji.abc)を見ると、undefinedです。
でも、１ではエラーでにはなりません。
２がエラーになります。そんな関数しらないよと。
１のときに、【文字列Objectにプロパティをい追加できません】とか出してエラーになってくれるといいんですけどね。

このthisはサンプルのようには使えますが、だからといってその"waza[idx]"に、プロパティとか設定できません。
そう、なんの使い道があるのでしょう。
謎です。

javascriptを再学習の4【javascriptのthis】

javascriptのthisはよくわからないんですが、（という設定で^^;）
とりあえず、assert関係をちょっと拡張です。
●assert.css

function getProperties( object )
ul#resulter { border: 2px ridge maroon; background-color: #ccffcc; padding: 0.25em 1.5em; margin-left: 0; }
li.pass { color: #006400; font-weight:bolder;}
li.fail { color: #dc143c; text-decoration: line-through; font-weight:bolder;}
li.prop { color: #808000; font-weight:bolder;}

●assert.js
まぁ無駄は多いですが、気にせずに。

function getProperties( object )
{
    var ar = [];
    for( var pname in object ){
        var pvalue = object[ pname ];
        ar.push( pname + ' : ' + pvalue + "<" +  typeof(pvalue)  + ">" );
    }
    return  ar;
}
function assert(bbb, disp) {
 var resulter = document.getElementById("resulter");
 if (!resulter) {
  resulter = document.createElement('ul');
  document.getElementsByTagName('body')[0].appendChild(resulter);
  resulter.setAttribute('id','resulter');
 }
 var li = document.createElement("li");
 li.className = bbb ? "pass" : "fail";
 var disper = bbb ? "●" + disp : "×" + disp;
 li.appendChild(document.createTextNode(disper));
 resulter.appendChild(li);
}
function assertp( disp,bmem) {
 var resulter = document.getElementById("resulter");
 if (!resulter) {
  resulter = document.createElement('ul');
  document.getElementsByTagName('body')[0].appendChild(resulter);
  resulter.setAttribute('id','resulter');
 }
 var li = document.createElement("li");
 li.className = "prop";
 var disper = bmem ? "→" + disp : disp;
 li.appendChild(document.createTextNode(disper));
 resulter.appendChild(li);
}
function assertlist(list,name) {
 assertp( "------■" + name + "■------",false);
 for(var w=0;w<list.length;w++){
  assertp(list[w],true);
 }
 assertp( "--------------------");

}
function assertprop(o,name){
 if(name == undefined) name = "unknown";
 assertlist(getProperties( o ),name);
}

●つづく

javascriptを再学習の3【callとapply】

●まずはサンプルコードから

function ohsoto(){
 var result = 0;
 for(var w=0;w<arguments.length;w++){
  result += arguments[w];
 }
 this.result = result;
}
var n1 = {};
var n2 = {};
ohsoto(1,2,1);//1
assert(true,this.result);
ohsoto.apply(n1,[1,2,3,4,"five"]);//2
ohsoto.call(n2,1,2,3,4);//3
ohsoto.call(this,1,2,3);//4
assert(true,n1.result);
assert(true,n2.result);
assert(true,this.result);

●１のohsoto関数呼び出し。これはこのまま呼び出してるだけなので、普通の挙動です。

●２のapply。これはあとからn1がthisとして呼ばれていることがわかります。

●３のcall。これも２と同様、n2がthisとして呼ばれていることがわかります。

●４のcall。これは、Globalなthisで呼んでるのがわかります。
実はこれだけでは、thisを指定して呼べる以外、何の意味があるかわかりません。
でも、CALLBACKとかすると、初めてなんとなく意味がわかります。
とりあえず、結果は以下。

★では、callBackを使用したサンプルコード

function foreacher(list,callback){
 for(var w=0;w<list.length;w++){
  callback.call(list[w],w);
 }
}

var waza=["背負投","払腰","袖釣込腰","内股すかし","出足払い"];
foreacher(waza,
 function(idx){
  assert(this == waza[idx],waza[idx]);
 }
);

●うん。なんとなく使い方がわかってきた。
javascriptをjavascriptらしくかくと、たぶん、無名関数が続出する結果となる。（と思う(o^^o)
よって、無名関数内でのthisと変数スコープは重要。この件はまたそのうち。

しかし、よく見ると上記のサンプルは妙である。
【javascriptのthisってなんだかわけわからん】
ともいえる。
これは次回にしよう。。(o^^o)

javascriptを再学習の2【関数とObject】

ということで、実際には今回が最初になりますね。
今回のテーマは、【関数とobject】です。
これは、javascriptでは、

  function Nin(){
  }

というのがあったときに、

 Nin();

とすれば当然呼べます。関数ですから。 でも、

 var n1 = new Nin()

とかいても呼べます。
これは正確には、コンストラクタによる呼び出しらしいのですが、
あまり細かいことを気にせずいうと、【this】が違うということです。
だから、C++における、関数とクラスのメンバ関数の違いみたいなものです。
C++のクラスのメンバ関数は、中身としては通常の関数で、
その関数を呼ぶときの【this】が違うだけなのです。
ということで、テストコードを書いてみます。

  var a;
  function Nin(){
   a = this;
  }

  Nin();
  assert(true,a);

  var n1 = new Nin();
  assert(true,a);
  assert(a==n1,"a==n1みたいですよ！");

で、結果は以下。

最初がWindowということは、関数呼び出しの場合にはthisがGlobalということです。
newでの呼び出しは、なんかObjectが生成されて、そこがthisになってるってことですね。 とうぜんthisになってるので、ここでメソッドやプロパティを追加したりとかが自由ってことです。

ただ、とくに違和感があるかっていうと、私的には特にないです。
なにしろ、C++において、mallocした領域をクラスのポインタでキャストして、
newしないでクラスのインスタンスを生成したような使い方をしたりしてたので(o^^o)

javascriptを再学習の1

まずは、学習のために、assert関数と、CSSをつくります。
ほとんどパクリですんません。
●assert.js

function assert(bbb, disp) {
 var resulter = document.getElementById("resulter");
 if (!resulter) {
  resulter = document.createElement('ul');
  document.getElementsByTagName('body')[0].appendChild(resulter);
  resulter.setAttribute('id','resulter');
 }
 var li = document.createElement("li");
 li.className = bbb ? "pass" : "fail";
 var disper = bbb ? "●" + disp : "×" + disp;
 li.appendChild(document.createTextNode(disper));
 resulter.appendChild(li);
}

●assert.css

ul#resulter { border: 2px ridge maroon; background-color: #ccffcc; padding: 0.25em 1.5em; margin-left: 0; }
li.pass { color: #006400; font-weight:bolder;}
li.fail { color: #dc143c; text-decoration: line-through; font-weight:bolder;}

●sample

●結果

javascriptを再学習の０

jQueryのソースが読みきれなかったのキッカケに、javascriptを再学習。
学習したのは、基本的にこの一冊。
JavaScript Ninjaの極意
これが、稀に見る私にとっての良書と感じたので、
ここで学習したことをメモって、今一度理解を深めたいと思う次第。(o^^o)
向うの方は好きだよね。忍者とか。
笑えるのは、原書の表紙。
でも、内容は秀逸です。