「JavaScript」の版間の差分

削除された内容 追加された内容
→‎クラス: prototypeキーワードを
Ef3 (トーク | 投稿記録)
→‎クラス: Object.defineProperty()
タグ: 2017年版ソースエディター
125 行
== ※ 下書き ==
== クラス ==
{{Main|/プロトタイプベース|/オブジェクト}}
ES2015以降、JavaScript では「クラス」と言うものが導入され<ref>山田祥寛『改訂新版 JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで~ 』、技術評論社、2019年8月17日 初版 第6刷、224ページ </ref>、いくつかの変数や関数をまとめてグループ的に宣言でき、グループ的に取扱いできます。
 
139 ⟶ 140行目:
document.write(dummy.name);
document.write("<br>");
 
</script>
 
<body>
この行は表示確認用メッセージ
148 ⟶ 147行目:
 
表示結果
 
<pre>
Dog
154 ⟶ 152行目:
</pre>
:というメッセージがウェブブラウザ上にて表示される。
 
 
JavaScript の場合、class の中でコンストラクターというものを使って、そのクラスの初期化の処理をしなければならない仕様になっています(他の言語のクラスではそのような処理のない言語も多い)。
167 ⟶ 164行目:
<syntaxhighlight lang="javascript">
class クラス名 {
constructor(数名) {
this.変数プロパティ名 = 数名;
}
}
</syntaxhighlight>
のような書式になります。
 
のような書式になります。なぜこう書くかと思われても、そういう仕様なので受け入れてください。
 
なお、上記コードの name のような、クラスの内部にある変数のようなもののことをプロパティと言います。上記コードでは説明の簡単化のため省略しましたが、クラスでは変数のほかにも関数を扱うことも可能であり、クラス内の関数のようなもののことはメソッドと言います。
 
 
さて、クラスを呼び出して使うには、さらに作業が必要であり、
188 ⟶ 183行目:
の書式で指定してアクセスします。
 
コンストラクタなどを定義してない内部の空白のクラスの場合でも下記コードのように<code>prototype</code>キーワードObject.defineProperty()を使うことで事後的にってクラス内に要素のデータ記述子追加操作することができます<ref>
 
{{Cite web
コンストラクタなどを定義してない内部の空白のクラスの場合、下記コードのように<code>prototype</code>キーワードを使うことで事後的にクラス内に要素を追加することができます。
|url=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
|title=Object.defineProperty() - JavaScript // MDN
|date=2021/9/19
|accessdate=2021/11/19
}}</ref>。
 
<syntaxhighlight lang="javascript">
198 行
}
 
/*
sample.prototype.name = "Cat";
↑この様にしてもプロパティを追加できますが、
その後、JavaScriptエンジンはクラスsampleのインスタンスを
参照するたびにprototypeを探索する羽目になりパフォーマスが劣化います
*/
Object.defineProperty(sample.prototype, 'name', {
value: "Cat"
})
let dummy = new sample();