Vue.js 源码阅读 之 构造函数中的this

利用Vue构造函数构造实例对象,构造函数中this始终指向Vue的实例对象.如下代码:

new Vue({
el: '#app',
data:{
items: [1,2,3]
},
methods: {
'test': function () {
console.log(this.items)
}
}
})

这里以源码中如何处理methods的函数,介绍在Vue.js源码中,是如何实现把this对象绑定到实例上

函数位于源码(/src/core/instance/state.js).Vue.js中源码均有使用Flow静态类型检查器,代码如下:

function initMethods (vm: Component, methods: Object) {
const props = vm.$options.props
for (const key in methods) {
vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
if (process.env.NODE_ENV !== 'production') {
if (methods[key] == null) {
warn(
`method "${key}" has an undefined value in the component definition. ` +
`Did you reference the function correctly?`,
vm
)
}
if (props && hasOwn(props, key)) {
warn(
`method "${key}" has already been defined as a prop.`,
vm
)
}
}
}
}

通过bind(methods[key],vm)绑定到vm实例上。bind的函数位于(/src/shared/util.js)。代码如下:

export function bind (fn: Function, ctx: Object): Function {
function boundFn (a) {
const l: number = arguments.length
return l
? l > 1
? fn.apply(ctx, arguments)
: fn.call(ctx, a)
: fn.call(ctx)
}
// record original fn length
boundFn._length = fn.length
return boundFn
}