JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで「with」キーワードを使う方法｜基本構文とサンプルコード付きで解説

JavaScriptの「with」キーワードは、オブジェクトのプロパティやメソッドへの参照を簡略化するための省略記法として使われる構文です。

withの引数として指定したオブジェクトは、直後のブロックが実行されている間、デフォルトオブジェクトとして扱われます。そのため、ブロック内ではオブジェクト名を書かずに、そのオブジェクトのプロパティやメソッドへ直接アクセスすることが可能です。

基本構文

withステートメントの構文は以下のとおりです。

with (object){
    // オブジェクト名とドットを付けずにプロパティを利用できる
}

サンプルコード

次のコードを実行すると、withキーワードの具体的な使い方を確認できます。

<html>
   <head>
      <title>User-defined objects</title>
      <script>
         // メソッドとして機能する関数を定義
         function addPrice(amount){
            with(this){
               price = amount;
            }
         }
         function book(title, author){
            this.title = title;
            this.author = author;
            this.price = 0;
            this.addPrice = addPrice; // メソッドをプロパティとして代入
         }
      </script>
   </head>
   <body>
      <script type="text/javascript">
         var myBook = new book("Python", "Tutorialspoint");
         myBook.addPrice(100);

         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>
  </body>
</html>

実行結果

Book title is : Python
Book author is : Tutorialspoint
Book price is : 100

注意点：withは非推奨の構文

withステートメントは記述を短くできる反面、どのオブジェクトのプロパティを操作しているのかが分かりにくくなり、コードの可読性や保守性を損なう原因となります。そのため、ECMAScript 5以降のストリクトモード（"use strict"）では使用できず、現在では非推奨とされています。

現代のJavaScript開発では、オブジェクト名を明示的に記述するか、分割代入やローカル変数への代入を活用するのが一般的です。ただし、古いコードを読む機会は依然としてあるため、withの動作原理は知識として押さえておくとよいでしょう。

  1. JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説

    HTMLキャンバス（canvas）への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト

  2. JavaScriptでオブジェクトの長さを取得する方法を解説！Object.keys()の活用術

    JavaScriptにおいて、lengthプロパティは配列や文字列にのみ適用できる仕様になっています。そのため、オブジェクトに対してlengthプロパティを呼び出すと、undefinedが返されます。オブジェクトにlengthを使った場合の挙動<html> <body> <script>     var object = {prop:1, prop:2};     document.write(object.length); </script> </body&g