Web Application Programming Wiki*

JavaScript/コレクション
- リスト
  - 作成
  - 要素数取得
  - 参照
  - 一部を取り出す
  - 末尾に追加
  - 先頭に追加
  - 挿入
  - 結合
  - 削除
  - 置換
  - 並び替え
  - 検索
JavaScript/バージョン
- バージョン
  - ECMA Script 3rd edition
  - ECMA Script 5

データ型
継承
- 基本形
- メソッドのオーバーライド
委譲
継承検討メモ

データ型

リテラル

null (小文字で!)
true, false (小文字で!)
undefined (リテラルとして記述可能)

文字列 → 文字列リテラル参照
- "abc"
- 'abc'
- バックスラッシュによるエスケープは "" でも '' でも利用可

配列 → ECMAScript/ビルトインオブジェクト#c1c3724a
- ["a","b",,"c"]
- [123,456,,] ← ]の前のカンマは避けるべき。IEとその他とで挙動が異なる。

自動型変換

String + Number , Number + String → NumberがStringに変換される
- の場合はNumberに変換

var x = "123" + 4;
var y = "123" - 4;
var z = "10" * 4;
var w = "10" / 4;

document.write(x + "\n"); // 1234
document.write(y + "\n"); // 119
document.write(z + "\n"); // 40
document.write(w + "\n"); // 2.5

明示的な型変換

文字列→数値

4とおり方法がある。

Number(value) → ECMAScript/型#toNumber
parseInt(value)
parseFloat(value)
演算子による自動型変換を利用

parseIntは整数へ変換。

基数(第二引数)を指定すべき。基数を指定しない場合、自動的に推測されるが、ブラウザにより8進数表記のサポート有無が異なる。なお、ECMAScript3rd:B.1によれば8進数表記は仕様から削除されている。

空白は無視。指定した基数で扱えない文字が出現すると、それ以降は無視。

var x = parseInt("0100");
var y = parseInt("0100", 10);
var z = parseInt("0x100");

document.write(x + "\n"); // 64(IE) or 100(Chrome)
document.write(y + "\n"); // 100
document.write(z + "\n"); // 256

var a = parseInt("  123   ", 10);
var b = parseInt("123.456", 10);
var c = parseInt("123xyz", 10);
document.write(a + "\n"); // 123
document.write(b + "\n"); // 123
document.write(c + "\n"); // 123

parseFloatは実数へ変換。

小技として + (単項演算子のほうの+)で数値に変換できる(ECMAScript3rd:11.4.6)。
parseIntとは変換ルールが異なる。実数も扱える。

var x = "123";
var y = (+x);
document.write(x + " " + typeof x); // 123 string
document.write(y + " " + typeof y); // 123 number

var x = "0100";
var y = "0x100";
var z = "100point";
var v = " 100  ";
var w = " 100.3e-4  ";
document.write((+x) + "\n"); // 100 (IE/Chromeともに)
document.write((+y) + "\n"); // 256
document.write((+z) + "\n"); // NaN (数値として解釈できないとNaN)
document.write((+v) + "\n"); // 100 (前後の空白はあってもよい)
document.write((+w) + "\n"); // 0.01003 (実数も可能)

数値 → 文字列

Number.toString(radix)
 radix 基数。2-36が指定可能。省略時は10。

var x = 100;

document.write(x.toString() + "\n");   // 100 (10進数)
document.write(x.toString(10) + "\n"); // 100 (10進数)
document.write(x.toString(16) + "\n"); // 64  (16進数)

var x = 16.5;

document.write(x.toString(10) + "\n"); // 16.5 (10進数)
document.write(x.toString(16) + "\n"); // 10.8 (16進数)

var x = 123e-4;

document.write(x.toString(10) + "\n"); // 0.0123 (10進数)

継承

基本形

function Ko(){
  this.bar="barValue";
}
Ko.prototype=new Oya();

Oya()で許容できない副作用が起きてしまう場合には使えない。

メソッドのオーバーライド

Ko.prototype.dosome = function(foo,bar) {...};

オーバーライドした親のfunctionを呼びたい場合は？

Ko.prototype.dosome = function(foo,bar) {

  Oya.prototype.dosome.apply(this, [foo, bar]);

};

arguments を使ってこうもかけるか？

Ko.prototype.dosome = function() {

  Oya.prototype.dosome.apply(this, arguments);

};

委譲

function Front(){
  var worker = new Worker();
  this.dofoo = function(a, b){ return worker.dofoo(a, b);}
}

継承検討メモ

var Foo = function() {
};
var Bar = function() {
};
Bar.prototype = new Foo();

var fooObj = new Foo();
var barObj = new Bar();

alert(fooObj.constructor === Foo); // true
alert(barObj.constructor === Bar); // false
alert(barObj.constructor === Foo); // true

// prototypeを書き換えた場合でも
// constructorが、オブジェクトを作ったfunctionを指すようにする
var Foo = function() {
};
var Bar = function() {
};
Bar.prototype = new Foo();
Bar.prototype.constructor = Bar; // ★prototype.constructorを明示的に指定

var fooObj = new Foo();
var barObj = new Bar();

alert(fooObj.constructor === Foo); // true
alert(barObj.constructor === Bar); // ★true
alert(barObj.constructor === Foo); // ★false


// 強引にsuperを実現

var Foo = function() {
  this.name = "foo";
};
Foo.prototype.hello = function(target) {
  alert("hello, " + target + ". I am " + this.name);
}

var Bar = function() {
  this.name = "bar";
};
Bar.prototype = new Foo();
Bar.prototype.constructor = Bar; // ★prototype.constructorを明示的に指定
Bar.prototype.hello = function(target) {
  alert("Kon-nichiwa, " + target + ". I am " + this.name);

  var backup = this.constructor.prototype.hello;
  delete this.constructor.prototype.hello;
  this.constructor.prototype.hello.apply(this, arguments);
  this.constructor.prototype.hello = backup;
//  Foo.prototype.hello.apply(this, arguments);
}

var fooObj = new Foo();
var barObj = new Bar();

fooObj.hello("aaa"); // Foo
barObj.hello("aaa"); // Bar, Foo

JavaScript