JavaScript/Basic/クラス

JavaScript/Basic/クラス

JavaScript は以前は Function オブジェクトに「クラス的機能」があって、それを使っていたが、 現在ではクラスを作るための専用の構文がある。

出来上がるものはいろいろ制約があったり便利な設定がされている Function オブジェクトとなるので、書き方が変わるだけで運用は変えなくてよい。

基本

このように作る

class Hoge{
}

そしてこのように使う

let hoge = new Hoge();

以前はこのように作って、このように使っていた。

function Hoge(){
}
var hoge = new Hoge();

メンバ(フィールド、プロパティ)

明示的に設定する

class Hoge{
    p1 = "";
    constructor(){
        this.p1 = "This is p1";
    }
}
let hoge = new Hoge();
console.log(hoge.p1);

JS の特性上、宣言っぽい記述無しで動的にもできる。

class Hoge{
    constructor(){
        this.p1 = "This is p1";
    }
}
let hoge = new Hoge();
console.log(hoge.p1);

このようになる。しかしながら完全にむき出しである。

以前はこのように書いていた。

function Hoge(){
    this.p1 = "This is p1";
}
var hoge = new Hoge();
console.log(hoge.p1);

これを private にするにはどうするか?

以前の記述であればこのようにして private のメンバを作ることができた。

function Hoge(){
    var p1 = "This is p1";
}
var hoge = new Hoge();
console.log(hoge.p1); //←これはアクセスできない。

private に明示的に設定する。シャープをつけて宣言する。こおような記述は 2019-06 現在一部の環境がサポートしているだけで一般的に使えるモノではない。

class Hoge{
    #p1 = "";
    constructor(){
        this.p1 = "This is p1";
    }
}
let hoge = new Hoge();
console.log(hoge.p1);  // これは駄目

注意

巻き上げされない

以前の function 式の書き方だと、JS的なモノとしては変数に関数オブジェクトが入ったモノなので、巻き上げが発生していた。 つまり記述位置にかかわらずもう存在するモノとして扱えた。

しかし class 式の書き方だと記述位置が重要で、書いた位置より前ではそのクラスは存在しないという動きになる。

Tags

javascript/basic/class/start.txt · 最終更新: 2020-03-24 10:10 by ore