質問するログイン新規登録

質問編集履歴

7

解決後の報告

2018/04/11 12:44

投稿

murabito
murabito

スコア108

title CHANGED
File without changes
body CHANGED
@@ -44,6 +44,7 @@
44
44
 
45
45
  ※駄文となってしまっため、疑問部分に(質問1、2、3)のように添えましたが、全てにご回答頂かなくてももちろん構いませんm(_ _)m
46
46
 
47
+
47
48
  # 質問に含めているコードの超簡略化バージョン
48
49
 
49
50
  ```
@@ -93,4 +94,47 @@
93
94
  const obj = {};
94
95
 
95
96
  const newObj = makeNewObj(obj, asyncCallback);
97
+ ```
98
+
99
+
100
+ # 解決後の報告
101
+ ## 1. 質問1に対する疑問
102
+
103
+ これは僕のJavaScirptのhoistingに対する理解が不足している為でした。kei344さんから頂いた回答やコメントをきっかけに、信頼できそうな情報源を元に、JavaScriptがどのようにコンパイルフェーズと実行フェーズでどのような処理を行っているのかを調べまして、よく理解が出来ました。
104
+
105
+
106
+ ## 2. 質問2と質問3に対する疑問
107
+ 質問に掲載したコード(miyabi-sunさんの指摘を反映したもの)をthink49さんから頂いた改善案をもとにテコ入れした結果、以下のようになりました。
108
+
109
+ ```
110
+ function makeNewObj(obj, callback) {
111
+
112
+ // いろいろな処理がこの辺にあると仮定。以下は超簡略版。
113
+ const newObj = Object.assign({}, obj, {new: true});
114
+
115
+ //非同期コールバック
116
+ callback(null, newObj);
117
+
118
+ // 新しいオブジェクトを返します。
119
+ return newObj;
120
+
121
+ }
122
+
123
+ function asyncCallback(err, newObj) {
124
+ setTimeout(function() {
125
+
126
+ if (err) throw err;
127
+
128
+ // newObjを参照して行う諸々の処理(書き換えはしない)
129
+ console.log(newObj);
130
+
131
+ //最終的な実行処理
132
+ console.log('done');
133
+
134
+ }, 0)
135
+ }
136
+
137
+ const obj = {id: 1};
138
+
139
+ const newObj = makeNewObj(obj, asyncCallback);
96
140
  ```

6

質問コードの超簡略化

2018/04/11 12:44

投稿

murabito
murabito

スコア108

title CHANGED
File without changes
body CHANGED
@@ -44,6 +44,21 @@
44
44
 
45
45
  ※駄文となってしまっため、疑問部分に(質問1、2、3)のように添えましたが、全てにご回答頂かなくてももちろん構いませんm(_ _)m
46
46
 
47
+ # 質問に含めているコードの超簡略化バージョン
48
+
49
+ ```
50
+ function run() {
51
+ console.log(test);
52
+ }
53
+
54
+ const test = 3;
55
+
56
+ run();
57
+ ```
58
+ 少し時間を置いていたら、単純にこのレベルまで簡略化できる話なのだと思いました。
59
+
60
+
61
+
47
62
  # miyabi-sunさんのご指摘をコードに反映
48
63
 
49
64
  質問に掲載しているコードがコールバックになっていないというご指摘を受けましたので、反映致しました。(※ 今回の質問用のコードを用意する上で、ご指摘を受けた部分は質問の趣旨からして不要と判断したたため、質問時に省いておりました)

5

miyabi-sunさんの指摘を反映

2018/04/11 08:31

投稿

murabito
murabito

スコア108

