質問編集履歴
5
質問の3を追加しました。質問の書き換えはこれまでにします。
test
CHANGED
File without changes
|
test
CHANGED
@@ -197,3 +197,7 @@
|
|
197
197
|
|
198
198
|
|
199
199
|
2) `this.item = item`が「Product.vue」の`callback(database.find(el => el.id === id)) `に定義されていないのですが、これはどういう仕組みになっているのでしょうか(どこからこういう記載が出てくるのでしょうか)?
|
200
|
+
|
201
|
+
|
202
|
+
|
203
|
+
3) 最初に載せてある元のソースからですが、「Product.vue」の`products.asyncFind`の第二引数にある`item =>`の部分の`item`ですが、これは「products.js」のcallbackで定義している`el`(`database`配列)と考えてよろしいでしょうか?
|
4
質問を二つに分けました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -192,6 +192,8 @@
|
|
192
192
|
|
193
193
|
### 質問
|
194
194
|
|
195
|
+
1) `callback`が`function`(元々はアロー関数)でラップされていますが、これは必要なのでしょうか?
|
195
196
|
|
196
197
|
|
198
|
+
|
197
|
-
|
199
|
+
2) `this.item = item`が「Product.vue」の`callback(database.find(el => el.id === id)) `に定義されていないのですが、これはどういう仕組みになっているのでしょうか(どこからこういう記載が出てくるのでしょうか)?
|
3
自分で試したことのコードを更新。質問をより具体的に変更。
test
CHANGED
File without changes
|
test
CHANGED
@@ -86,11 +86,13 @@
|
|
86
86
|
|
87
87
|
```
|
88
88
|
|
89
|
-
###
|
89
|
+
### 現在の状態
|
90
90
|
|
91
|
-
「products.js」内のコールバックの引数`database.find(el => el.id === id)`と、「Product.vue」の`products.asyncFind`の二つ目の引数`item => { this.item = item }`の関連付けが理解できません。
|
91
|
+
「products.js」内のコールバックの引数`database.find(el => el.id === id)`と、「Product.vue」の`products.asyncFind`の二つ目の引数`item => { this.item = item }`の関連付けが理解できません。
|
92
92
|
|
93
|
+
具体的には、「Product.vue」の`products.asyncFind`の`{ this.item = item }`は、「products.js」内のコールバックに定義されているような記載が無いのですが、この仕組みを理解しておりません。
|
94
|
+
|
93
|
-
|
95
|
+
また、`item => { this.item = item }`の`item`は、`callback`の`el`(配列)という指しているのでは無いかと、推測しています。
|
94
96
|
|
95
97
|
|
96
98
|
|
@@ -100,23 +102,23 @@
|
|
100
102
|
|
101
103
|
自分なりに理解を整理するために、コードを変更してみました。
|
102
104
|
|
103
|
-
|
105
|
+
まず、アロー関数に慣れていないので、ES5の記載に変えました。
|
104
106
|
|
105
107
|
|
108
|
+
|
109
|
+
<products.js>
|
106
110
|
|
107
111
|
```js
|
108
112
|
|
109
113
|
export default {
|
110
114
|
|
111
|
-
|
115
|
+
asyncFind(id, callback) {
|
112
116
|
|
113
|
-
|
117
|
+
setTimeout(function() { // アロー関数をES5の書き方に変更
|
114
118
|
|
115
|
-
se
|
119
|
+
callback(database.find(el => el.id === id))
|
116
120
|
|
117
|
-
callback() // コールバック関数から引数を削除する
|
118
|
-
|
119
|
-
, 1000)
|
121
|
+
}, 1000)
|
120
122
|
|
121
123
|
}
|
122
124
|
|
@@ -150,15 +152,11 @@
|
|
150
152
|
|
151
153
|
},
|
152
154
|
|
153
|
-
// コールバック関数の引数に指定するためのメソッドを追加
|
154
|
-
|
155
|
-
//
|
155
|
+
// 理解できていない「this.item = item」の部分を、関数として独立させました。
|
156
156
|
|
157
157
|
methods: {
|
158
158
|
|
159
|
-
xxx() {
|
159
|
+
xxx(item) {
|
160
|
-
|
161
|
-
let item = products.database.find(el => el.id === this.id)
|
162
160
|
|
163
161
|
this.item = item
|
164
162
|
|
@@ -172,9 +170,9 @@
|
|
172
170
|
|
173
171
|
handler() {
|
174
172
|
|
175
|
-
// 引数に、上で追加した関数を指定
|
173
|
+
// 二つ目の引数に、上で追加した関数を指定
|
176
174
|
|
177
|
-
products.asyncFind(this.xxx)
|
175
|
+
products.asyncFind(this.id, this.xxx)
|
178
176
|
|
179
177
|
},
|
180
178
|
|
@@ -190,6 +188,10 @@
|
|
190
188
|
|
191
189
|
```
|
192
190
|
|
193
|
-
こ
|
191
|
+
こうすることで同じような動きが再現できました。
|
194
192
|
|
193
|
+
### 質問
|
194
|
+
|
195
|
+
|
196
|
+
|
195
|
-
|
197
|
+
再度お聞きしたいのが、`this.item = item`が「Product.vue」の`callback(database.find(el => el.id === id)) `に定義されていないのですが、これはどういう仕組みになっているのでしょうか(どこからこういう記載が出てくるのでしょうか)?
|
2
コールバック関数から引数を削除しました。できるだけ不明点を明確にするよう、補足に疑問点を書き替えました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -110,11 +110,11 @@
|
|
110
110
|
|
111
111
|
database, // database配列をエクスポート
|
112
112
|
|
113
|
-
asyncFind(
|
113
|
+
asyncFind(callback) { // 引数をコールバック関数のみにする
|
114
114
|
|
115
115
|
setTimeout(
|
116
116
|
|
117
|
-
callback(
|
117
|
+
callback() // コールバック関数から引数を削除する
|
118
118
|
|
119
119
|
, 1000)
|
120
120
|
|
@@ -150,15 +150,15 @@
|
|
150
150
|
|
151
151
|
},
|
152
152
|
|
153
|
-
// コールバック関数の引数
|
153
|
+
// コールバック関数の引数に指定するためのメソッドを追加
|
154
154
|
|
155
155
|
// databaseをインポートしたので、ここで使えるようになった
|
156
156
|
|
157
157
|
methods: {
|
158
158
|
|
159
|
-
xxx(
|
159
|
+
xxx() {
|
160
160
|
|
161
|
-
let item = products.database.find(el => el.id === id)
|
161
|
+
let item = products.database.find(el => el.id === this.id)
|
162
162
|
|
163
163
|
this.item = item
|
164
164
|
|
@@ -172,9 +172,9 @@
|
|
172
172
|
|
173
173
|
handler() {
|
174
174
|
|
175
|
-
//
|
175
|
+
// 引数に、上で追加した関数を指定
|
176
176
|
|
177
|
-
products.asyncFind(this.
|
177
|
+
products.asyncFind(this.xxx)
|
178
178
|
|
179
179
|
},
|
180
180
|
|
@@ -192,4 +192,4 @@
|
|
192
192
|
|
193
193
|
これで動くようになりましたが、setTimeoutが動作していないように見えます。
|
194
194
|
|
195
|
-
|
195
|
+
コールバックの引数に式を指定するのと関数を指定するのでは、動作が違ってきてしまうのでしょうか?
|
1
コードを自分なりに整理して変更しました。また、質問のタイトルを変更しました。
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
引数に数式(関数)を使用したコールバック
|
test
CHANGED
@@ -88,6 +88,108 @@
|
|
88
88
|
|
89
89
|
### 質問
|
90
90
|
|
91
|
-
「products.js」内のコールバックの引数`database.find(el => el.id === id)`と、「Product.vue」の`products.asyncFind`の二つ目の引数`item => { this.item = item }`の関連付けが理解できません。わかりやすく説明していただけると助かります。
|
91
|
+
「products.js」内のコールバックの引数`database.find(el => el.id === id)`と、「Product.vue」の`products.asyncFind`の二つ目の引数`item => { this.item = item }`の関連付けが理解できません。~~わかりやすく説明していただけると助かります。~~
|
92
92
|
|
93
|
-
なお、配列を検索する` find() `メソッドの基本的な使い方は、理解しております。
|
93
|
+
~~なお、配列を検索する` find() `メソッドの基本的な使い方は、理解しております。~~
|
94
|
+
|
95
|
+
|
96
|
+
|
97
|
+
### 試したこと
|
98
|
+
|
99
|
+
コールバック関数に数式(アロー関数)が入っていることで、理解に苦しんでいます。
|
100
|
+
|
101
|
+
自分なりに理解を整理するために、コードを変更してみました。
|
102
|
+
|
103
|
+
具体的には、`database`配列をエクスポートして、元々「products.js」でコールバック関数の引数に設定されていた`database.find(el => el.id === id)`を「Product.vue」側で実行するように書き換えました。
|
104
|
+
|
105
|
+
|
106
|
+
|
107
|
+
```js
|
108
|
+
|
109
|
+
export default {
|
110
|
+
|
111
|
+
database, // database配列をエクスポート
|
112
|
+
|
113
|
+
asyncFind(id, callback) {
|
114
|
+
|
115
|
+
setTimeout(
|
116
|
+
|
117
|
+
callback(id) // コールバック関数の引数をidのみにする
|
118
|
+
|
119
|
+
, 1000)
|
120
|
+
|
121
|
+
}
|
122
|
+
|
123
|
+
```
|
124
|
+
|
125
|
+
|
126
|
+
|
127
|
+
<Product.vue>
|
128
|
+
|
129
|
+
```vue
|
130
|
+
|
131
|
+
<script>
|
132
|
+
|
133
|
+
import products from 'products.js'
|
134
|
+
|
135
|
+
export default {
|
136
|
+
|
137
|
+
props: {
|
138
|
+
|
139
|
+
id: Number
|
140
|
+
|
141
|
+
},
|
142
|
+
|
143
|
+
data() {
|
144
|
+
|
145
|
+
return {
|
146
|
+
|
147
|
+
item: null
|
148
|
+
|
149
|
+
}
|
150
|
+
|
151
|
+
},
|
152
|
+
|
153
|
+
// コールバック関数の引数様にメソッドを追加
|
154
|
+
|
155
|
+
// databaseをインポートしたので、ここで使えるようになった
|
156
|
+
|
157
|
+
methods: {
|
158
|
+
|
159
|
+
xxx(id) {
|
160
|
+
|
161
|
+
let item = products.database.find(el => el.id === id)
|
162
|
+
|
163
|
+
this.item = item
|
164
|
+
|
165
|
+
}
|
166
|
+
|
167
|
+
},
|
168
|
+
|
169
|
+
watch: {
|
170
|
+
|
171
|
+
id: {
|
172
|
+
|
173
|
+
handler() {
|
174
|
+
|
175
|
+
// 二つ目の引数に、上で追加した関数を指定
|
176
|
+
|
177
|
+
products.asyncFind(this.id, this.xxx)
|
178
|
+
|
179
|
+
},
|
180
|
+
|
181
|
+
immediate: true
|
182
|
+
|
183
|
+
}
|
184
|
+
|
185
|
+
}
|
186
|
+
|
187
|
+
}
|
188
|
+
|
189
|
+
</script>
|
190
|
+
|
191
|
+
```
|
192
|
+
|
193
|
+
これで動くようになりましたが、setTimeoutが動作していないように見えます。
|
194
|
+
|
195
|
+
修正前のものと、やはり動作が違ってきてしまうのでしょうか?
|