vue的this指向问题

this：this是函数的内置关键字(箭头函数内部没有定义this)，在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）

function fc () {
console.log(this)
}
window.fc()//window对象

可以简单理解为：谁调用函数，this指向谁

但是在vue里，配置项(data/computed/methods...)中的属性和方法都是挂载到vue实例上的，配置项里的this，包括配置项methods里的方法的this全部被重写绑定到当前实例对象，不会因为执行环境的变更而变更，所以在vue组件化开发中，如果在组件中调用另一个组件的方法，方法中的this指向的不是方法当前的调用组件实例，仍旧是方法的定义组件实例

//父组件-father.vue

<template>
  <div class="app">
    <BaseSelect :fc="fc" />
    <!--在Father.vue中执行fc方法，打印结果是Father.vue的实例 -->
    <button @click="fc"></button>
  </div>
</template>
<script>
import BaseSelect from "./son.vue";
export default {
  components: {
    BaseSelect,
  },
  data() {
    return {
      name: "我是Father.vue的实例对象上的属性",
    };
  },
  methods: {
    fc() {
      console.log(this);
    },
  },
};
</script>

//father.vue的后代组件son.vue

<template>
  <div>
    <!--在son.vue中执行fc方法，打印结果还是Father.vue的实例 -->
    <button @click="fc()">执行fc方法，打印其中的this</button>
  </div>
</template>
<script>
export default {
  props: {
    fc: {},
  },
};
</script>

补充：axios中的this有三种可能指向，分别是axios，window，uundefined，改变this有三种方法：

<1>用Es6箭头函数写法，箭头函数没有this，指向上下文的this，即axios的调用者——vue实例

<2>使用bind方法修改函数this

<3>使用变量存储this，传递给函数

引申：call/apply/bind的异同?

都能改变函数的this，但call和apply会调用函数，bind不会调用函数，call和bind传递的是参数列表，apply传递的是数组参数