Object.defineProperty与Proxy的区别

最新推荐文章于 2024-01-04 21:53:57 发布

范范_

最新推荐文章于 2024-01-04 21:53:57 发布

阅读量708

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_40853132/article/details/123087780

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Reflect

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy的方法相同。更多详情请点击 Reflect

Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。更多详情请点击 Proxy

const newProxy = new Proxy(target, handler)

target：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>标题</title>
</head>
<body>
  <h2>使用Proxy和Reflect实现双向绑定</h2>
  <input type="text" id="input" />
  <p id="p"></p>

  <script>
    var input = document.getElementById("input")
    var p = document.getElementById("p")
    var obj = {}
    let newProxy = new Proxy(obj, {
      get: function (target, key, receiver) {
        return Reflect.get(target, key, receiver)
      },
      // target操作对象，key对象属性名，value设置的属性值
      // receiver(可选)可以理解为上下文this对象。如果我们在设置值的时候遇到setter函数，该参数就指向与setter中上下文this对象
      set: function (target, key, value, receiver) {
        // 当input输入123时，打印：{name: '12'} 'name' '123' Proxy {name: '12'}
        console.log(target, key, value, receiver) 
        
        // 给p标签赋值
        p.innerHTML = value
        return Reflect.set(target, key, value, receiver)
      },
    })

    // 监听input标签的input事件，给newProxy的name属性赋值
    input.addEventListener('input', (e) => {
      newProxy.name = e.target.value
    })
  </script>
</body>
</html>

Object.defineProperty与Proxy的区别

Object.defineProperty无法一次性监听所有属性，要通过Object.keys进行循环遍历，Proxy不需要，直接可以监听所有属性。
Object.defineProperty无法监听新增的属性，vue针对这个问题用了vue.set(obj, ‘name’, ‘小明’)。
Object.defineProperty可以监听数组的变化，但对数组的变化无法做出响应；对新增加的数组项，无法监听；如果想要对数组的push,shift,pop等方法进行监听，vue和Mobx中都是通过重写原型链来实现的，在定义变量的时候，判断是否为数组，如果是数组，就修改它的proto。

提问：Object.defineProperty对新增加的数组项，无法监听，如果没有Proxy该怎么做？

答：使用MobX库。

MobX 是一个库，它通过透明的函数响应式编程使得状态管理变得简单和可扩展。
可以使用 observable.array(values) 或者将数组传给 observable，可以将数组转变为可观察的。
mobx默认将数组长度设为1000，监听0-999的变化

import {observable, autorun} from "mobx";
var todos = observable([
    { title: "Spoil tea", completed: true },
    { title: "Make coffee", completed: false }
]);
autorun(() => {
	console.log("Remaining:", todos
	   .filter(todo => !todo.completed)
	   .map(todo => todo.title)
	   .join(", ")
	);
});
// 输出: 'Remaining: Make coffee'
todos[0].completed = false;
// 输出: 'Remaining: Spoil tea, Make coffee'
todos[2] = { title: 'Take a nap', completed: false };
// 输出: 'Remaining: Spoil tea, Make coffee, Take a nap'
todos.shift();
// 输出: 'Remaining: Make coffee, Take a nap'