methods

Fri, 04 Oct 2024 00:00:00 +0800

Methods 的初始化

在 Vue.js 中，每个组件实例（vm）都会有一个 methods 属性，这个属性包含了组件中定义的所有方法。这些方法需要被初始化到实例上，以便可以在模板和生命周期钩子中被调用。初始化过程如下：

function initMethods(vm, methods) {
 for (var key in methods) {
 vm[key] = methods[key] == null ? noop : bind(methods[key], vm);
 }
}

这段代码遍历 methods 对象中的每个属性，并将其复制到 Vue 实例（vm）上。如果方法不存在（methods[key] == null），则赋值为一个空函数（noop），以避免对 undefined 的调用。否则，使用 bind 方法将每个方法的 this 绑定到 Vue 实例上。

Methods 作用域的固定

在 JavaScript 中，函数的 this 值是在函数被调用时确定的，而不是在定义时。这可能导致在 Vue 实例的方法中 this 并不指向实例本身，尤其是在方法被传递给其他函数或作为回调函数时。Vue 使用 bind 来解决这个问题，确保 this 总是指向 Vue 实例。

原生和兼容性 bind 实现

Vue.js 提供了两种 bind 的实现：原生的和兼容性的。兼容性实现是为了兼容那些不支持 Function.prototype.bind 的旧浏览器。

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

function nativeBind(fn, ctx) {
 return fn.bind(ctx);
}

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

polyfillBind 函数创建了一个新的函数 boundFn，它在调用时使用 call 或 apply 将 fn 的 this 绑定到 ctx 上。
nativeBind 函数直接使用原生的 bind 方法。
bind 变量根据浏览器是否支持原生 bind 来选择使用哪种实现。

使用 bind 的好处

使用 bind 后，我们可以在组件的方法中直接使用 this 来访问实例的属性和方法，而不用担心 this 的指向问题。这使得代码更加简洁和安全。

Methods on Last Stand

methods

Methods 的初始化

Methods 作用域的固定

原生和兼容性 bind 实现

使用 bind 的好处