■javascriptを理解するためのたった2つの大切なこと

9割ぐらいはハッシュ

何がハッシュなのか

javascriptで存在するほとんどのオブジェクトの実体はハッシュだよ。

var arr = [0,1,2,3];

とかをみると配列(人によってはリスト)に見えると思う。でも実際は違うんだ。

これは

var has = {0:0,1:1,2:2,3:3};

と基本的には等価なんだ。ただちょっと束縛されているメソッド(インターフェイス)が違うだけ。

ためしに

arr[4] = 4;
arr['x'] = 'string';
arr[-1]  = -1;

としてみよう。

Firebugで確認してみると[0, 1, 2, undefined, 4]というような値がかえってくるよ。

でもarr[-1]やarr['x']の値は保存されてないのかな？そんなことはないちゃんとアクセスできるんだ。

それどころかarr.xで'string'がかえってくるんだ。

別の例を見てみよう。

var fx = function(){};
fx[0] = 'somestring';

こうするとfx[0]に'somestring'が束縛される。

つまりfunctionも一つのハッシュだったんだ。

これでほとんどのものがハッシュだということが解ってくれたかな？

ハッシュじゃないのは文字列とか数字とかそいういシンプルなものだけなんだ。

ハッシュへのアクセス

ハッシュへはhash[name]でアクセスすることが出来る。

それ以外にもnameが演算子や空白を含まなくて頭が数字でない場合はhash.nameでアクセスできるんだ。

これでhash[name]が関数だったらhash.name(args)とできるよ。まるでメソッドみたいだね。

関数のあれこれ

スコープ

javascriptはレキシカルスコープを採用してるんだ。

var x = 'global';
var fx1 = function(){return x};
var fx2 = function(){var x = 'local';return x}

これの実行結果は以下になるよ。

fx1() -> 'global'

fx2() -> 'local'

fx1() -> 'global'

fx2の変数xはほかの場所に影響しないんだ。これは関数の中と外ではスコープが違うからなんだ。

でも以下のような場合に注意してほしい。

var x = 'global';
var fx1 = function(){return x};
var fx2 = function(){x = 'local';return x}

fx1() -> 'global'

fx2() -> 'local'

fx1() -> 'local'

fx2は自分のスコープに変数xがないからその外側スコープに探しに出かけたんだ。結果fx

つまり宣言文varはそのスコープに新しい名前を登場させる機能なんだよ。

宣言文

関数宣言の書き方って次見たいの覚えてる人が多いんじゃないかな？

function funcname(args){ do something};

でもこれはsystax sugerだってことを知ってほしい。

上でも使ってるんだけど。

var funcname = function(args){ do something};

と等価になる。もちろんどちらの書き方でもかまわないよ。

ハッシュを返す関数、関数を返す関数。closureとthis

関数は返り値として関数はハッシュを指定できるよ。次のハッシュを返す関数を見てみよう。

var fx = function(){
  var x = 0;
  return {
    'x':x,
    'add1':function(y){this.x = this.x+y;return this.x},
    'add2':function(y){x = x+y;return x}
  }
}
var obj = fx();

実行結果を見てみよう

obj.x -> 0
obj.add1(0) -> 0
obj.add1(0) -> 0

obj.x -> 0
obj.add1(1) -> 1
obj.add1(0) -> 0
obj.x -> 1

obj.x -> 1
obj.add1(0) -> 1
obj.add1(2) -> 2
obj.x -> 1

となる。

add1はthis.xにたいして演算をしている。つまり返された値が変化しているんだ。

add2は関数fxに閉じ込められた値に対して演算している。つまりこれらは別の値なんだ。

とここまでかいたら疲れた。

読んでくれた人ありがとう

追記

落書きのつもりでかいたんだけどブクマがついててびっくり。

ちゃんとまとめてなかったし、自分のブログに描いても見てくれる人はいないから増田に書いてみたよ。

ほかの言語や技術についても同じような解説が欲しかったら何らかの方法で言及してくれるとうれしいな。

さらに追記

ここまではてブが300突破してるみたいだけどいま、自分のブログへリンクを張ったら増田に書く意味がなくなるんじゃないかと思うんだ。

やらないけど。

こんなのもかいてみたよ、増田で。　http://anond.hatelabo.jp/20070621153600

Permalink | 記事への反応(9) | 20:06

ツイートシェア