【JavaScript入門】new・delete・with・thisの使い方｜オブジェクト操作の基本を初心者向けに解説

JavaScriptでは、オブジェクトを作成したり削除したり、オブジェクト名を省略して記述したり、参照中のオブジェクトを取得したりするための構文が用意されています。

このページでは、次の4つの構文を初心者向けにわかりやすく解説します。

• new：新しいオブジェクトを作成する
• delete：オブジェクトやプロパティを削除する
• with：オブジェクト名を省略して処理を書く
• this：現在参照しているオブジェクトを指す

new ステートメント｜新しいオブジェクトを作成する

new を使うと、新しいオブジェクトを作成できます。

主に次のようなオブジェクトを作成するときに使用します。

• Array（配列）
• Date（日付）
• Image（画像）
• Object（汎用オブジェクト）

例：日付オブジェクトを作成する

today = new Date();

String や RegExp なども new で作成できますが、通常は new を使わずに記述します。

delete 演算子｜オブジェクトやプロパティを削除する

delete は、オブジェクトのプロパティを削除するときに使用します。

delete obj.property;

※ 変数そのものは delete では削除できません。

with ステートメント｜オブジェクト名を省略して処理を書く

with を使うと、特定のオブジェクトに対する処理をまとめて書くことができます。

with (objectName) {
    プロパティ1;
    プロパティ2;
}

ただし、可読性が下がるため、近年の JavaScript では非推奨です。

this ステートメント｜参照中のオブジェクトを指す

this は、イベントハンドラ内などで「現在操作しているオブジェクト」を指します。

ボタン自身を関数に渡したいときなどに便利です。

実例：日付をフォームに表示し、ボタンをクリックした回数をカウントする

以下の例では、

• new で日付オブジェクトを作成
• with でフォームの記述を省略
• this でクリックされたボタン自身を関数に渡す

JavaScript

today = new Date(); // 日付オブジェクトを作成
myForm = document.getElementById("form1");

with (myForm) { // form1 の各入力欄に日付をセット
    text1.value = today.getFullYear();
    text2.value = today.getMonth() + 1;
    text3.value = today.getDate();
}

kaisuu = 0;
function counter(obj) {
    kaisuu++;
    obj.value = " " + kaisuu + " "; // obj は this（ボタン自身）
}

HTML

<form id="form1">
    <input type="text" name="text1" size="4">年
    <input type="text" name="text2" size="2">月
    <input type="text" name="text3" size="2">日

    <input type="button" name="b1" value=" 0 " onclick="counter(this)"> 回クリック!
</form>

まとめ

• new：新しいオブジェクトを作成する
• delete：プロパティを削除する
• with：オブジェクト名を省略して処理を書く（非推奨）
• this：現在参照しているオブジェクトを指す