汉码未来

大部分开发者都会合理、巧妙的运用 this 关键字。

初学者容易在 this 指向上犯错，如下面这个 Vue 组件：

<div id="app"></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script><script>
  // 发送post请求
  const post = (cb) => {
    // 假装发了请求并在200ms后返回了服务端响应的内容
    setTimeout(function() {
      cb([
        {
          id: 1,
          name: '小红',
        },
        {
          id: 2,
          name: '小明',
        }
      ]);
    });
  };

  new Vue({
    el: '#app',
    data: function() {
      return {
        list: [],
      };
    },
    mounted: function() {
      this.getList();
    },
    methods: {
      getList: function() {
        post(function(data) {
          this.list = data;
          console.log(this);
          this.log(); // 报错：this.log is not a function
        });
      },

      log: function() {
        console.log('输出一下 list:', this.list);
      },
    },
  });</script>
代码块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

这是初学 Vue 的同学经常碰到的问题，为什么这个 this.log() 会抛出异常，打印了 this.list 似乎也是正常的。

这其实是因为传递给 post 方法的回调函数，拥有自己的 this，有关内容可以查阅 this章节。

不光在这个场景下，其他类似的场景也要注意，在写回调函数的时候，如果在回调函数内要用到 this，就要特别注意一下这个 this 的指向。

可以使用 ES6 的箭头函数 或者将需要的 this 赋值给一个变量，再通过作用域链的特性访问即可：

<div id="app"></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script><script>
  // 发送post请求
  const post = (cb) => {
    // 假装发了请求并在200ms后返回了服务端响应的内容
    setTimeout(function() {
      cb([
        {
          id: 1,
          name: '小红',
        },
        {
          id: 2,
          name: '小明',
        }
      ]);
    });
  };

  new Vue({
    el: '#app',
    data: function() {
      return {
        list: [],
      };
    },
    mounted: function() {
      this.getList();
    },
    methods: {
      getList: function() {

        // 传递箭头函数
        post((data) => {
          this.list = data;
          console.log(this);
          this.log(); // 报错：this.log is not a function
        });

        // 使用保留 this 的做法
        // var _this = this;
        // post(function(data) {
        //   _this.list = data;
        //   console.log(this);
        //   _this.log(); // 报错：this.log is not a function
        // });
      },

      log: function() {
        console.log('输出一下 list:', this.list);
      },
    },
  });</script>
代码块
预览复制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

这个问题通常初学者都会碰到，之后慢慢就会形成习惯，会非常自然的规避掉这个问题