オブジェクト
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();参考文献：