Lao乾妈官方认证唯一女友:D 2022-08-29 21:45 采纳率: 85.7%
浏览 32
已结题

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

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;
            }); */
          },
        },
      });

  • 写回答

2条回答 默认 最新

  • 雾里桃花 2022-08-29 22:01
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 9月6日
  • 已采纳回答 8月29日
  • 创建了问题 8月29日

悬赏问题

  • ¥20 被人匿名举报,可以反查吗
  • ¥15 华为ensp使用基本ACL限制公司网络访问
  • ¥15 帮我做下照片上的PLC题
  • ¥15 labview2022 使用modbus报缺少依赖?
  • ¥15 谷歌地图是不是不开通结算功能,api会使用不了哦
  • ¥15 unity腾讯云对象存储机型适配
  • ¥15 求全国交通咨询模拟代码,要求如下,可以完全在dev c++运行
  • ¥15 根据要求修改程序编码
  • ¥15 用 Python 做一个用 Excel 表导入的答题系统
  • ¥15 使用微信开发者工具实现一个“婚博会”小程序