美文网首页
Object.defineProperty 与 Proxy的基本

Object.defineProperty 与 Proxy的基本

作者: 奋斗_登 | 来源:发表于2021-05-23 13:01 被阅读0次

Vue2.x 是使用 Object.defindProperty(),来进行对对象的监听的。Vue3.x 版本之后就改用Proxy进行实现的。它们可以理解为在目标对象前架设一“拦截”层,外界对该对象的访问都必须先通过这层拦截,因此提供一种机制,可以对外界的访问进行过滤和改写。本文章对这两种方式做一些简单使用介绍 ,后续会进行更深入的分析介绍。

Object.defineProperty的基本使用

基本语法

Object.defineProperty(obj, prop, descriptor);
  • obj: 可以理解为目标对象。
  • prop: 目标对象的属性名。
  • descriptor: 对属性的描述。它是由两部分组成,分别是:数据描述符和访问器描述符,数据描述符的含义是:它是一个包含属性的值,并说明这个属性值是可读或不可读的对象。访问器描述符的含义是:包含该属性的一对 getter/setter方法的对象
    示例:
Object.defineProperty(obj, 'name', {
  'value': 'jack',
  'writable': true,
  'enumerable': true,
  'configurable': true
});

直接上代码实现一个基本的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定Object.defineProperty</title>
</head>
<body>
<h2>双向绑定Object.defineProperty</h2>
<div>
    <input id="txt1" type="text"/>
    <p id="p1"></p>
</div>
<script>
    const obj = {};
    Object.defineProperty(obj, "name", {
        set: function (value) {
            document.getElementById('txt1').value = value;
            document.getElementById('p1').innerText = value;
        }
    })
    document.getElementById('txt1').oninput = function (e) {
        obj.name = e.target.value;
    }
</script>
</body>
</html>
  • 注意:此 对数组的监听无效,后续再写具体的分析。

Proxy的基本使用j

基本语法

var proxy = new Proxy(target,handler)

Proxy对象的所有写法都是上面这种形式,不同的只是handler参数写法,其中new Proxy()表示一个Proxy实例,target参数表示要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。
eg:

var proxy = new Proxy({},{
   get:function(target,property){
      return 35;
   }
})
//proxy.title 35
//proxy.name 35
//proxy.time 35

可以看到,由于拦截函数总是返回35,所以访问任何属性都将得到35.
以下是proxy实现的简单双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>Proxy Reflect</h2>
<div>
    <input id="txt1" type="text"/>
    <p id="p1"></p>
</div>
</body>
<script>
    var obj = new Proxy({}, {
        get: function (target, key, receiver) {
            console.log(`getting ${key}!`);
            return Reflect.get(target, key, receiver)
        },
        set: function (target, key, value, receiver) {
            console.log(`setting ${key}:${value}`);
            if (key === 'name') {
                document.getElementById('txt1').value = value;
                document.getElementById('p1').innerText = value;
            }
            return Reflect.set(target, key, value, receiver)
        }
    })
    obj.num = 1;
    obj.num++;
    document.getElementById('txt1').oninput = function (e) {
        obj.name = e.target.value;
    }
</script>
</html>

相关文章

网友评论

      本文标题:Object.defineProperty 与 Proxy的基本

      本文链接:https://www.haomeiwen.com/subject/axaajltx.html