ここから本文です

JavaScriptのwith関数って何ですか? withを使って何ができるのか、その機能を入...

wordiaさん

2017/10/307:07:12

JavaScriptのwith関数って何ですか?
withを使って何ができるのか、その機能を入門者にもわかるようにズバッと説明してください。

検索して調べても、本質が分からないダメダメの説明ばかり

で意味わかりません。

「JavaScript は、スクリプトの実行コンテキストまたは非修飾名を含む関数の実行コンテキストに関連付けられたスコープチェーンを探索することにより、非修飾名を探します。'with' 文は、その文本体の評価の間、このスコープチェーンの先頭に、与えられたオブジェクトを追加します。もし本体で使われた非修飾名がそのスコープチェーンの中のプロパティに一致するなら、その名前はそのプロパティとそのプロパティを含むオブジェクトとに結び付けられます。そうでなければ、ReferenceError が投げられます。」

なにがなんだかさっぱり分かりません。

閲覧数:
309
回答数:
2

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

glo********さん

2017/10/308:18:36

JavaScript系ではまず使わないので基本的に覚えなくて良いですよ。

With を多用するのは VBScript とか VBA ですね。
JavaScript での使用は非推奨ですし,
将来的には廃止の方向で行くと思われます。

「with - JavaScript MDN」
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Stat...
~引用~
> 混乱させるバグや互換性問題の原因になり得るため、
> with 文の使用は推奨されません。
---
> with の利用は非推奨であり、
> ECMAScript 5 の strict mode では禁止されています。



VBScript や VBA だと
有効範囲のWith対象物の前に「.(ドット)」を付けるので
With が有効になる対象物がわかりやすいですが,
JavaScript系 では付けないので作ってる本人も
with がどれに有効でどれに有効でないのかがわかりにくくなります。

また JavaScript系 では
変数に簡単に対象物の参照を代入できるので
変数を使う方が良いです。

というわけで
あえて覚えたり理解しなくて良いと思いますが,,,

> withを使って何ができるのか、
> その機能を入門者にもわかるように
> ズバッと説明してください。

ということなので
サンプル例を挙げて説明します。



=== === ===

◎【例1】with 非使用で書いた場合のコード例↓

<html>
<head>
<meta charset="shift_jis">
<title>Sample 01</title>
</head>
<body>

<form name="myForm">
<input name="aaa"><br>
<input name="bbb"><br>
<input name="ccc"><br>
<input name="ddd"><br>
<input name="eee"><br>
</form>

<script type="text/javascript">
document.forms["myForm"].elements["aaa"].value = "あ";
document.forms["myForm"].elements["bbb"].value = "い";
document.forms["myForm"].elements["ccc"].value = "う";
document.forms["myForm"].elements["ddd"].value = "え";
document.forms["myForm"].elements["eee"].value = "お";
</script>

</body>
</html>



--- --- ---

◎【例2】with を使用し書いた場合のコード例↓

<html>
<head>
<meta charset="shift_jis">
<title>Sample 02</title>
</head>
<body>

<form name="myForm">
<input name="aaa"><br>
<input name="bbb"><br>
<input name="ccc"><br>
<input name="ddd"><br>
<input name="eee"><br>
</form>

<script type="text/javascript">
with (document.forms["myForm"]) {
    elements["aaa"].value = "あ";
    elements["bbb"].value = "い";
    elements["ccc"].value = "う";
    elements["ddd"].value = "え";
    elements["eee"].value = "お";
}
</script>

</body>
</html>


--- --- ---

◎【例3】with の機能を変数で代用した場合のコード例↓

<html>
<head>
<meta charset="shift_jis">
<title>Sample 02</title>
</head>
<body>

<form name="myForm">
<input name="aaa"><br>
<input name="bbb"><br>
<input name="ccc"><br>
<input name="ddd"><br>
<input name="eee"><br>
</form>

<script type="text/javascript">
var frm = document.forms["myForm"];
frm.elements["aaa"].value = "あ";
frm.elements["bbb"].value = "い";
frm.elements["ccc"].value = "う";
frm.elements["ddd"].value = "え";
frm.elements["eee"].value = "お";
</script>

</body>
</html>


=== === ===


【例1】は
document.forms["myForm"].elements[…
document.forms["myForm"].elements[…
document.forms["myForm"].elements[…
document.forms["myForm"].elements[…
document.forms["myForm"].elements[…
みたいに
同じオブジェクトを何度も書いていて非効率ですよね?
ファイル容量も重くなります。


【例2】ではその点を with を使って効率的に改善?しています。
with (document.forms["myForm"]) {
    elements[…
    elements[…
    elements[…
    elements[…
    elements[…
}
しかしこれでは with が何に対して有効なのかわかりにくいのです。


【例3】ではその点を変数を使って改善しています。
var frm = document.forms["myForm"];
frm.elements[…
frm.elements[…
frm.elements[…
frm.elements[…
frm.elements[…

  • 質問者

    wordiaさん

    2017/10/308:58:35

    ご回答ありがとうございます。

    JavaScriptの勉強がてら、外国語の単語クイズゲームのコードを読んでいたら出てきました。

    素人(年配の方)の作ったショボ目のゲームだったので、JavaScript 入門者の勉強にちょうどいいと思い、コードを読んでいたら、当たり前のようにwithがたくさん出てきたので…

    素人が使っているなら当たり前の文法だと思ったのですが、でも普通使われないというのなら困りましたね…

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜1件/1件中

アバター

ID非公開さん

2017/10/308:50:04

with (expression) { statement }

withのスコープの中に知らない名前が出てきたら、それがexpressionのプロパティかどうかを調べて、そうであればそれを利用するよ、そうでなければ外のスコープを探すよ、という話です。

たとえば
let PI = 3;
with (Math) { console.log(PI); }

withのスコープの中に PI という名前はない
→ Math のプロパティかな
→ Math のプロパティだ
→ 3.14

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる