コールバックの無名関数を名前付きの関数に置換したい

Question

###やりたいことコールバック部分の無名関数を、名前付きの関数に置換したいと考えています。 ###元のコード ```js const database = [ { id: 1, name: '商品A', price: 100, content: '商品A詳細' }, { id: 2, name: '商品B', price: 200, content: '商品B詳細' }, { id: 3, name: '商品C', price: 300, content: '商品C詳細' } ] export default { asyncFind(id, callback) { setTimeout(() => { callback(database.find(el => el.id === id)) }, 1000) } ``` ```vue ``` ###やってみたことに以下の`find`関数を追記し、`asyncFind`からcallbackを削除し、find関数を配置しました。これで、無名関数を使用していた時と同じように動くと思いましたが、で商品名などが表示されませんでした。 ```js export default { find(id) { // 追記した関数 return database.find(el => el.id === id) }, asyncFind(id) { setTimeout(() => { return this.find(id) // callbackを削除してfind関数を配置 }, 1000) } ``` ```vue ``` ###質問そもそも、の無名関数部分を、名前付きの関数に置換するのが間違っていたのか、それとも私のコードの考え方・書き方に間違えがあるのか、ご指摘していただけると助かります。

Accepted Answer

修正後のproducts.asyncFind関数はundefinedのみしか返していません。さて、これを修正して動作するようにする方策はいくつかあります。そのうちのひとつを以下に示してみます。

javascript
1export default {
2  find(id) { // 追記した関数
3    return database.find(el => el.id === id)
4  },
5  asyncFind(id) {
6    return new Promise(res => setTimeout(() => {
7      res(this.find(id))
8    }, 1000))
9  }
10}

まずこのようにすることで、asyncFind関数がpromiseを返すようになります。値を受ける側は、このようにします:

vue
1<script>
2  import products from 'products.js'
3  export default {
4    props: {
5      id: Number
6    },
7    data() {
8      return {
9        item: null
10      }
11    },
12    watch: {
13      id: {
14        handler() {
15          products
16              .asyncFind(this.id)
17              .then(it => this.item = it);
18        },
19        immediate: true
20      }
21    }
22  }
23</script>

これで想定どおりの動作になるはずです。

追記

コメントで、Arrow関数式に対する誤解がみられるので少し書いておきます。
Arrow関数式は、定義された場所でのthisを__束縛します__。つまり、以下のコードは等価です:

javascript
1// これと
2let obj = {
3  test: (function(){...}).bind(this);
4};
5// これはほぼ等しい
6let obj = {
7  test: () => {...};
8};

定義された場所のthisというのがまた難しい概念なのですが、以下のコード例を使って説明します。

javascript
1var x = 5;
2let obj = {
3  x: 1,
4  func() {return this.x},
5  func1: () => this.x
6};
7obj.func() // ……1
8(0, obj.func)() // ……2
9
10obj.func1()  // ……3
11(0, obj.func)() // ……4

このコードで、1と2の戻り値は異なります。
1の戻り値は、論ずるまでもなく1です。一方、2の戻り値は5となります。なぜかというと、1と2でthisの示すものが異なるからです。これは、特定のオブジェクトにobj.funcのthisが束縛されていないことに由来します。

他方、3と4の戻り値は共に5となります。なぜなら、定義された場所のthis.xは5だからです。定義された場所とは、自分自身を格納しているオブジェクトの中を__意味しません__。そのオブジェクトが定義された場所こそがthisの指し示す先になります。

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

javascript
1class Test {
2  constructor(x) {
3    this.x = x;
4  }
5  func() {
6    return this.x;
7  }
8  func1 = () => this.x;
9}
10
11let ins = new Test(5);
12ins.func() // -> 5
13(0, ins.func)() // -> TypeError: Cannot read property 'x' of undefined
14ins.func1() // -> 5
15(0, ins.func1)() // -> 5

関連した質問