基于 Proxy 的数据代理_get(target,key)

先上代码

//首先定义对象
let data = {
    name: "mt",
    age: 8,
    price: 9000
}

//  let proxy = new Proxy(target, handler);
//	target 是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
//	handler 是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。

let proxyData = new Proxy(data,{
	// 方法用来处理获取数据时的劫持行为
    get(target,key){
        if(key == "price"){
            return target[key]*.9;
        }
        return target[key];
    },
    // 方法用来处理设置数据时的劫持行为
    set(target,key,newVal){ 
        target[key] = newVal;
    },

});
console.log(proxyData);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

基于 Proxy 的数据代理

let proxy = new Proxy(target, handler);

• target 是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
• handler 是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。

handler 对象的方法

get(target,key[,receiver])

get 方法用来处理获取数据时的劫持行为

set(target,key,newValue[,receiver])

set 方法用来处理设置数据时的劫持行为

has(target,key)

has 方法用来处理在判断是否有该属性时的劫持行为
return true 存在该属性，false 不存在该属性

apply(target, thisArg, argumentsList)

apply 方法用来代理函数的执行，要求 target 必须是一个函数

construct(target, argumentsList)

construct 方法用于拦截 new 操作符.

defineProperty(target, property, descriptor)

defineProperty 方法用于拦截 defineProperty 操作
return Object.defineProperty

deleteProperty(target, property)

deleteProperty 用于拦截对象属性的删除操作

getOwnPropertyDescriptor(obj, key)

getOwnPropertyDescriptor 方法用于拦截 getOwnPropertyDescriptor 操作
getOwnPropertyDescriptor 必须返回一个 object 或 undefined

Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符

getPrototypeOf(target)

getPrototypeOf 用于拦截对象调用 getPrototypeOf 方法

Object.getPrototypeOf 查找对象的原型方法

setPrototypeOf(target,prototype)

setPrototypeOf 方法主要用来拦截 Object.setPrototypeOf().

Object.setPrototypeOf 设置对象的原型方法

isExtensible(target)

isExtensible 用于拦截对象的isExtensible方法

不可扩展对象

- Object.preventExtensions(obj) 阻止对象扩展
- Object.freeze(obj) 冻结对象
- Object.isExtensible() 判断对象是否可以扩展
1
2
3

preventExtensions(target)

preventExtensions 用于拦截 Object.preventExtensions

ownKeys(target)

ownKeys 会拦截一下操作：
Object.keys()

最后vue3中的源码就是利用Proxy 实现数据响应式的