teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問関数に渡すコールバック関数の中で、関数式の結果を代入する先のオブジェクトに参照出来るのは何故？

編集履歴

質問編集履歴

7

解決後の報告

2018/04/11 12:44

投稿

murabito
murabito

スコア108

test CHANGED
File without changes
test CHANGED
@@ -90,6 +90,8 @@
90
90
 
91
91
 
92
92
 
93
+
94
+
93
95
  # 質問に含めているコードの超簡略化バージョン
94
96
 
95
97
 
@@ -189,3 +191,89 @@
189
191
  const newObj = makeNewObj(obj, asyncCallback);
190
192
 
191
193
  ```
194
+
195
+
196
+
197
+
198
+
199
+ # 解決後の報告
200
+
201
+ ## 1. 質問１に対する疑問
202
+
203
+
204
+
205
+ これは僕のJavaScirptのhoistingに対する理解が不足している為でした。kei344さんから頂いた回答やコメントをきっかけに、信頼できそうな情報源を元に、JavaScriptがどのようにコンパイルフェーズと実行フェーズでどのような処理を行っているのかを調べまして、よく理解が出来ました。
206
+
207
+
208
+
209
+
210
+
211
+ ## 2. 質問２と質問３に対する疑問
212
+
213
+ 質問に掲載したコード（miyabi-sunさんの指摘を反映したもの)をthink49さんから頂いた改善案をもとにテコ入れした結果、以下のようになりました。
214
+
215
+
216
+
217
+ ```
218
+
219
+ function makeNewObj(obj, callback) {
220
+
221
+
222
+
223
+ // いろいろな処理がこの辺にあると仮定。以下は超簡略版。
224
+
225
+ const newObj = Object.assign({}, obj, {new: true});
226
+
227
+
228
+
229
+ //非同期コールバック
230
+
231
+ callback(null, newObj);
232
+
233
+
234
+
235
+ // 新しいオブジェクトを返します。
236
+
237
+ return newObj;
238
+
239
+
240
+
241
+ }
242
+
243
+
244
+
245
+ function asyncCallback(err, newObj) {
246
+
247
+ setTimeout(function() {
248
+
249
+
250
+
251
+ if (err) throw err;
252
+
253
+
254
+
255
+ // newObjを参照して行う諸々の処理（書き換えはしない）
256
+
257
+ console.log(newObj);
258
+
259
+
260
+
261
+ //最終的な実行処理
262
+
263
+ console.log('done');
264
+
265
+
266
+
267
+ }, 0)
268
+
269
+ }
270
+
271
+
272
+
273
+ const obj = {id: 1};
274
+
275
+
276
+
277
+ const newObj = makeNewObj(obj, asyncCallback);
278
+
279
+ ```

6

質問コードの超簡略化

2018/04/11 12:44

投稿

murabito
murabito

スコア108

test CHANGED
File without changes
test CHANGED
@@ -90,6 +90,36 @@
90
90
 
91
91
 
92
92
 
93
+ # 質問に含めているコードの超簡略化バージョン
94
+
95
+
96
+
97
+ ```
98
+
99
+ function run() {
100
+
101
+ console.log(test);
102
+
103
+ }
104
+
105
+
106
+
107
+ const test = 3;
108
+
109
+
110
+
111
+ run();
112
+
113
+ ```
114
+
115
+ 少し時間を置いていたら、単純にこのレベルまで簡略化できる話なのだと思いました。
116
+
117
+
118
+
119
+
120
+
121
+
122
+
93
123
  # miyabi-sunさんのご指摘をコードに反映
94
124
 
95
125
 

5

miyabi-sunさんの指摘を反映

2018/04/11 08:31

投稿

murabito
murabito

スコア108

test CHANGED
File without changes
test CHANGED
@@ -87,3 +87,75 @@
87
87
 
88
88
 
89
89
  ※駄文となってしまっため、疑問部分に（質問1、２、３）のように添えましたが、全てにご回答頂かなくてももちろん構いませんm(_ _)m
90
+
91
+
92
+
93
+ # miyabi-sunさんのご指摘をコードに反映
94
+
95
+
96
+
97
+ 質問に掲載しているコードがコールバックになっていないというご指摘を受けましたので、反映致しました。（※ 今回の質問用のコードを用意する上で、ご指摘を受けた部分は質問の趣旨からして不要と判断したたため、質問時に省いておりました）
98
+
99
+
100
+
101
+ ```
102
+
103
+ function makeNewObj(obj, callback) {
104
+
105
+
106
+
107
+ // いろいろな処理がこの辺に
108
+
109
+
110
+
111
+ //非同期コールバック
112
+
113
+ callback(null, 'value');
114
+
115
+
116
+
117
+ // 新しいオブジェクトを返します。
118
+
119
+ return {new: true};
120
+
121
+
122
+
123
+ }
124
+
125
+
126
+
127
+ function asyncCallback(err, value) {
128
+
129
+ setTimeout(function() {
130
+
131
+
132
+
133
+ if (err) throw err;
134
+
135
+
136
+
137
+ // newObjを参照して行う諸々の処理（書き換えはしない）
138
+
139
+ console.log(newObj);
140
+
141
+
142
+
143
+ //最終的な実行処理
144
+
145
+ console.log(value);
146
+
147
+
148
+
149
+ }, 0)
150
+
151
+ }
152
+
153
+
154
+
155
+ const obj = {};
156
+
157
+
158
+
159
+ const newObj = makeNewObj(obj, asyncCallback);
160
+
161
+ ```

4

てこいれ

2018/04/11 08:28

投稿

murabito
murabito

スコア108

test CHANGED
File without changes
test CHANGED
@@ -10,35 +10,35 @@
10
10
 
11
11
  function makeNewObj(obj, callback) {
12
12
 
13
-
13
+
14
14
 
15
15
  // いろいろな処理がこの辺に
16
16
 
17
17
 
18
18
 
19
- // 非同期でコールバックを呼ぶ
19
+ //非同期コールバック
20
20
 
21
- setTimeout(function() {
21
+ callback();
22
22
 
23
- callback();
24
23
 
25
- }, 0)
26
-
27
-
28
24
 
29
25
  // 新しいオブジェクトを返します。
30
26
 
31
27
  return {new: true};
32
28
 
33
-
29
+
34
30
 
35
31
  }
36
32
 
37
33
 
38
34
 
39
- function cb() {
35
+ function asyncCallback() {
40
36
 
37
+ setTimeout(function() {
38
+
41
- console.log(newObj);
39
+ console.log(newObj);
40
+
41
+ }, 0)
42
42
 
43
43
  }
44
44
 
@@ -48,7 +48,7 @@
48
48
 
49
49
 
50
50
 
51
- const newObj = makeNewObj(obj, cb);
51
+ const newObj = makeNewObj(obj, asyncCallback);
52
52
 
53
53
 
54
54
 
@@ -70,9 +70,13 @@
70
70
 
71
71
  ```
