teratail
回答率
85.47%
質問するログイン新規登録
トップVue.jsに関する質問コールバックの無名関数を名前付きの関数に置換したい

編集履歴

回答編集履歴

7

コードの挙動について修正

2019/09/04 03:24

投稿

frodo821
frodo821

スコア322

test CHANGED
@@ -188,7 +188,7 @@
188
188
 
189
189
  ins.func() // -> 5
190
190
 
191
- (0, ins.func)() // -> undefined
191
+ (0, ins.func)() // -> TypeError: Cannot read property 'x' of undefined
192
192
 
193
193
  ins.func1() // -> 5
194
194
 

6

コードの整形

2019/09/04 03:24

投稿

frodo821
frodo821

スコア322

test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  asyncFind(id) {
16
16
 
17
- return new Promise((res, rej) => setTimeout(() => {
17
+ return new Promise(res => setTimeout(() => {
18
18
 
19
19
  res(this.find(id))
20
20
 
@@ -66,7 +66,7 @@
66
66
 
67
67
  .asyncFind(this.id)
68
68
 
69
- .then(it => this.items = it);
69
+ .then(it => this.item = it);
70
70
 
71
71
  },
72
72
 

5

誤字修正

2019/08/31 21:39

投稿

frodo821
frodo821

スコア322

test CHANGED
@@ -158,7 +158,7 @@
158
158
 
159
159
 
160
160
 
161
- そこで、新しいクラスの宣言方法では、インスタンスから直接呼ばない関数はArrow関数式で記述します。なぜなら、既存の無名関数式ではインスタンスから直接呼ばなければ、thisの示す先がインスタンスではなくなってしまうからです。一方Arrow関数式は想定された挙動をする、つまり直接呼ばなくてもthisはインスタンスを示すからです。
161
+ そこで、新しいクラスの宣言方法では、インスタンスから直接呼ばない関数はArrow関数式で記述します。なぜなら、既存の無名関数式ではインスタンスから直接呼ばなければ、thisの示す先がインスタンスではなくなってしまうからです。一方Arrow関数式は想定された挙動をする、つまり直接呼ばなくてもthisはインスタンスを示します。
162
162
 
163
163
 
164
164
 

4

語法の修正

2019/08/31 21:36

投稿

frodo821
frodo821

スコア322

test CHANGED
@@ -94,7 +94,7 @@
94
94
 
95
95
  コメントで、Arrow関数式に対する誤解がみられるので少し書いておきます。
96
96
 
97
- Arrow関数式は、定義された場所でのthisを___束縛します___。つまり、以下のコードは等価です:
97
+ Arrow関数式は、定義された場所でのthisを__束縛します__。つまり、以下のコードは等価です:
98
98
 
99
99
 
100
100
 
@@ -150,11 +150,11 @@
150
150
 
151
151
  このコードで、1と2の戻り値は異なります。
152
152
 
153
- 1の戻り値は、論ずるまでもなく1です。一方、2の戻り値は5となります。なぜかというと、1と2でthisの示すものが異なるからです。これは、特定のオブジェクトがobj.funcのthisに束縛されていないことに由来します。
153
+ 1の戻り値は、論ずるまでもなく1です。一方、2の戻り値は5となります。なぜかというと、1と2でthisの示すものが異なるからです。これは、特定のオブジェクトにobj.funcのthisが束縛されていないことに由来します。
154
154
 
155
155
 
156
156
 
157
- 他方、3と4の戻り値は共に5となります。なぜなら、定義された場所のthis.xは5だからです。定義された場所とは、自分自身を格納しているオブジェクトの中を___意味しません___。そのオブジェクトが定義された場所こそがthisの指し示す先になります。
157
+ 他方、3と4の戻り値は共に5となります。なぜなら、定義された場所のthis.xは5だからです。定義された場所とは、自分自身を格納しているオブジェクトの中を__意味しません__。そのオブジェクトが定義された場所こそがthisの指し示す先になります。
158
158
 
159
159
 
160
160
 

3

アロー関数式について追記

2019/08/31 21:30

投稿

frodo821
frodo821

スコア322

test CHANGED
@@ -83,3 +83,115 @@
83
83
  ```
84
84
 
85
85
  これで想定どおりの動作になるはずです。
86
+
87
+
88
+
89
+ ----
90
+
91
+ 追記
92
+
93
+
94
+
95
+ コメントで、Arrow関数式に対する誤解がみられるので少し書いておきます。
96
+
97
+ Arrow関数式は、定義された場所でのthisを___束縛します___。つまり、以下のコードは等価です:
98
+
99
+
100
+
101
+ ```javascript
102
+
103
+ // これと
104
+
105
+ let obj = {
106
+
107
+ test: (function(){...}).bind(this);
108
+
109
+ };
110
+
111
+ // これはほぼ等しい
112
+
113
+ let obj = {
114
+
115
+ test: () => {...};
116
+
117
+ };
118
+
119
+ ```
120
+
121
+ 定義された場所のthisというのがまた難しい概念なのですが、以下のコード例を使って説明します。
122
+
123
+
124
+
125
+ ```javascript
126
+
127
+ var x = 5;
128
+
129
+ let obj = {
130
+
131
+ x: 1,
132
+
133
+ func() {return this.x},
134
+
135
+ func1: () => this.x
136
+
137
+ };
138
+
139
+ obj.func() // ……1
140
+
141
+ (0, obj.func)() // ……2
142
+
143
+
144
+
145
+ obj.func1() // ……3
146
+
147
+ (0, obj.func)() // ……4
148
+
149
+ ```
150
+
151
+ このコードで、1と2の戻り値は異なります。
152
+
153
+ 1の戻り値は、論ずるまでもなく1です。一方、2の戻り値は5となります。なぜかというと、1と2でthisの示すものが異なるからです。これは、特定のオブジェクトがobj.funcのthisに束縛されていないことに由来します。
154
+
155
+
156
+
157
+ 他方、3と4の戻り値は共に5となります。なぜなら、定義された場所のthis.xは5だからです。定義された場所とは、自分自身を格納しているオブジェクトの中を___意味しません___。そのオブジェクトが定義された場所こそがthisの指し示す先になります。
158
+
159
+
160
+
161
+ そこで、新しいクラスの宣言方法では、インスタンスから直接呼ばない関数はArrow関数式で記述します。なぜなら、既存の無名関数式ではインスタンスから直接呼ばなければ、thisの示す先がインスタンスではなくなってしまうからです。一方Arrow関数式は想定された挙動をする、つまり直接呼ばなくてもthisはインスタンスを示すからです。
162
+
163
+
164
+
165
+ ```javascript
166
+
167
+ class Test {
168
+
169
+ constructor(x) {
170
+
171
+ this.x = x;
172
+
173
+ }
174
+
175
+ func() {
176
+
177
+ return this.x;
178
+
179
+ }
180
+
181
+ func1 = () => this.x;
182
+
183
+ }
184
+
185
+
186
+
187
+ let ins = new Test(5);
188
+
189
+ ins.func() // -> 5
190
+
191
+ (0, ins.func)() // -> undefined
192
+
193
+ ins.func1() // -> 5
194
+
195
+ (0, ins.func1)() // -> 5
196
+
197
+ ```

2

文法の修正

2019/08/31 21:25

投稿

frodo821
frodo821

スコア322

test CHANGED
@@ -18,7 +18,9 @@
18
18
 
19
19
  res(this.find(id))
20
20
 
21
- }, 1000)
21
+ }, 1000))
22
+
23
+ }
22
24
 
23
25
  }
24
26
 

1

編集途中で投稿してしまったため、編集を完了後再投稿

2019/08/31 21:01

投稿

frodo821
frodo821

スコア322

test CHANGED
@@ -12,14 +12,72 @@
12
12
 
13
13
  },
14
14
 
15
- async asyncFind(id) {
15
+ asyncFind(id) {
16
16
 
17
- return await new Promise(()setTimeout(() => {
17
+ return new Promise((res, rej) => setTimeout(() => {
18
18
 
19
- this.find(id)
19
+ res(this.find(id))
20
20
 
21
21
  }, 1000)
22
22
 
23
23
  }
24
24
 
25
25
  ```
26
+
27
+
28
+
29
+ まずこのようにすることで、asyncFind関数がpromiseを返すようになります。値を受ける側は、このようにします:
30
+
31
+
32
+
33
+ ```vue
34
+
35
+ <script>
36
+
37
+ import products from 'products.js'
38
+
39
+ export default {
40
+
41
+ props: {
42
+
43
+ id: Number
44
+
45
+ },
46
+
47
+ data() {
48
+
49
+ return {
50
+
51
+ item: null
52
+
53
+ }
54
+
55
+ },
56
+
57
+ watch: {
58
+
59
+ id: {
60
+
61
+ handler() {
62
+
63
+ products
64
+
65
+ .asyncFind(this.id)
66
+
67
+ .then(it => this.items = it);
68
+
69
+ },
70
+
71
+ immediate: true
72
+
73
+ }
74
+
75
+ }
76
+
77
+ }
78
+
79
+ </script>
80
+
81
+ ```
82
+
83
+ これで想定どおりの動作になるはずです。