filterメソッドをfunction関数で理解したい

前提・実現したいこと

アロー関数で書かれたfiliterメソッドのサンプルコードをfunction記法でも理解したいです。
Vue.jsで連想配列を表示、フォームに入力による絞り込みを行っています。
アロー関数で書かれたサンプルコードは正常に動作します。

該当のソースコード

javascript
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Vue.js filter関数</title>
7    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
8  </head>
9  <body>
10    <div id="app">
11    <h1>一覧</h1>
12    <input type="text" v-model="fruits.name">
13    <p v-for="item in result">{{item.name}}</p>  
14    </div>
15
16    <script>
17      const items = [
18        { id: 1, name: "リンゴ"},
19        { id: 2, name: "ミカン"},
20        { id: 3, name: "ブドウ"}, 
21      ]
22
23      new Vue({
24        el: '#app',
25        data: {
26          fruits: {
27            name: '',
28          },
29        },
30
31        computed: {
32          result: function () {
33            let list = items;
34            if (this.fruits.name) {
35              list = list.filter(item => item.name.indexOf(this.fruits.name) > -1);
36            }
37            return list;
38          }
39        },
40      });
41    </script>    
42  </body>
43</html>

試したこと


list = list.filter(item => item.name.indexOf(this.fruits.name) > -1);

if文中の上記のアロー関数を以下functionにしたところエラー。

list = list.filter(function(item) {
return item.name.indexOf(this.filter.name) > -1;              
})

補足情報

Chrome DevToolsエラーは該当行で以下（一応）
Cannot read property 'name' of undefined"

引数、return、this等を何パターンか試してもダメでした。
そういうやり方自体がダメなので、詳しい方に見てもらいたく。

アロー関数だとfilterとindexOfでやっていること自体は分かりやすいですが
functionで試せなくて、モヤモヤしています。

行動規範の内容に同意します

回答2件

functionで試せなくて、モヤモヤしています。

これはthisの問題です。アロー関数は外側のthisを引き継ぐのに対して、functionで書いた関数は固有のルールでthisが設定されます。

とりあえずは、

function(){}.bind(this)のようにして外側のthisを内側に適用する
thisという名前を使わず、外側で別の名前の変数にthisを入れて内側から使う

などの方法で対策できます。

投稿2020/10/08 11:59

maisumakun

総合スコア146098

sothilder

2020/10/08 16:04

全部できました！ self = thisって見かけたことありましたけど、今回のようなケースで使えるんですね。 let self = this if (this.fruits.name) { list = list.filter(function(item) { return item.name.indexOf(self.fruits.name) > -1; }) } ありがとうございました。調べてたら他にもnewとか引数等の違いもあったので、見直すいいきっかけになりました。

行動規範の内容に同意します

ベストアンサー

this値

this値は関数が呼び出される度に、新しく生成されます。

JavaScript
1list = list.filter(function(item) {
2  return item.name.indexOf(this.filter.name) > -1;              
3})

function(item) {} は filter() 呼び出し時点では呼び出されていませんが、コールバック関数は内部的に呼び出されるタイミングがある為、その時に「新しいthis値」に置き換わります。

アロー関数

アロー関数は外側のスコープのthis値に束縛して呼び出す為、呼び出し時点で this 値を束縛して変更する事が出来ません。

JavaScript
1(function (){
2  'use strict';
3  const foo = () => console.log(this);
4  foo.bind(2)();  // 1
5}).call(1);

アロー関数生成時点でthis値は既に1に束縛されている為、後で 2 で束縛し直す事が出来ません。

※this値指定の自由度においては、アロー関数は関数式の下位互換ともいえます。

Array.prototype.filter()

Cannot read property 'name' of undefined"

Array.prototype.filter() にはthis値を束縛する機能があるので、それを使えばいいでしょう。

Array.prototype.filter() - JavaScript | MDN

JavaScript
1list = list.filter(function(item) {
2  return item.name.indexOf(this.filter.name) > -1;              
3}, this);

Re: sothilder さん

投稿2020/10/08 13:50

think49

総合スコア18189

sothilder

2020/10/08 15:53

できました！function関数内で自分が指定していたthisは何も代名してなかったということですね。で、外側にあるであろうthisを内側にバインドすれ動くと。クラス内でthisが再利用可能とか、function、アロー関数の違いがグチャグチャになってました。しっかりと確認できてよかったです。ありがとうございました！ (this.filter.nameのfilterはfruitsでした。)

think49

2020/10/08 23:13

> function関数内で自分が指定していたthisは何も代名してなかった Strict Modeならundefined、そうでなければ、グローバルオブジェクトを参照します。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this

行動規範の内容に同意します

あなたの回答