第二十七章 数据劫持

一、现在的开发方式

1、现实中的开发，很少使用原声JS，不是因为JS不强大，主要是因为操作比较繁琐，几乎所有的公司都在使用框架，比如vue、react

2、特点：数据驱动视图。也就是数据发生变化以后，视图跟着变化

所以现在我们更加关注的是我们的数据了

二、数据劫持

1、含义：对原有数据的复刻，就是复制一份原有的数据出来，但是复刻出来的数据不允许修改，但是这个数据是从原有的数据中复刻出来的

2、语法：Object.defineProperty(给那一个对象,属性名,{配置项})

• 在配置项中包含着属性名的值
• 配置项中的内容:

=> value:该属性名对应的值

=> writable:该属性是否可以被重写(就是重新设置值)

        -> 默认是 false 不允许被重写 , 也就是只读

        -> 选填是 true 表示允许被重写 , 也就是可以被修改

=> enumerable: 表示该属性是否可以不枚举(遍历)

        -> 默认是 false 不可以枚举

        -> 选填是 true 表示可以遍历

=> get: 是一个函数 , 叫做getter获取器

        -> 可以用来获取该属性的值

        -> get属性的返回值就是这个属性的值

        -> 注意: 不能和 value 和 writable 一起使用 , 会报错
=> set: 是一个函数 , 叫做setter设置器

        -> 当你需要修改该属性值的时候 , 会触发该函数

// 设置
Object.defineProperty(obj,'age',{
    value:18,
    writable:true,
    enumerable:true,
    get () {
        // 该函数的返回值就是这个属性的值
        // 上面设置了value 和 writable 这里就不能返回了
        return 20
    },
    set (val) {
        console.log('你想要修改age的值,修改为:',val);
    }
})
console.log(obj); // 打印结果: {age: 18}
// 之后我们尝试修改
// 修改我们之前的普通设置
obj.name = 'Rose'
console.log(obj); // 没有问题可以修改
// 修改通过Object.defineProperty设置的值
obj.age = 30
console.log(obj); // 打印出来的结果还是18 , 这个时候是不允许被修改的
// 在没有书写 enumerable 之前是不可以遍历出age的 , 书写了enumerable:true 以后是可以的
for (let k in obj) {
    console.log(k);
}
// 测试get函数的返回值不能和 value 和 writable一起使用
console.log(obj)

3、数据劫持的简单封装

function observer (origin,fn) {
    // origin : 原始数据 , 也就的你给我的数据
    // fn : 我想要做的事情
    // 定义一个劫持目标
    const target = {}
    // 我们循环拿到传递进来的数据
    for (let k in origin) {
        // 开始劫持
        Object.defineProperty(target, k,{
            // 返回的数据
            get () {
                return origin[k];
            },
            set (val) {
                // 修改的是origin内的数据
                origin[k] = val
                // 修改完毕要执行一下我的功能函数
                fn(target)
            }
        })
    }
    // 初始的时候我们也要执行一下我们的功能函数
    fn(target)
    // 返回一个被劫持后的数据
    return target
}
// 获取元素
const box = document.querySelector('.box')
// 将来我们使用的时候
const app = observer({name:'Rose',age:30},result => {
    // 箭头函数中是我想要做的事情
    box.innerHTML =`我是${result.name},今年${result.age}岁了`
})
console.log(app);
// 获取元素
const inp = document.querySelector('input')
inp.oninput = () => {
    app.age = inp.value
}

4、数据劫持升级

语法：

Object.defineProperties(对象,{

哪一个属性:{配置项},

哪一个属性:{配置项},

....

}

缺点：（1） 就是只能劫持当前以前的数据

（2）如果劫持过后 , 后期动态插入的数据不好使(也就的不能再被劫持到)

// 数据劫持
const obj = {name:'Jack',age:30}
console.log('原始obj:',obj);
// 开始劫持 把obj劫持到obj身上
// 拿到obj中的所有的key
for (let k in obj) {
    // 开始劫持
    Object.defineProperties(obj,{
        // 这样操作会报错
        // 一旦 obj.name 被修改
        // 不停的获取不停的该 , 不停的该不停的获取
        // 就会造成栈溢出
        // name:{
        //     get () {
        //         return obj.name
        //     }
        // }
        // 步骤1: 我们需要复制一份属性出来(也就是备份一份)
        // 这里需要拼接一个变量出来
        // 假设:之前的属性是name , 我们复制出来的属性叫做:_name
        // 语法: ['_' + 属性名] : {}
        ['_' + k] : {
            value: obj[k],
            writable: true 
        },
        // 步骤2: 正式开始劫持(劫持的是我们备份的)
        [k] : {
            get () {
                return this['_' + k]
            },
            set (val) {
                this['_' + k] = val
                // 渲染页面操作
                console.log('你尝试修改 ' + k + ' 属性, 你要修改为 : ', val)
            }
        }
    })
}
console.log('劫持后obj',obj);
// 尝试修改
obj.age = 66

三、数据代理

1、这个行为也是一个劫持行为，是 ES6 提供的语法 , 是一个内置构造函数，但是在社区里大家还是都叫数据劫持

2、语法：const 变量名 = new Proxy(要代理的原始对象,{ 配置项 })

3、返回值: 一个实例对象 , 就是代理结果数据

// 定义一个对象
const obj = {name: 'Jack', age:25} 
// 开始代理
const result = new Proxy(obj, {
    // 配置get来进行代理设置
    get (target,property) {
        // target:就是你要代理的目标对象 , 我们这个案例中就是obj
        // prototype: 是该对象内的每一个属性 , 自动遍历
        return target[prototype]
    },
    // 配置set来进行修改
    set (target,property,val) {
        // target: 就是你要代理的目标对象
        // prototype: 就是对象内你要修改的那个属性
        // val: 就是你要修改的那个属性的值
        target[prototype] = val
        console.log('你尝试修改'+ prototype + '属性,想要修改为:'+ val + ',我要根据你修改的内容渲染页面');
        // 注意: 简单代理需要返回 true 让程序正常执行
        return true 
    }
})
console.log('原始数据:',obj);
console.log('代理数据:',result);
console.log('代理结果 name:',result.name);
        
// 尝试修改
result.name = 'Rose'
console.log('代理结果 name:',result.name);
        
// 动态插入数据
result.gender = '男'