カテゴリー
プログラミング

クラスとは

クラスとは

オブジェクト指向の中核となる概念

ほとんどのプログラミング言語でクラスを実装できる

クラスとインスタンス

お菓子のクッキーで例えると、クラスはクッキーの金型でインスタンスは金型を使って作った、クッキー

星型、ハート型、動物型のクラス(金型)を定義しておいて、

実際に使うときにはnewしてインスタンスを作る。

言語によってはインスタンスをオブジェクトとも言ったりする。

クラスはプロパティとメソッドを持つ

プロパティ(属性、データ)とも言う

メソッド(関数)とも言う

カプセル化(隠蔽化)

private、public

継承

オーバーロード

クラス変数、クラスメソッド

インスタンス変数、インスタンスメソッド

オーバーライド

インターフェイス(implements)、抽象クラス

カテゴリー
JavaScript

JavaScriptのオブジェクトとクラス

オブジェクト

HTMLのscriptタグにJavaScriptを記述する

obがオブジェクト

オブジェクトはプロパティを持つことができる

<html>
  <body>
	<script>
	let ob = {red:255, green:125, blue:0};
	document.write(ob.red + ob.green + ob.blue);
	</script>
  </body>
</html>

オブジェクトはメソッド(関数)を持つこともできる

let ob = {
    red:255, green:125, blue:0,
    total: function(){
        return this.red + this.green + this.blue;
    }
};
document.write(ob.total());

オブジェクトのメソッド(関数)の省略形の記述

let ob = {
    red:255, green:125, blue:0,
    total(){
        return this.red + this.green + this.blue;
    }
};
document.write(ob.total());

コンストラクタ関数

function MyObj(r, g, b) {
    this.red = r;
    this.green = g;
    this.blue = b;

    this.total = function(){
        return this.red + this.green + this.blue;
    }
}

let ob = new MyObj(255,200,200);
document.write(ob.total());

function MyObj(r, g, b) {
    this.red = r;
    this.green = g;
    this.blue = b;

    this.total = function(){
        return this.red + this.green + this.blue;
    }

    this.getHex = function(){
        return '#' + ('00' + this.red.toString(16)).substr(-2)
            + ('00' + this.blue.toString(16)).substr(-2)
            + ('00' + this.green.toString(16)).substr(-2);
    }

    this.getStartP = function(){
        return '<p style="background-color:' 
            + this.getHex() + '">';
    }

    this.getEndP = function(){
        return '</p>';
    }

    this.writeP = function(){
        document.write(this.getStartP());
        document.write(this.total());
        document.write(this.getEndP());
    }
};

let ob = new MyObj(255,200,200);
ob.writeP();

let ob2 = new MyObj(0, 100, 170);
ob2.writeP();

クラス

class MyObj {
    constructor(r, g, b){
        this.red = r;
        this.green = g;
        this.blue = b;
    }

    get total(){
        return this.red + this.green + this.blue;
    }

    get hex(){
        return '#' + ('00' + this.red.toString(16)).substr(-2)
            + ('00' + this.blue.toString(16)).substr(-2)
            + ('00' + this.green.toString(16)).substr(-2);
    }

    get startP(){
        return '<p style="background-color:' 
            + this.hex + '">';
    }

    get endP(){
        return '</p>';
    }

    writeP(){
        document.write(this.startP);
        document.write(this.total);
        document.write(this.endP);
    }
};

let ob = new MyObj(255,200,200);
ob.writeP();

let ob2 = new MyObj(0, 100, 170);
ob2.writeP();

参考文献:

Vue.js&Nuxt.js 超入門 Kindle版

Vue.js&Nuxt.js 超入門