Vue 学习（一）深入 Vue 源码学习 JavaScript

看 Vue 源码学习 js

刷了一下这篇文章 - new Vue 发生了什么

Vue 代码

function Vue(options) {
  if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}

initMixin(Vue);
stateMixin(Vue);
eventsMixin(Vue);
lifecycleMixin(Vue);
renderMixin(Vue);

export default Vue;

export function initMixin(Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    // .... 一系列代码
  };
}

学习和思考

• JS 中判断是否是用 new 调用函数
• 练习了 this 的指向
• 再去看看 new 方法做了什么
• initMixin 竟然可以操作 Vue 方法的 prototype
• 为什么不能直接 Vue(xxx)，而要 new Vue(xxx)

手写练习

function a(params) {
  // JS 中判断是否是用 new 调用函数 https://bbchin.com/archives/js-new-jg
  if (this instanceof a) {
    console.log('new 调用');
  } else {
    console.log('普通调用');
  }
  // 练习了 this 的指向
  this._test(params);
}

function b(a) {
  a.prototype._test = function (params) {
    console.log(params);
  };
}

// 函数 b 竟然可以操作 a 方法的 prototype
b(a);

// 为啥普通调用会报错，因为直接调用的时候_test 指向 window
// a(1234)

// 再去看看 new 方法做了什么
new a(4567);