对象 get set defineProperty Proxy

200 阅读1分钟

1. get set

    <script>
        let obj = {
            _name: "lily",
            get name() {
                return "name:" + this._name
            },
            set name(v) {
                if (v != this._name) {
                    console.log("重命名:", v);
                    this._name = v
                }
            }
        }
        document.write(obj.name)
        //lily
        obj.name="leo"
        document.write(obj.name)
        //leo
    </script>

2. defineProperty

不支持IE8及以下浏览器。
Object.defineProperty可以对对象的属性进行劫持。

    <script>
        let obj = {
            name: 'lily'
        }
        // configurable 属性为true(默认),可以删除对象属性,改为false不可删除
        // writable:false 只读,不可修改
        Object.defineProperty(obj, "name", {
            configurable: false,
            writable: false,
            value: "leo"
            // 使用了writable: false, value:"leo",就不要使用get,set
        })
        delete obj.name
        document.write(obj.name)
        //仍可显示lily

        let obj2 = {
            name: 'grace',
            age: 10
        }
        Object.defineProperties(obj2, {
            name: {
                enumerable: false
                // 不可通过for in 循环访问属性
            }
        })
        for (var key in obj2) {
            document.write(obj2[key])
        }
        // 页面只显示10
    </script>

3. Proxy

Proxy 可以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理。它不直接操作对象,而是像代理模式,通过对象的代理对象进行操作,在进行这些操作时,可以添加一些需要的额外操作。 基本用法: 一个 Proxy 对象由两个部分组成: target 、 handler 。在通过 Proxy 构造函数生成实例对象时,需要提供这两个参数。 target(第一个参数) 即目标对象, handler (第二个参数)是一个对象,声明了代理 target 的指定行为。

    <script>
        let stu = {
            name: 'Leo',
            no: 1234,
            sex: '男'
        }
        let stu2 = {
            get(obj, key) {
                if (key == 'no') {
                    return obj.name + '的学号是' + obj[key]
                } else if (key == 'sex') {
                    return obj.name + '的性别是' + obj[key]
                }
            },
            set(obj, key, val) {
                if (key == 'sex' && val != '男') {
                    console.log(obj.name + '的性别只能是男');
                }
                else {
                    obj[key] = val
                }
            }
        }
        let proxy2 = new Proxy(stu, stu2)
        document.write(proxy2.no)
        document.write(proxy2.sex)
        proxy2.sex = '女'
        //不可修改
        proxy2.no = 1122
        //可以修改
        console.log(proxy2);
    </script>