今天学到了什么#

• this的指向
• 组件实例对象的创建方式
• 构造函数和实例对象的继承关系

this的指向#

“谁调用，这个函数里的 this 就是谁”这句话只在一种常见写法下成立：普通函数 + 以点调用形式执行。更准确的版本是：

• 对“普通函数”（非箭头）来说，this 由“调用形式”决定，而不是由“函数写在哪”决定。

下面把最常见的几种“调用形式”列清楚，你就不会混了：

• obj.fn()：this === obj（这就是你说的“谁调用指向谁”最典型的情况）
• fn()：this === undefined（严格模式）/ window（非严格模式）
• fn.call(x, ...) / fn.apply(x, ...)：this === x
• fn.bind(x)：返回一个新函数，之后无论怎么调用，this 都固定是 x
• new Fn()：this 是新创建的实例对象
• 箭头函数：没有自己的 this，this 永远取决于“定义时外层的 this”（跟怎么调用无关）

结合你这行代码看：vue_test/10_src_组件自定义事件/App.vue

1
this.$refs.student.$on('atguigu', this.getStudentName)

这里其实出现了 3 个不同层面的“this”：

• 在 mounted() 里写的 this：是 App 实例（Vue 调用生命周期钩子时把 this 设成当前组件）
• $on 这个方法执行时的 this：是 **this.$refs.student（Student 实例）**，因为它是 `student.$on(…)` 这种点调用
• 回调 this.getStudentName 里 this 为什么还是 App：因为它是从 methods 里取出来的函数，Vue2 通常已经把它绑定到 App 上了（等价于你传了一个“已经 bind(App) 的函数”）；所以后续触发事件时，就算内部想用 call/apply 改 this，也改不掉

如果你把回调改成普通函数：

1
this.$refs.student.$on('atguigu', function () {
2
  console.log(this)
3
})

那这时就更像你说的那套：触发时 Vue 会以某种形式调用它，this 往往会指向 Student（触发 $emit 的组件实例）。

组件实例对象的创建方式#

new出来的也是实例对象，那我new出来demo之后，我再写呢？这是两个不同的Demo的实例对象吗？

对，是两个不同的实例对象（两个 vc），但它们来自同一个组件构造函数/组件定义。

把概念拆开就清楚了：

构造函数和实例对象的继承关系#

实例对象不会继承构造函数身上的东西吗？

不会。实例对象不会“继承构造函数对象本身（静态属性）”上的东西，实例只会沿着它的原型链去找属性。

把关系画成一条链你就懂了：

• 构造函数本身是一个对象：Vue
  你写 Vue.x = 123 是给这个“函数对象”加属性（静态属性）。
• 实例对象是 new Vue() / 组件实例：vm
vm 的原型链是：vm → Vue.prototype → Object.prototype ...

注意：原型链里有 Vue.prototype，没有 Vue 本身。
所以：

• Vue.prototype.x = 123 ✅ vm.x 能找到（从原型上继承）
• Vue.x = 123 ❌ vm.x 找不到（因为 Vue 不在 vm 的原型链上）

一个最小原生 JS 例子（和 Vue 一样的规则）：

1
function Foo() {}
2
Foo.a = 1              // 静态属性
3
Foo.prototype.b = 2    // 原型属性
4

5
const f = new Foo()
6
f.a // undefined
7
f.b // 2

如果你真的想让实例能访问到构造函数的静态属性，得自己“绕一下”，比如：

• 在原型方法里用 this.constructor 去拿：this.constructor.a
• 或者手动把 Foo.a 挂到 Foo.prototype 上

但在 Vue2 里，为了让组件里直接 this.$xxx 用，约定俗成就是挂 Vue.prototype.$xxx。