補充:

• 數組的響應式

// 對數組的方法進行重寫
// 1. 不能影響本來的方法
// 2. 調用的時候可以找到它
let odlArrayPrototype = Array.prototype;
let proto = Object.create(odlArrayPrototype); // 繼承
['push','shift','unshift'].forEach(method =>{proto[method] = function(){  // 函數劫持: 把函數進行重寫,內部繼續調用老的方法updateView();  // 切片編程odlArrayPrototype[method].call(this, ...arguments);}
})function updateView() {console.log('更新視圖');
}function observer(target) {if (typeof target !== 'object' || target === null) {return target;}if(Array.isArray(target)){  // 攔截數組,給數組的方法進行重寫target.__proto__ = proto;}Object.keys(target).forEach(key=>{defineReactive(target, key, target[key]);})
}function defineReactive(obj, key, value){observer(value);Object.defineProperty(obj,key,{get(){// get中會進行依賴收集return value},set(newVal){if(newVal !== value){observer(newVal);updateView();value = newVal;}}})
}// let data = { name: 'lz' ,age:{n:100} };
// observer(data);
// data.age = {n:200};
// data.age.n = 300;let data = {name:'lz', age:[1,2,3]};
observer(data);
data.age.push(4);
data.age.push(5);