Vue中methods原理分析

1. methods是如何绑定this的

methods绑定上下文执行环境是通过bind来进行的。固定了这个this。Vue考虑到不是所有的浏览器都支持bind。于是也实现了自己的polyfillBind

function polyfillBind(fn, ctx) {
  return function boundFn(a) {
    const l = arguments.length;
    return l > 0 ? (
      l > 1 ?
      fn.apply(ctx, arguments) :
      fn.call(ctx, a)
    ) : fn.call(ctx);
  }
}
function nativeBind(ctx) {
  return fn.bind(ctx);
}

var bind = Function.prototype.bind ?
  nativeBind :
  polyfillBind;

2. methods如何通过this访问的

这里就是简单粗暴的复制即可

function initMethods(vm, methods) {
    for (let key in methods) {
        vm[key] = methods[key] == null ?
            noop :
            // 固定this为Vue的实例
            bind(methods[key], vm);
    }
}