zoukankan      html  css  js  c++  java
  • Object.defineProperty 和 Proxy 区别

    bject.defineproperty 用于 监听 对象的数据变化  
     
    用法 Object.defineproperty(obj, key, descriptor)
     
    例如: 
     
    let obj = {
        age: 11
    }
     
    let val = 1
     
    Object.defineproperty(obj, 'name', {
        get() {
            return val
        },
        set(newVal) {
            val = newVal
        }
    })
     
    obj.name
     
    obj.name = 11
     
    此外 还有以下配置项 : 
    1. configurable
    2. enumerable
    3. value
     
    缺点: 
    1.无法监听数组变化
    2.只能劫持对象的属性,属性值也是对象那么需要深度遍历
     
    ----------------------------------------------
     
    proxy  可以理解为 在被劫持的对象之前 加了一层拦截 
     
    例如: 
     
    let proxy = new Proxy({}, {
        get(obj, prop) {
            return obj[prop]
        },
        set(obj, prop, val) {
            obj[prop] = val
        }
    })
     
    proxy返回的是一个新对象, 可以通过操作返回的新的对象打到目的 
    proxy有多达13种拦截方法,
    get() , set() , apply() , has() , contruct() ps: 用于拦截new操作, 
    deleteProperty() , defineproperty() , enumerate() , getOwnPropertyDescriptor() ,
    getPrototypeOf() , isExtensible() , ownKeys() , preventExtensions() , setPrototypeOf() , 
     
     
    当使用 defineProperty 时,我们修改原来的 obj 对象就可以触发拦截

    参考网站:https://blog.csdn.net/qq_42833001/article/details/83302149

  • 相关阅读:
    Javascript 中的浮点数精度丢失问题
    react中使用字符串中生成HTML
    前端-HTML规范
    js 数组(Array)的使用
    ES6变量声明解析
    cookies sessionlStorage和localStroage的区别
    面向对象
    迭代器、生成器、装饰器
    内置函数和文件读取
    函数
  • 原文地址:https://www.cnblogs.com/shj-com/p/13644365.html
Copyright © 2011-2022 走看看