72
72
 
73
- const newObj = makeNewObj(obj, function cb() {
73
+ const newObj = makeNewObj(obj, function asyncCallback() {
74
74
 
75
+ setTimeout(function() {
76
+
75
- console.log(newObj); // {new: true}
77
+ console.log(newObj);
78
+
79
+ }, 0)
76
80
 
77
81
  });
78
82
 

3

タイトルを修正

2018/04/11 07:55

投稿

murabito
murabito

スコア108

test CHANGED
@@ -1 +1 @@
1
- 関数式の代入先オブジェクトを関数に渡すコールバック関数の中で参照出来るのは何故？
1
+ 関数に渡すコールバック関数の中で、関数式の結果を代入する先のオブジェクトに参照出来るのは何故？
test CHANGED
File without changes

2

コメントを追加

2018/04/11 07:46

投稿

murabito
murabito

スコア108

test CHANGED
File without changes
test CHANGED
@@ -12,6 +12,12 @@
12
12
 
13
13
 
14
14
 
15
+ // いろいろな処理がこの辺に
16
+
17
+
18
+
19
+ // 非同期でコールバックを呼ぶ
20
+
15
21
  setTimeout(function() {
16
22
 
17
23
  callback();
@@ -19,6 +25,8 @@
19
25
  }, 0)
20
26
 
21
27
 
28
+
29
+ // 新しいオブジェクトを返します。
22
30
 
23
31
  return {new: true};
24
32
 

1

補足です

2018/04/11 07:44

投稿

murabito
murabito

スコア108

test CHANGED
File without changes
test CHANGED
@@ -71,3 +71,7 @@
71
71
  ```
72
72
 
73
73
  ちなみにこう書くと直感的度は増すものの、これが良い作法なのかどうかは、やはり疑問が僕的に残ります。
74
+
75
+
76
+
77
+ ※駄文となってしまっため、疑問部分に（質問1、２、３）のように添えましたが、全てにご回答頂かなくてももちろん構いませんm(_ _)m