Proxy和Object.defineProperty实现简单的数据绑定Object.defineProperty()

简单实现数据绑定

Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

备注：应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。

语法

Object.defineProperty(obj, prop, descriptor)

参数

obj

要定义属性的对象。

prop

要定义或修改的属性的名称或 Symbol 。

descriptor

要定义或修改的属性描述符

简单实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Object.defineProperty简单实现数据绑定</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <input type="text" id="model">
    <p id="word"></p>
</body>
</html>
<script>
let obj = {}
let model = document.getElementById('model')
let word = document.getElementById('word')
Object.defineProperty(obj, 'txt', {
	get () {
		return obj
	},
	set (newVal) {
		model.value = newVal
		word.textContent = newVal
	}
})
model.addEventListener('keyup', (e) => {
	obj.txt = e.target.value
})
</script>

Proxy

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。

语法

const p = new Proxy(target, handler)

参数

target

要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler

一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

简单实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Proxy简单实现数据绑定</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <input type="text" id="model2">
    <p id="word2"></p>
</body>
</html>
<script>
let obj = {}
let model2 = document.getElementById('model2')
let word2 = document.getElementById('word2')
let newProxy = new Proxy(obj, {
    get (target, property, receiver) {
        return 
    },
    set (target, property, value, receiver) {
        if (property === 'txt') {
            model2.value = value
            word2.textContent = value
        }
        return
    }
})
model2.addEventListener('keyup', (e) => {
	newProxy.txt = e.target.value
})
</script>

handler.get() 方法用于拦截对象的读取属性操作。

语法

var p = new Proxy(target, {
  	get: function(target, property, receiver) {
  	}
});

参数

target 目标对象。 property 被获取的属性名。 receiver Proxy或者继承Proxy的对象

handler.set()方法是设置属性值操作的捕获器。

语法

const p = new Proxy(target, {
  	set: function(target, property, value, receiver) {
  	}
});

参数

target 目标对象。 property 将被设置的属性名或 Symbol。 value 新属性值。 receiver 最初被调用的对象。通常是 proxy 本身，但 handler 的 set 方法也有可能在原型链上，或以其他方式被间接地调用（因此不一定是 proxy 本身）。