Object.defineProperty是如何劫持get set 并且是如何深度监听、如何监听原生数组方法

最新推荐文章于 2025-07-07 01:45:31 发布

原创

最新推荐文章于 2025-07-07 01:45:31 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

对象的属性分为：数据属性和访问器属性。如果要修改对象的默认特性，必须使用Object.defineProperty方法，它接收三个参数：属性所在的对象、属性的名字、一个描述符对象。那么接下来先看看他如何深度监听原生数组的~~~~~~

observer

//先准备数据
const data = {
    name: 'zhangsan',
    age: 20,
    info: {
        address: '北京' // 需要深度监听
    },
    nums: [10, 20, 30]
}

其中的info需要深度监听其次定义一个方法，这个方法判断了这个不是对象或数组然后重新定义各个属性（for in 也可以遍历数组）

function observer(target) {
   
   
    if (typeof target !== 'object' || target === null) {
   
   
        // 不是对象或数组
        return target
    }

    // 污染全局的 Array 原型
    // Array.prototype.push = function () {
   
   
    //     updateView()
    //     ...
    // }

    if (Array.isArray(target)) {
   
   
        target.__proto__ = arrProto
    }

    // 重新定义各个属性（for in 也可以遍历数组）
    for (let key in target) {
   
   
        defineReactive(target, key, target[key])
    }
}

其次重新定义属性监听起来并且运用到了刚刚封装的监听方法和核心API（注意，value 一直在闭包中，value =newValue此处设置完之后，再 get 时也是会获取最新的值）

function defineReactive(target, key, value) {
   
   
    // 深度监听
    observer(value)

    // 核心 API
    Object.defineProperty(target, key, {
   
   
        get() {
   
   
            return value
        },
        set(newValue) {

最低0.47元/天解锁文章