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

Question

###やりたいこと
コールバック部分の無名関数を、名前付きの関数に置換したいと考えています。

###元のコード
<products.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)
  }

<Product.vue>

<script>
  import products from 'products.js'
  export default {
    props: {
      id: Number
    },
    data() {
      return {
        item: null
      }
    },
    watch: {
      id: {
        handler() {
          products.asyncFind(this.id, item => {
            this.item = item
          })
        },
        immediate: true
      }
    }
  }
</script>

###やってみたこと
<products.js> に以下のfind関数を追記し、asyncFindからcallbackを削除し、find関数を配置しました。これで、無名関数を使用していた時と同じように動くと思いましたが、<Product.vue> で商品名などが表示されませんでした。
<products.js>

export default {
  find(id) { // 追記した関数
    return database.find(el => el.id === id)
  },
  asyncFind(id) {
    setTimeout(() => {
      return this.find(id) // callbackを削除してfind関数を配置
  }, 1000)
}

<Product.vue>

<script>
  import products from 'products.js'
  export default {
    props: {
      id: Number
    },
    data() {
      return {
        item: null
      }
    },
    watch: {
      id: {
        handler() {
          // ここを書き換えて、asyncFindからの戻り値を、`this.item`に格納しようとした
          this.item = products.asyncFind(this.id)
        },
        immediate: true
      }
    }
  }
</script>

###質問
そもそも、<products.js> の無名関数部分を、名前付きの関数に置換するのが間違っていたのか、それとも私のコードの考え方・書き方に間違えがあるのか、ご指摘していただけると助かります。

Comments

[Lhankor_Mhy]

this.find(id)
↑この this には何が入っているのですか？ アロー関数は this を束縛しないので、ご提示の部分だけではわからないと思うのですが。

また、
asyncFind(id, callback) {}
の第2引数が削除されていますが、これは、this.findと同じものなのですか？

[Lhankor_Mhy]

あ、Product.vue も書き換えているのですね。失礼しました。

そうすると、その部分の this が一致するのかが気になりますね。

[tara-tail]

Lhankor_Mhyさん、ありがとうございます。私がthisの使い方を間違っていると思います。ここの場合は、アロー関数内なので、thisはwindowオブジェクトを参照してしまいますよね？コードを書き換えますので、再度ご確認いただき、お手数ですが再度ご指摘ください。

[tara-tail]

thisは、find関数を指しているつもりです。もしかしたら、不要なのかもしれません。

[Lhankor_Mhy]

this.item = products.asyncFind(this.id)

とありますが、これは products.asyncFind の戻り値を this.item に代入するということになるかと思います。
一方で、asyncFind には return 文がありませんから、undefined を返すと思います。
そこに問題がありそうな気がしますが……

[tara-tail]

Lhankor_Mhy様。find関数にreturnがあるので、てっきりasyncFindからも値が戻ると思っていたのですが、勘違いだったようです。
asyncFindから、ちゃんと値が戻るようにするにはどうしたら（どこにreturnを書けば）良いでしょうか？たびたび申し訳ありません。

[Lhankor_Mhy]

非同期なので、handler の中で代入するには、async await で書くしかないと思いますが……

asyncFind に引数で this を渡して、そちら側で代入するのではダメなのですか？

[tara-tail]

Lhankor_Mhyさん、ありがとうございます。ちょっと私の頭では理解できておりません。thisを渡すというのは、<products.js> のasyncFind の引数に「asyncFind (id, this)」のようにするのでしょうか？

[Lhankor_Mhy]

そうですね。そちら側の this と一致するなら必要ないですが、おそらく異なるのではないですか？

[tara-tail]

Lhankor_Mhyさん、<Product.vue> の「this.item」に値を渡すには、callback関数でないと難しいみたいですね。諦めて、元のコードに戻そうと思います。ありがとうございました。

[Lhankor_Mhy]

お力になれずすみません。

目的に合うのかわかりませんが、callback を残していいなら、

find(id) { // 追記した関数
return database.find(el => el.id === id)
},
asyncFind(id, callback) {
setTimeout(() => {
callback( this.find(id) )
}, 1000)
}

でもいいのかもしれませんね。

Answer 1

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

export default {
  find(id) { // 追記した関数
    return database.find(el => el.id === id)
  },
  asyncFind(id) {
    return new Promise(res => setTimeout(() => {
      res(this.find(id))
    }, 1000))
  }
}

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

<script>
  import products from 'products.js'
  export default {
    props: {
      id: Number
    },
    data() {
      return {
        item: null
      }
    },
    watch: {
      id: {
        handler() {
          products
              .asyncFind(this.id)
              .then(it => this.item = it);
        },
        immediate: true
      }
    }
  }
</script>

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

---

追記

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

// これと
let obj = {
  test: (function(){...}).bind(this);
};
// これはほぼ等しい
let obj = {
  test: () => {...};
};

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

var x = 5;
let obj = {
  x: 1,
  func() {return this.x},
  func1: () => this.x
};
obj.func() // ……1
(0, obj.func)() // ……2

obj.func1()  // ……3
(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はインスタンスを示します。

class Test {
  constructor(x) {
    this.x = x;
  }
  func() {
    return this.x;
  }
  func1 = () => this.x;
}

let ins = new Test(5);
ins.func() // -> 5
(0, ins.func)() // -> TypeError: Cannot read property 'x' of undefined
ins.func1() // -> 5
(0, ins.func1)() // -> 5

Comments

[tara-tail]

frodo821さん、返信が遅くなりまして申し訳ありません。
まず、質問させていただいた、callbackを使用しないやり方について、promiseでfindの結果を返すやり方を教えていただき、ありがとうございました。大変よく理解でき、コールバックを使用するやり方と両方のやり方を習得することができました。
また、thisについても詳細な説明をありがとうございます。自分はthisについては、結構その場しのぎでやっていた感もあり、もっと理解を深めなければと思っております。
大変恐縮なのですが、frodo821さんの説明の中で一つだけ教えてください。
(0, obj.func)() のような書き方は初めて見るもので、無名関数のようにも見えるのですが、この中の「0」は何を指しているのでしょうか？説明のあるURLでも結構ですので、教えていただけると助かります。

[frodo821]

(0, func)は単に関数を別名で呼び出しているだけです。(0, eval)のようにしてグローバル名前空間で実行したり、(0, obj.func)のようにしてわざとthisの参照を変えたりするテクニックですね。

ここでの「,」はカンマ演算子といって、後者を返す演算子のひとつです。なので、0であることに必然性はありません。

[Lhankor_Mhy]

横からすみません。
最後のクラス構文の (0, ins.func)() は this が undefined に束縛されるので、undefined.x が返せずエラーになるかと思います。

[frodo821]

いえ、そこのthisはグローバルオブジェクトに束縛されていますよ。グローバルオブジェクトは例えばnode.jsならglobalになりますし、ブラウザならwindowです。thisがundefinedになるような状況は、javascriptではstrictでなければ起こりません。この場合、'use strict'の宣言がないので、thisは普通にグローバルオブジェクトです。

[Lhankor_Mhy]

うーん、クラス構文は strict なので、関数呼び出しコンテクストはグローバルオブジェクトではなく undefined を束縛するはずですが……

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this#Function_context

環境の問題かもしれませんね。

[frodo821]

あ、そうなんですね。babelでes5にしたときはstrictになってなかったので、そういう理解をしてました

[Lhankor_Mhy]

おお、babelだとそうなんですね。知りませんでした。ありがとうございます。

[frodo821]

あ、今ちらっと確認したら、これ自分でデフォルトではstrictにしない設定にしてたみたいです。それがclass構文にも影響してただけっぽいですね。

なので回答の方修正しておきました。

[Lhankor_Mhy]

それは、ちょっとした罠ですね……

[frodo821]

ですね……。情報ありがとうございました！

[tara-tail]

お忙しいところ、お二方の丁寧なご回答、本当にありがとうございました。少し自分には敷居の高い会話となってしまいましたが、大変奥の深い言語だと痛感しました。コツコツと勉強いたします。また、質問する機会があると思いますので、よろしくお願いいたします。

[frodo821]

javascriptは奇妙な挙動の塊なので、意外と「え、そこで？」みたいな落とし穴があります。ちょっと触るだけなら簡単なんですけどね……。