Arrow function in vue and ordinary function this point to

problem description:
encapsulates the callback when the axios method, getAxios () is successful
Why does the result appear in the following code

my idea:
1. () = > {} is equivalent to function () {} .bind (this)
2. In strict mode, the this in a function without a direct caller is undefined
himself vaguely aware of the reason, but not sure, hoping to get a clear answer.

  created () {
    this.getBannerList()
  },

  methods: {
    getBannerList () {
      getAxios("/bannerApi", (res) => {
        console.log(this)      //:VueComponent 
      })  
      
      getAxios("/bannerApi", function (res) {
        console.log(this)      //: undefined
      })
    }
  }
Apr.07,2021
The this of

ordinary function points to you can take a look at this blog post. I hope it will help you https://codeshelper.com/a/11.


Arrow function pointing to the outside, similar to the way bind (this), uses the vue,babel plug-in to replace it with ES5.


.

ordinary methods have this bindings inside

returns undefined because it is an asynchronous callback in strict mode this is undefined

The

arrow function is not bound to this and the this of the arrow function is to look up the scope chain and the this determines only at definition time that it is not run time

Menu