JavaScriptメモのバックアップの現在との差分(No.0)

追加された行はこの色です。
削除された行はこの色です。
[[HTML/JavaScript集]] > JavaScriptメモ
* JavaScriptメモ [#d10cc88d]
#setlinebreak(on);

#contents();

//** javascript クリップボード コピー
//** Dateオブジェクト(JavaScript)
//** 変数のデータ型を調べる(JavaScript)
//** 全角半角チェック(JavaScript)

** 変数のダンプを取得する [#i185f5c5]
#mycode{{
var myDump = function(obj /*, indent */){

	var  undefined;

	var indent = arguments.length > 1 ? arguments[1] : "";
	if (obj === null) {
		return "null";
	}
	if (obj === undefined) {
		return "undefined";
	}
	if ((typeof obj == "string") || (obj instanceof String)) {
		return obj.toString();
	}
	if ((typeof obj == "number") || (obj instanceof Number)) {
		return obj.toString();
	}
	if ((obj instanceof Array) || (obj instanceof Object)) {
		var dumpStr = "{\n";
		var subIndent = indent + "\t";
		for (var key in obj) {
			try {
				dumpStr += subIndent + key + "=" + myDump(obj[key], subIndent) + "\n";
			} catch (e){
				dumpStr += subIndent + key + "=" + subIndent + "unknown" + "\n";
				break;
			}
		}
		dumpStr += indent + "}";
		return dumpStr;
	}
	return "unknown";
};
}}

** 文字列をJSONオブジェクトに変換 [#ge275fba]
#mycode{{
var text = '{"var1":"abc", "var2":10 }';
var obj = JSON.parse(text);
alert(obj.var1);       // abcと表示される
alert(obj.var2);       // 10と表示される
}}
#html(<div style="padding-left:10px;">)
※文字列の外側の括りはシングルクォーテーション、JSONのキー名はダブルクォーテーションで括るのが良さげ。
#html(</div>)

** JSONオブジェクトを文字列に変換 [#u8725415]
#mycode{{
var obj = {"var1":"abc", "var2":10 };
var str = JSON.stringify(obj);
alert(str);
}}

** undefined や null の判定方法(typeof を使わない方法) [#x126a3df]

変数が undefined かどうかを判定するのによく使用されるのは「 typeof var1 === "undefined" 」というコードだが、
これは、以下の不具合を回避する為に、このような書き方が行われている。

(1) undefined が定数でなく変更可能な変数として定義されている為、undefined の中身が undefined でない可能性がある。
(2) 変数自体が未定義の場合にスクリプトエラーとなってしまう

ここでは typeof を使用せずに undefined の判定を行う方法を記載する。

undefined を使用しない書き方
#mycode{{

// 以下は上記(2)の不具合は残っている状態
var var1;
if (var1) {
  alert("var1は定義済み");
} else {
  alert("var1は undefined、null、false、0 のどれか");
}

// 親オブジェクトがある場合は(2)の不具合も起きない
var ary = [1,2,3];
if (ary[10]) {
  alert("ary[10]は定義済み");
} else {
  alert("ary[10]はundefined、null、false、0 のどれか");
}

// Mapでも同様に親オブジェクトがあるので(2)の不具合は起きない
var obj = {"a":"A"};
if (obj["x"]) {
  alert("obj[x]は定義済み");
} else {
  alert("obj[x]はundefined、null、false、0 のどれか");
}
}}

上記 var1 のケースで、以下のように変数そのものが未定義の場合には使用できない。
#mycode{{
//var var1 = "xx";   // コメントアウト
if (var1) {                         // <- var1は宣言されていないのでスクリプトエラー
  alert("var1は定義済み");
} else {
  alert("var1はundefined、null、false、0 のどれか");
}
}}

なので、どうしても typeof  ・・ とか書きたくないなら、必ず存在する親要素を指定する。
#mycode{{
if (window.var1){
  alert("var1は定義済み。");
} else {
  alert("var1はundefined、null、false、0 のどれか");
}
}}

undefined のみを判定したい場合は、さらに undefined を自分で定義する方法もある（jQuery方式）
#mycode{{
(function(){

    var undefined;      // 中身が undefined な変数を定義

    // 変数 undefined の中身は必ずundefined となる為、以下のコードでも正確に undefined の判定ができる
    if (window.var1 === undefined){
        alert("var1はundefined");
    }
})();
}}

