数据劫持详解(JavaScript)

什么是数据劫持？

定义

数据劫持，其实就是数据代理。
数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。

Demo

使用Object.defineProperty实现数据劫持

代码如下

var obj={};
var age;
/**Object.defineProperty() 方法会直接在一个对象上定义一个新属性
，或者修改一个对象的现有属性，并返回此对象。形参1即为对象，形参2为属性名（注:这种行为也被称之为数据劫持）
**/
/**
 * 数据劫持概念
数据劫持，其实就是数据代理。
数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。 
 */
Object.defineProperty(obj,'age',{
    get:function(){
        console.log('get age ...');
        return age;
    },
    set:function(val){
        console.log('set age ...');
        age=val;
    }
})
obj.age=100 //set age ... 调用set函数
console.log(obj.age) //get age ... ,100 调用get函数

使用Proxy实现数据劫持

代码如下

const dinner={
    meal:'tacos'
}
const handler={
   //Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。
   //arguments为函数参数
    get(target,prop){
       console.log('get...',prop);
       //Reflect.get函数，作用为获取对象身上某个属性的值，类似于target[name]
       return Reflect.get(...arguments);
    },
    set(target,key,value)
    {
        console.log('set...',key,value);
        //Reflect.set函数，作用为将值分配给属性的函数，返回一个Boolean,如果更新成功，则返回true
        return Reflect.set(...arguments);
    }

}
//Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义(如属性查找,赋值，枚举，函数调用等)
//Proxy对象接收两个形参，第一个形参为劫持的目标对象，第二个形参为处理函数
const proxy=new Proxy(dinner,handler);
console.log(proxy.meal);