【JavaScript】関数とオブジェクト㉑ getter/setterとstatic

はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

目的

• 関数とオブジェクトについての理解を深める

本題

1.getter/setter

• ディスクリプターのオプションの１つ
• 設定すると特別な機能をもたせられる

例1

getterとsetterの挙動の確認

function Person1(name, age) {
    this.name = name;
    this.age = age;
}

// ディスクリプターを設定
// Person1のnameプロパティの設定値をsetter,getterにする
Object.defineProperty(Person1.prototype, "name", {
    // getが呼ばれた際の挙動を書く
    get: function () {
        return this._name;
    },
    // setには引数を設定
    set: function(val){
        this._name = val
    }
})

// 上記のgetとsetをどのように使うのか
// インスタンス化を行う
const p1 = new Person1("o-kido", 49);
// 下記のように設定するとprototypeのnameに値を取りに行くとgetが呼ばれる
// Person1関数のthis._nameにo-kidoが格納されているので、getter経由でo-kidoと出力される
console.log(p1.name)
// setでの挙動は引数valに対して、代入した値が渡ってくる
// その値をthis._nameに入れるので出力結果はnanakamadoになる
p1.name = "nanakamado";
console.log(p1.name);

例2

実際にどのような場面で使うのか

function Person1(name, age) {
    this.name = name;
    this.age = age;
}

Object.defineProperty(Person1.prototype, "name", {
    get: function () {
        // 関数が呼ばれたタイミングで必ず実行される
        // 何らかの処理を間に加えておくと先に出力される
        console.log("hello");
        return this._name;
    },
    set: function(val){
        this._name = val
    }
})
// 下記の出力結果はhello o-kidoとなる
const p1 = new Person1("o-kido", 49);
console.log(p1.name)

p1.name = "nanakamado";
console.log(p1.name);

例3

definePropertyを簡略化して書く

class Person2 {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }
    // :functionの部分をnameに書き換える(setter同様)
    get name() {
        console.log("hello");
        return this._name;
    }
    // 上記カンマも不要
    set name(val){
        this._name = val
    }
}

const a = new Person2("ゼニガメ", 3);
console.log(a.name);

2.static

staticというのはclass内で使用する静的なキーワードのこと
インスタンス化を行わずに使用できる

例1

class Person2 {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }

    get name() {
        return this._name;
    }

    set name(val){
        this._name = val
    }

    static go(){
        // 出力したい結果を入れておく
        console.log("いけ！");
    }
}
// goメソッドを呼び出して使用できる
Person2.go();
const a = new Person2("フシギダネ", 2);
console.log(a.name);

thisは使用できない
Person2からインスタンス化をしていないから

例2

Person1のコンストラクター関数を使うとどのように使用できるのか

function Person1(name, age) {
    this.name = name;
    this.age = age;
}

Person1.hello = function() {
    console.log("hello");
}
Person1.hello();

クラス表記を用いた場合でも、コンストラクター関数にメソッドを追加して使用した場合もスタティックメソッドと呼ぶ

今日はここまで！

参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム