「JavaScript/クラス」の版間の差分

削除された内容 追加された内容
Ef3 (トーク | 投稿記録)
冒頭で、classを導入してもES/JSはプロトタイプベースのオブジェクト指向スクリプティング言語であることを明示。
タグ: 2017年版ソースエディター
Ef3 (トーク | 投稿記録)
タグ: 2017年版ソースエディター
105 行
この行は表示確認用メッセージ
</pre>
 
=== ES6 の class を使ったコードと相当するES5のコード ===
ECMAScript/JavaScriptには複素数型がありません。
実装の触りだけですね実際に動くコードを観てみます。
;ES6版:<syntaxhighlight lang="javascript" line>
class Complex {
constructor(x = 0, y = 0) {
this.real = x
this.imag = y
return this
}
toString() { return `${this.real}+${this.imag}i` }
cadd(n) { return new Complex(this.real + n.real, this.imag + n.imag) }
}
Complex.prototype.csub = function(n) { return new Complex(this.real - n.real, this.imag - n.imag) }
let a = new Complex(1, 1)
let b = new Complex(2, 3)
console.log("a = " + a)
console.log("b = " + b)
console.log("a + b = " + a.cadd(b))
console.log("a - b = " + a.csub(b))
console.log(a instanceof Complex)
</syntaxhighlight>
;ES5版:<syntaxhighlight lang="javascript" line>
function Complex(x = 0, y = 0) {
this.real = x
this.imag = y
return this
}
Complex.prototype.toString = function() { return `${this.real}+${this.imag}i` }
Complex.prototype.cadd = function(n) { return new Complex(this.real + n.real, this.imag + n.imag) }
Complex.prototype.csub = function(n) { return new Complex(this.real - n.real, this.imag - n.imag) }
let a = new Complex(1, 1)
let b = new Complex(2, 3)
console.log("a = " + a)
console.log("b = " + b)
console.log("a + b = " + a.cadd(b))
console.log("a - b = " + a.csub(b))
console.log(a instanceof Complex)
</syntaxhighlight>
;実行結果:<syntaxhighlight lang="javascript" line>
a = 1+1i
b = 2+3i
a + b = 3+4i
true
</syntaxhighlight>
:ES5では、constructorに相当する関数がclassに対応するクロージャを提供します。
:オブジェクトにtoString()メソッドを定義する文字列化をオーバーライドできます(ES5以前からの機能)
:オブジェクトにcadd()メソッドを定義しています(ES/JSでは演算子オーバーロードできないので、名前付き関数にしました)。
;オブジェクトへのメソッドの追加:<syntaxhighlight lang="javascript">
Complex.prototype.csub = function(n) { return new Complex(this.real-n.real, this.imag-n.imag) }
</syntaxhighlight>
:ES5でもES6でも、オブジェクトの prototype にプロパティを追加することで、オブジェクトに新しいメソッドを追加することができます。
:このコードでは、{{code|.real}}, {{code|.imag}} は制限なくアクセスできますが、アクセサを定義することでアクセスを制限できます(ここではコードを簡素にすることを優先しました)
 
=== 脚注 ===