このthisはどこを指してますか？

Question

JavaScriptとVue.jsを勉強している初学者です。
PHPのクラスやインスタンスの基礎については理解していますが、JavaScript と Vue.js については勉強中で理解が浅いです（><）

基礎から学ぶ Vue.jsという書籍にあるリストの絞り込みに利用しようのコードについて質問があります。

VueというよりはJavaScriptの知識が低くthisが何を指しているのか理解できません。
下記がコードです。

<!-- HTMLのコード -->
<div id="app">
  <input v-model.number="budget"> 円以下に絞り込む
  <input v-model.number="limit"> 件を表示
  <p>{{ matched.length }} 件中 {{ limited.length }} 件を表示中</p>
  <ul>
    <!-- v-forでは最終結果、算出プロパティのlimitedを使用する -->
    <li v-for="item in limited" v-bind:key="item.id">
      {{ item.name }} {{ item.price }}円
    </li>
  </ul>
</div>

<!-- JavaScriptのコード -->
new Vue({
  el: '#app',
  data: {
    // フォームの入力と紐付けるデータ
    budget: 300,
    // 表示件数
    limit: 2,
    // もとになるリスト
    list: [
      { id: 1, name: 'りんご', price: 100 },
      { id: 2, name: 'ばなな', price: 200 },
      { id: 3, name: 'いちご', price: 400 },
      { id: 4, name: 'おれんじ', price: 300 },
      { id: 5, name: 'めろん', price: 500 }
    ]
  },
  computed: {
    // budget以下のリストを返す算出プロパティ
    matched: function () {
      return this.list.filter(function (el) {
        return el.price <= this.budget
      }, this)
    },
    // matchedで返ったデータをlimit件返す算出プロパティ
    limited: function () {
      return this.matched.slice(0, this.limit)
    }
  }
})

matched と limited にある this が何を指しているのか理解できません。
途中までになりますが私の中での処理の流れを順に説明します。

処理1

HTMLで v-for="item in limited" と記述しているので、limited にある配列のデータを繰り返し表示します。
最初に limited にある関数が実行されます。

処理2

limited は return this.matched.slice(0, this.limit) という処理をしていいます。
sliceメソッドで配列の表示件数を調整しています。初期値は limit: 2 のため2件表示されます。
返り値の中でmatchedメソッドを読んでいるため、matchedが実行されます。

処理3

matchedではfilterメソッドの第一引数にはメソッドでpriceとbudgetを比較して真偽値を返しています。

    matched: function () {
      return this.list.filter(function (el) {
        return el.price <= this.budget
      }, this)
    },

matched と limited にある this が何を指しているのかわからないため、ここまでしか流れがわかりません。

私の中ではVue()の引数にオプションを記述してVueのコンストラクタを実行して、インスタンスを作成して描画しているという認識です。

new Vue({
	// ここにオプションを記述してVueのコンストラクタを実行
})

順番としてはVue()内に記述したコンストラクタが実行された後にインスタンスが作成されているため、オプション内に記述したthisはこのインスタンスを指しているわけではないと思うのですが、matched と limited にある this は何を指しているのでしょうか？

this.list.filterでなぜlistの配列にアクセスできるのか、 function (el) の el の仮引数になぜlistの配列が入るのか謎です(><)

thisが何を指しているのか、ご存知の方、教えてくださいm(__)m

Answer 1

今回の質問に対する固有な回答ではありませんが、コメントを入れておきます。

JavaScriptの場合、thisは状況によって決まる以外に、Function.prototype.call()などを使うことでコードでセットすることも可能です。なので、ソースコードから想像できないものがthisになることもありえます。

Comments

[退会済みユーザー]

なるほど、callを使うとthisの指定ができるのですね。
ありがとうございますm(__)m

Answer 2

thisが何を指しているのか

↑この場合、javascriptのオブジェクト。
特に今回は、

new Vue({
    // ここにオプションを記述してVueのコンストラクタを実行
})

↑Vueオブジェクト。

Comments

[退会済みユーザー]

あー、なるほど。Vueオブジェクトを指してると考えると this.list や this.matched の記述も納得です。

私の中では

- オブジェクトとインスタンス違い（私の中では同じと捉えれてる）
- なぜコンストラクタにthisと書いてオブジェクト自身を指せるのか（ブラウザの内部処理の順番）

について疑問が残るので、調べてみます。
ありがとうございますm(__)m

Answer 3

すでに解決済みですが、補足で回答させていただきます。

this.list.filter(コールバック, スコープ) の関数では2つ目の引数として this を渡してスコープを指定しています。引数がなければ、また違うものになります。

Array.prototype.filter()

thisの扱いについては60ページで簡単に解説していますが、他の方がおっしゃられている通り関数の書き方で複雑に変わってしまうため、ネットの記事も参考にしてみてください。

Comments

[退会済みユーザー]

おお！先生だ！補足ありがとうございますm(_ _)m
JavaScriptの基本的なことも理解できていないので、ネットで調べながら本を読み進めていきます。