深入浅出 Vue 系列 数据劫持实现原理

2020-06-14 06:28:58易采站长站整理

if (value.hasOwnProperty('__ob__') && value.__obj__ instanceof Observer) {
ob = value.__ob__
} else if (Object.isExtensible(value)) {
// 后续需要定义诸如 __ob__ 这样的属性,所以需要能够扩展
ob = new Observer(value)
}

return ob
}

上述代码中提到了对象的可扩展性,在 JavaScript 中所有对象默认都是可扩展的,但同时也提供了相应的方法允许对象不可扩展:


const obj = { name: 'xiaoming' }
Object.preventExtensions(obj)
obj.age = 20
console.log(obj.age) // undefined

除了上述方法,还有前面提到的 Object.seal() 和 Object.freeze() 方法。

三、针对 Array 类型的劫持

数组是一种特殊的对象,其下标实际上就是对象的属性,所以理论上是可以采用 Object.defineProperty() 方法处理数组对象。

但是 Vue 并没有采用上述方法劫持数组对象,笔者猜测主要由于以下两点:(读者有更好的见解,欢迎留言。)

1、特殊的 length 属性

数组对象的 length 属性的描述符天生独特:


const arr = [1, 2, 3]

Object.getOwnPropertyDescriptor(arr, 'length').configurable // false

这就意味着无法通过 Object.defineProperty() 方法劫持 length 属性的读取和设置方法。

相比较对象的属性,数组下标变化地相对频繁,并且改变数组长度的方法也比较灵活,一旦数组的长度发生变化,那么在无法自动感知的情况下,开发者只能手动更新新增的数组下标,这可是一个很繁琐的工作。

2、数组的操作场景

数组主要的操作场景还是遍历,而对于每一个元素都挂载一个 get 和 set 方法,恐怕也是不小的性能负担。

3、数组方法的劫持

最终 Vue 选择劫持一些常用的数组操作方法,从而知晓数组的变化情况:


const methods = [
'push',
'pop',
'shift',
'unshift',
'sort',
'reverse',
'splice'
]

数组方法的劫持涉及到原型相关的知识,首先数组实例大部分方法都是来源于 Array.prototype 对象。

但是这里不能直接篡改 Array.prototype 对象,这样会影响所有的数组实例,为了避免这种情况,需要采用原型继承得到一个新的原型对象:


const arrayProto = Array.prototype
const injackingPrototype = Object.create(arrayProto)

拿到新的原型对象之后,再重写这些常用的操作方法:


methods.forEach(method => {
const originArrayMethod = arrayProto[method] injackingPrototype[method] = function (...args) {