title CHANGED
File without changes
body CHANGED
@@ -42,4 +42,40 @@
42
42
  ```
43
43
  ちなみにこう書くと直感的度は増すものの、これが良い作法なのかどうかは、やはり疑問が僕的に残ります。
44
44
 
45
- ※駄文となってしまっため、疑問部分に(質問1、2、3)のように添えましたが、全てにご回答頂かなくてももちろん構いませんm(_ _)m
45
+ ※駄文となってしまっため、疑問部分に(質問1、2、3)のように添えましたが、全てにご回答頂かなくてももちろん構いませんm(_ _)m
46
+
47
+ # miyabi-sunさんのご指摘をコードに反映
48
+
49
+ 質問に掲載しているコードがコールバックになっていないというご指摘を受けましたので、反映致しました。(※ 今回の質問用のコードを用意する上で、ご指摘を受けた部分は質問の趣旨からして不要と判断したたため、質問時に省いておりました)
50
+
51
+ ```
52
+ function makeNewObj(obj, callback) {
53
+
54
+ // いろいろな処理がこの辺に
55
+
56
+ //非同期コールバック
57
+ callback(null, 'value');
58
+
59
+ // 新しいオブジェクトを返します。
60
+ return {new: true};
61
+
62
+ }
63
+
64
+ function asyncCallback(err, value) {
65
+ setTimeout(function() {
66
+
67
+ if (err) throw err;
68
+
69
+ // newObjを参照して行う諸々の処理(書き換えはしない)
70
+ console.log(newObj);
71
+
72
+ //最終的な実行処理
73
+ console.log(value);
74
+
75
+ }, 0)
76
+ }
77
+
78
+ const obj = {};
79
+
80
+ const newObj = makeNewObj(obj, asyncCallback);
81
+ ```

4

てこいれ

2018/04/11 08:28

投稿

murabito
murabito

スコア108

title CHANGED
File without changes
body CHANGED
@@ -4,26 +4,26 @@
4
4
 
5
5
  ```
6
6
  function makeNewObj(obj, callback) {
7
-
7
+
8
8
  // いろいろな処理がこの辺に
9
9
 
10
- // 非同期コールバックを呼ぶ
10
+ //非同期コールバック
11
- setTimeout(function() {
12
- callback();
11
+ callback();
13
- }, 0)
12
+
14
-
15
13
  // 新しいオブジェクトを返します。
16
14
  return {new: true};
17
-
15
+
18
16
  }
19
17
 
20
- function cb() {
18
+ function asyncCallback() {
19
+ setTimeout(function() {
21
- console.log(newObj);
20
+ console.log(newObj);
21
+ }, 0)
22
22
  }
23
23
 
24
24
  const obj = {};
25
25
 
26
- const newObj = makeNewObj(obj, cb);
26
+ const newObj = makeNewObj(obj, asyncCallback);
27
27
 
28
28
  // 実行するとnewObjを参照出来ているのは、どういう仕組みなのか?
29
29
  // { new: true }
@@ -34,8 +34,10 @@
34
34
  もし、これが良い作法ではない場合、このようにコールバックの中で代入先を参照したいような場合に、どのような方法が取れるのかを教えて頂けると嬉しいです。(質問3)
35
35
 
36
36
  ```
37
- const newObj = makeNewObj(obj, function cb() {
37
+ const newObj = makeNewObj(obj, function asyncCallback() {
38
+ setTimeout(function() {
38
- console.log(newObj); // {new: true}
39
+ console.log(newObj);
40
+ }, 0)
39
41
  });
40
42
  ```
41
43
  ちなみにこう書くと直感的度は増すものの、これが良い作法なのかどうかは、やはり疑問が僕的に残ります。

3

タイトルを修正

2018/04/11 07:55

投稿

murabito
murabito

スコア108

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

2

コメントを追加

2018/04/11 07:46

投稿

murabito
murabito

スコア108

title CHANGED
File without changes
body CHANGED
@@ -5,10 +5,14 @@
5
5
  ```
6
6
  function makeNewObj(obj, callback) {
7
7
 
8
+ // いろいろな処理がこの辺に
9
+
10
+ // 非同期でコールバックを呼ぶ
8
11
  setTimeout(function() {
9
12
  callback();
10
13
  }, 0)
11
14
 
15
+ // 新しいオブジェクトを返します。
12
16
  return {new: true};
13
17
 
14
18
  }

1

補足です

2018/04/11 07:44

投稿

murabito
murabito

スコア108

title CHANGED
File without changes
body CHANGED
@@ -34,4 +34,6 @@
34
34
  console.log(newObj); // {new: true}
35
35
  });
36
36
  ```
37
- ちなみにこう書くと直感的度は増すものの、これが良い作法なのかどうかは、やはり疑問が僕的に残ります。
37
+ ちなみにこう書くと直感的度は増すものの、これが良い作法なのかどうかは、やはり疑問が僕的に残ります。
38
+
39
+ ※駄文となってしまっため、疑問部分に(質問1、2、3)のように添えましたが、全てにご回答頂かなくてももちろん構いませんm(_ _)m