《結論》
[[Node.js]] 等のサーバサイドJavaScriptだと windowオブジェクト自体がないので、
変数は任意の名前空間配下に置くか、素直に typeof var1 === "undefined" とした方が良いかも。


** クロージャ [#ke4c595d]
#mycode(){{
var addCount = (function(){
	var val = 0;
	return function(){
		val = val + 1;
		return val;
	};
})();

var cnt = 0;
cnt = addCount();
console.log(cnt);
cnt = addCount();
console.log(cnt);
}}

** プロトタイプチェーンによる継承 [#g45fd0b1]

#mycode(){{
// コンストラクタの定義
var Person = function(name, age){

    // インスタンス変数の初期化
    this.name = name;
    this.age  = age;

    /*  
    // 良くないメソッド定義１（Personインスタンス毎に関数オブジェクトが生成される）
    this.setAge = function(age){
        this.age = age;
    };

    //  良くないメソッド定義２（この方法でもメソッドは個々のオブジェクトに格納される）
    function setAge(age){
        this.age = age;
    };
    */
};
// インスタンス変数やメソッド定義はプロトタイプ指定しておく
Person.prototype.name = "unknown";
Person.prototype.age  = 0;
Person.prototype.setAge = function(age){
    this.age = age;
};
Person.prototype.dispInfo = function(){
    console.log("----- dispInfo -----");
    console.log(this.name + "(" + this.age + ")");
};

// 継承
var Man = function (name, age) {
    Person.call(this, name, age);  // 親オブジェクトのコンストラクタを呼び出し（Javaでの super() と同じ）
    this.sex = "MAN";
};
Man.prototype.sex = "?";
Man.prototype.dispInfo2 = function(){
    console.log("----- dispInfo2 -----");
    console.log(this.name + "(" + this.age + "," + this.sex +")");
};
Object.setPrototypeOf(Man.prototype, Person.prototype);    // プロトタイプとなるオブジェクトを指定

// 親クラスのインスタンス生成
var personObj = new Person("suzuki", 20);

// 継承クラスのインスタンス生成
var manObj = new Man("sato", 30);

// 継承クラスのインスタンスをコンストラクタを指定せずに生成
var manObj2 = Object.create(Man.prototype);

// 結果表示
personObj.dispInfo();
manObj.dispInfo();
manObj.dispInfo2();
manObj2.dispInfo();
manObj2.dispInfo2();

// クラスのプロパティを全表示
console.log("--- personObj -------------------------------");
for (var propName in personObj) {
    console.log(propName + " = " + personObj[propName]);
}
console.log("--- manObj -------------------------------");
for (var propName in manObj) {
    console.log(propName + " = " + manObj[propName]);
}
console.log("--- manObj2 -------------------------------");
for (var propName in manObj2) {
    console.log(propName + " = " + manObj2[propName]);
}
}}

実行結果
#myterm(){{
----- dispInfo -----
suzuki(20)
----- dispInfo -----
sato(30)
----- dispInfo2 -----
sato(30,MAN)
----- dispInfo -----
unknown(0)
----- dispInfo2 -----
unknown(0,?)
--- personObj -------------------------------
name = suzuki
age = 20
setAge = function (age){
	this.age = age;
}
dispInfo = function (){
	console.log("----- dispInfo -----");
	console.log(this.name + "(" + this.age + ")");
}
--- manObj -------------------------------
name = sato
age = 30
sex = MAN
dispInfo2 = function (){
	console.log("----- dispInfo2 -----");
	console.log(this.name + "(" + this.age + "," + this.sex +")");
}
setAge = function (age){
	this.age = age;
}
dispInfo = function (){
	console.log("----- dispInfo -----");
	console.log(this.name + "(" + this.age + ")");
}
--- manObj2 -------------------------------
sex = ?
dispInfo2 = function (){
	console.log("----- dispInfo2 -----");
	console.log(this.name + "(" + this.age + "," + this.sex +")");
}
name = unknown
age = 0
setAge = function (age){
	this.age = age;
}
dispInfo = function (){
	console.log("----- dispInfo -----");
	console.log(this.name + "(" + this.age + ")");
}
}}
JavaScriptメモ のバックアップの現在との差分(No.0) - 闘うITエンジニアの覚え書き

JavaScriptメモのバックアップの現在との差分(No.0) - 闘うITエンジニアの覚え書き
