+ JavaScript の質問用スレッド vol.124 +

2021/11/10(水) 15:24:24.80

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

※前スレ
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured

2021/11/10(水) 15:26:36.49

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　http://jsdo.it/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/

■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)

■テンプレ案
https://fiddle.jshell.net/6018r9tu/1/show/light/

2021/11/10(水) 15:46:52.81

前スレ998の質問だけど
一般的にはc2が返してるような関数のことをクロージャと呼ぶことが多いが
JavaScriptの関数は全部クロージャなのでc2自体もクロージャ

2021/11/10(水) 16:02:48.18

なるほど

2021/11/10(水) 17:50:22.23

>>998
追記です

3つの要素を持つオブジェクトセットを利用して、
関数内のクローズ状態を実現する、ということ意味して
そのセットをクロージャーと呼んでいるのだという理解でいかがでしょう？

2021/11/10(水) 18:59:16.59

過去スレみれねー

2021/11/11(木) 11:19:40.42

前スレで誤字があったので訂正と
クロージャーに関してわかりやすく説明しときます
closerは誤りでclouserでした

2021/11/11(木) 11:24:24.80

末尾セミコロンはどうしたらいいですか？

2021/11/11(木) 11:47:50.28

【クロージャー】
クロージャーはJSの関数に下記の仕組みを持たせるための要素のセットです
・関数内部をクローズにする（外部から直接アクセスできない）
・関数からは外部のプロパティにアクセスできる

この仕組みを作るものがクロージャーです
クロージャーの要素は、おおざっぱに関数自身、関数内情報、関数外部を参照するポインタで、
この要素のセットをクロージャーと呼びます

【外部ポインタの働きと内部情報の動きの確認】
<サンプルコード>
function f1(){ let c=0;return c++; }
function f2(){ let c=0;return ()=>{let s=0;return [c++,s++];} }

let f3=f2()　;

1 f1()　;f1()　;console.log(f1());
2 f2()();f2()();console.log(f2()());
3 f3()　;f3()　;console.log(f3());

<結果出力>
1　c:0
2　c:0 s:0
3　c:2 s:0

