this的指向问题，具体问题在下面的代码注释里

Question

this的指向问题，具体问题在下面的代码注释里
下面是所有的代码了，需要引入一个vue.js

<div id="list">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord" /><br /><br />
      <li v-for="(objP) in filPersons">{{objP.id}}--{{objP.uname}}--{{objP.age}}</li>
    </div>

```javascript
      Vue.config.productionTip = false;
      const vm = new Vue({//----------------vm在这里-----------------------
        el: '#list',
        data: {
          persons: [
            { id: '001', uname: '李常超', age: 18 },
            { id: '002', uname: '李大哥', age: 28 },
            { id: '003', uname: 'LCC', age: 38 },
            { id: '004', uname: 'Lcc', age: 48 },
          ],
          keyWord: '',
},
 computed: {
          filPersons() {
//问题在这里，下面的箭头函数我把它换成普通函数就不行，我想应该是this.keyWord的指向问题错了
//打印this.keyWord的this，发现如果是箭头函数的话指向的是vm,就没问题
            return this.persons.filter((objP) => {
              return objP.uname.indexOf(this.keyWord) !== -1;
            });
//但如果是普通函数的话，打印this.keyWord的this，指向的是window
//所以我的问题是，怎么看出来这两个this的指向的啊？
//如果说箭头函数没有自己的this，往外找的话，不是可以找到filPersons这个方法吗？怎么又往上找到vm了呢？
          /*  return this.persons.filter(function (objP) {
              objP.uname.indexOf(this.keyWord) !== -1;
            }); */
          },
        },
      });

Answer 1

filter方法是指向window的，所以你使用普通函数它的this指针是指向window
箭头函数本身没有this指向，所以会查找外级的函数，vue中所有的方法的this都是被绑定到vue实例上的，统一指向vue实例不管是data函数，还是各个生命周期，还是wacch computed它们的指针全部都背绑定到了vue实例