サイトアイコン 上尾市のWEBプログラマーによるブログ

「何となくJavaScriptを書いていた人が一歩先に進むための本」の感想・備忘録1

管理者
posted with ヨメレバ
Amazonで見る
Kindleで見る

kindle本「何となくJavaScriptを書いていた人が一歩先に進むための本」のまとめ。

点数

86点

感想

「脱初心者のJavaScript力を底上げするための本」よりも基礎的な内容だったが、こちらも勉強になった。 「new演算子」「prototype」はとても勉強になった。 「ES2015はまだ普及していない」と切り捨てているが、執筆時(2016年4月)では現実的でいい意見だと思う。

主な内容

型

※JavaScriptでは関数もデータ型の一種であることに慣れてください

オブジェクトへのアクセス

ドット演算子を用いる方法とブラケット構文を用いる方法がある。
通常は可読性の高いドット演算子を使うようにする。
「数字から始まるプロパティ名」「変数を用いた動的なプロパティアクセス」はブラケット構文を使う必要がある。
例）
console.log(obj['123']);
console.log(obj[val]);

for…in命令

仮変数にはインデックス番号やキー名が格納されるが、あまりコードがシンプルにならない。
Javaのfor-each文と似ているからといって同じノリで使うと非常に切ない思いをする。

for…in命令はオブジェクトのキー名を走査する場合にだけ使用するべき。

ラベル構文

ネストされたループを一気に抜けたい場合に使う。

lbl:
for (var i = 0; I < 10; i++) {
    for ( var j = 0; j < 10; j++) {
        if (i * j > 5) {
            break lbl;
        }
    }
}

new演算子

リテラル表記{}でオブジェクトを生成した場合も、実際にはnew演算子が実行された場合と同等の結果が得られる。

例）
var obj1 = new Object();
var obj2 = {};

JavaScriptでは、new演算子に続けて関数名を書けば、その関数をコンストラクタとしたオブジェクトが生成される。new演算子を用いた場合、return文の有無にかかわらずインスタンスが返却される。new演算子を用いない場合は、ただの関数呼び出しになっている。

var myFunc = function() {
    this.prop1 = 'bar';
    return 'boo';
}

var obj1 = new myFunc();
var obj2 = myFunc();

console.log(obj1); // myFunc{prop1: 'bar'}
console.log(obj2): // 'boo'

this

通常thisは呼び出し元オブジェクトを参照する。しかし、new演算子を使ってインスタンス化した場合、thisはそのインスタンス自身を指す。
※インスタンス変数の宣言にthis演算子を使う

var Member = function(name, age) {
    this.name = name;
    this.age = age;
    this.getInfo = function() {
        return this.name + ' ' + this.age;
    }
}
var yamada = new Member('yamada', 20);

ラッパーオブジェクト

number, stiring, booleanにはそれぞれラッパーオブジェクトが存在する。

例）
var num = 100;
console.log(num.toString());

上記のtoString()のように、プリミティブ型をオブジェクトとして振る舞おうとした際に、バックグラウンドでラッパーオブジェクトが生成される。
そして、それが完了すると破棄され、値は元のプリミティブ型に戻る。 よって、自分でラッパーオブジェクトを使うことはなく、使うべきではない。

Globalオブジェクト

JavaScriptにはGlobalオブジェクトというものが存在する。
グローバル変数やグローバル関数を扱うための便宜的なオブジェクトであり、インスタンス化したりメソッドを呼び出したりすることはできない。
オブジェクトの最上位に位置する単一のオブジェクトがグローバルオブジェクトであり、すべてのJavaScriptの実装環境は必ず一つグローバルオブジェクトを持たなければならない。
Webブラウザでの実装の場合「window」が、Node.jsの場合は「global」がグローバルオブジェクトとなる。
NaN, undefinded, isFinite(val), isNaN, String(val), Number(var), parseInt(val), escape(val), eval(val)などはGlobalオブジェクトのメンバである。

argumentsオブジェクト

argumentsオブジェクトは引数を管理しているオブジェクトで、関数スコープ内で使用可能である。関数に引数が定義されていようがいまいが、多かろうが少なかろうが、引数はargumentsオブジェクトで管理される。

lengthプロパティを持っている。
JavaScriptでは関数の引数チェックは行われないが、argumentsオブジェクトを使えば自前で引数チェックを行うことができる。

function hoge(arg1, arg2) {
    console.log(arguments.length);
}
hoge(1, 2, 3); //1

名前付き引数

引数をオブジェクトで受け取ることで名前付き引数とすることができ、以下のメリットがある。

function show(args) {
    alert(args.name);
    alert(args.age);
}
show({name: 'yamada', age: 55});
モバイルバージョンを終了