ここで外部への参照ポインタをouterとします
f1のクロージャーは、｛関数f1　return c｝｛変数c｝｛outer(global}
f2のクロージャーは、｛関数f2 return function｝｛変数c｝｛outer(global｝
f2のアローの場合、　｛無名　　return　[c,s]｝｛変数s｝｛outer(ｆ2）｝

2021/11/11(木) 11:48:17.36

コード１では、ｆ１を2回呼びますが、関数呼び出し1回につき、１つの（別々の）クロージャーが生成されます
同じ変数名のcであっても、別物のcとなります
ですから、cはインクリメントされずに0となります

コード２ではf2から戻されるアロー関数を複数回呼び出しますが
関数の呼び出し1回につき、別々のクロージャーが生成されますので
上記と同じようにcは0になります

コード３では、f2から戻されるアロー関数を変数f3に代入し、それを複数回呼び出します
呼び出しのたびに別々のクロージャーが生成されますが
外部への参照は、outer(f2)なので、同じcを参照していますので
複数回呼び出すとcをインクリメントします
一方でアロー関数内の変数sは、コード１や２の説明と同じでインクリメントされません

2021/11/11(木) 11:48:37.71

【関数はクロージャーか？】
クロージャーは関数ではありませんし
関数はクロージャーではありません

関数内をクローズにし、外部参照を持たせる、という仕組みをつくるための
関数、内部情報、外部参照ポインタのセットがクロージャーです

【言語は多数者が正しい】
f2で戻される無名関数をクロージャーと呼ぶ人がいるのは
クロージャーの説明のために多用されていることで
無名関数をクロージャーと誤解してしまったり

f1が外部からクローズ状態なので、f1がクロージャーなんだと
そう理解してる人が多かったりしています

クロージャーという言語の用法に関して
何が正しいのかは、それぞれの立場を主張する人数によって
決定することが正しいのかもしれません

以上で訂正とまとめを終わります

2021/11/11(木) 12:08:29.83

>>8
javascript.infoでは
[ ]の前にセミコロンは想定していないため、前段と次段のコードが連続することが説明されてます

console.log(1)
[...'string'].forEach(console.log)

は

console.log(1)[...'string'].forEach(console.log)

と同じ扱いで、1を出力したのち、エラーになります
[]を使うときに思い出してください

2021/11/11(木) 13:44:12.02

>>7
closureでは？

2021/11/11(木) 14:51:22.63

スジャータ

2021/11/11(木) 16:11:30.72

クロージャーに「関数内部をクローズにする」なんて意味はないよ

2021/11/11(木) 16:24:36.04

JSのクロージャーってどういう意味なの？

2021/11/11(木) 16:26:10.03

9の長い長い説明はまったくもって的外れ？

2021/11/11(木) 18:44:36.77

ふーん、なるほどねぇ

2021/11/11(木) 19:03:41.76

||クロージャーは、組み合わされた（囲まれた）関数と、
||その周囲の状態（レキシカル環境）への参照の組み合わせです。
||言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供します。
||(MDN)

「関数の内から関数の外を参照できる、参照権限（参照できる状態（仕組み））」ということだろ！！！
これできめ！

2021/11/11(木) 19:41:41.77

クロージャは関数閉包のこと
関数の中に関数が内包された状態を指す
外側の関数をエンクロージャと呼ぶが、クロージャ=関数ではない

2021/11/11(木) 20:24:37.12

現在のスコープに変数が見つからなければ、どんどん外のスコープに変数を探しに行って
最終的にwindowまで探しに行ってくれる機能のことをクロージャと呼ぶ

かな？

2021/11/11(木) 20:29:10.77

>>21
違う
それはスコープチェーン

2021/11/11(木) 21:31:01.83

Promiseの状態(pending/fullfilled/rejected)って外から取得できないんだっけ？
探しても方法が見つからな。

2021/11/11(木) 22:17:06.64

MDNの訳が微妙すぎると思ったら原文も同じだった

A closure is the combination of a function with references to its surrounding state.
か
A closure is a function bundled together with references to its surrounding state.
のどっちかにしたかったんだろう

2021/11/11(木) 22:18:41.74

>>20
それは違う言語でしょ
JSはグローバルも一つの環境としてるから
グローバル内に宣言された関数も、囲まれた関数なんだよ
グローバルを関数と呼ぶのなら、それはそれかもなんだけど

2021/11/11(木) 22:22:39.31

>>24
JSの設計のあいまいさを感じられるな

2021/11/11(木) 22:44:02.25

囲まれた関数ってのは微妙な原文と訳文で作られた言葉

ここの真ん中くらいにあるクロージャの定義を読むといい
https://javascript.info/closure

2021/11/12(金) 07:15:12.60

それを読んでも統一見解が得られづらいからこうなってるってわかる？

2021/11/12(金) 07:25:05.37

でもまぁ一連のやり取りで
環境レコードや外部参照チェーンやスコープの復習ができたということで
この部分に関しては、脱素人になったわけだ、おめでとー

2021/11/14(日) 19:04:13.43

canvasでcontext.lineWidth=1;にして直線を描いても幅が１にならなくて２ピクセル分の太さになってしまいます
どうすれば幅１の直線が描けますか？

2021/11/14(日) 19:57:25.52

>>25
言語仕様に言及するのなら、「ECMAScriptにクロージャは存在しない」が正解

> グローバル内に宣言された関数も、囲まれた関数なんだよ

そんな仕様はない
クロージャなんて概念は忘れて、変数、スコープ、関数の仕組みを覚える方が正しい理解に繋がる

2021/11/14(日) 20:00:15.95

>>30
整数座標はピクセル中央ではなくピクセル左上になるので0.5足す
めんどくさかったらcontext.translate(.5, .5)するとか

2021/11/14(日) 20:54:05.86

>>28
クロージャで統一見解といえるのは「クロージャ=関数が入れ子になった状態」だけ
そこに機能的価値を見いだそうとするなら「クロージャという名の機能は存在しない」だ
機能的には別の機能で実装されていて、
関数を入れ子にした結果、それらの機能が便利な状況を作り出しているに過ぎない
学習目的なら「クロージャ」は忘れた方がいい

2021/11/14(日) 21:16:07.13

関数が入れ子かどうかなんて関係ないよ

理解してない人たち同士で"統一見解"を求めようとするからドツボに嵌ってる

2021/11/14(日) 21:27:55.45

>>34
仕様にない単語に、統一見解を求めるのが間違いなんだろうな

2021/11/14(日) 21:47:51.05

とはいえ「クロージャ=関数が入れ子になった状態」って定義は明らかに間違いだろう。

2021/11/14(日) 21:57:27.13

ECMAの仕様にはAbstruct Closure Specification Typeが定義されてるし、関数定義周りでclosureって言葉は繰り返し出てくるよ

まあでも仕様型みたいな大半の人が知らなくても困らないような詳細知識よりも
クロージャとは一般的にどういうものを指すのかという基礎的知識を身につけたほうがいい

2021/11/14(日) 23:10:09.15

>>37
一般解を示す公式文書を出せる？

ぶっちゃけ、言語が異なれば用語定義も変わると思ってるし、共通の用語なんてないと思ってる
複数言語習得者が勝手に共通認識を定義しているだけなのでは？

2021/11/15(月) 00:30:22.12

ワロスｗ

2021/11/15(月) 07:13:10.30

JSのクロージャーは
関数内のプロパティに、外部から直接アクセスできないが
関数内から外部への参照はチェーンしているという状態をいう

外部Lexicalへの参照を持たない関数型は
関数ではあるけどクロージャーにならない
入り子になっていても

もうクロージャはこれで終わり
クロージャーに貴重な人生を奪われるなよ？

40 (ﾜｯﾁｮｲ 6e46-wd7R [111.98.111.65]) · 2021/11/15(月) 07:21:28.04

状態ではなく仕組みがいいな
クロージャーはオブジェクトセットという表現が適してる例が散見されるみたいだし
必要なオブジェクトセットを使ってnativeでクロージャーを実現してるんだから
クロージャーは仕組み！これできめ！