在具有自己属性的对象属性上使用 getter 和 setter

Question

我对 getters 和 setter 相当陌生，我正在寻找一种方法来侦听对象中的更改以立即存储数据，而无需在每次值时都调用 Save() 函数被改变。这就是我现在的做法：

var myObject = {
    Data: {
        enabled: true,
        show: false
    },
    Save: function () {
        //store myObject.Data to local storage
    },
    Load: function () {
        //load data from local storage and assign it to myObject.Data
    },
    doSomething: function () {
        myObject.Load();
        if (myObject.Data.enabled) {
            myObject.Data.show = true;
            myObject.Save();
        }
    }

现在我想优化这段代码，所以每次 myObject.Data 中的属性改变时，都会执行 myObject.Save()。我遇到的问题是，似乎只能为只有一个值的属性定义 getter，但不能为对象本身的属性定义。

var myObj = {
    _Data: {
        a: 0,
        b: 1,
        c: 3
    },
    set Data (a) {
        console.log(a);
    }
};

myObj.Data.a = 2;

这显然是行不通的，因为 myObj.Data 不是对象并且不具有与 myObj._Data.

相同的属性

在此先感谢您的帮助。

Answer 1

我相信你正在寻找Defining a getter on existing objects using defineProperty

To append a getter to an existing object later at any time, use Object.defineProperty().
var o = { a:0 }

Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });

console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)

例如：

var Data = {
    enable: true,
    show: false
};

Object.defineProperty(Data, 'doSomething', {
    get: function() {
        // get something;
    },
    set: function(something) {
        // set something
    }
});

Answer 2

您可能对 Proxy 对象感兴趣。

我使用了一个非常简单的去抖功能callHandler，以避免在数组修改期间调用onSet方法数十次。否则，[1, 2, 3].splice(0, 1) 将对原始数组中的每个项目调用一次设置处理程序。

'use strict';
var myObject = {
    Data: {
        a: [1, 2, 3],
        b: {c: ['test']}
    },
    Save: function() {
        console.log('Save called');
    },
}

function recursiveProxy(target, onSet) {
    // For performance reasons, onSet will only be called one millesecond
    // after the set handler has last been called.
    var timeout;
    function callHandler() {
        clearTimeout(timeout);
        timeout = setTimeout(onSet, 1);
    }

    var recursiveHandler = {
        get: function(target, property) {
            // If the property is something that could contain another object,
            // we want to proxy it's properties as well.
            if (typeof target[property] == 'object' && target[property] != null) {
                return new Proxy(target[property], recursiveHandler);
            }

            return target[property];
        },
        set: function(target, property, value) {
            console.log('Set called - queueing onSet');
            callHandler();
            target[property] = value;
            return true;
        }
    }

    return new Proxy(target, recursiveHandler);
}

myObject.Data = recursiveProxy(myObject.Data, myObject.Save);

myObject.Data.a.splice(0, 1);
myObject.Data.b.c[0] = 'test 2';

在具有自己属性的对象属性上使用 getter 和 setter

Using getter and setter on an object property that has his own properties

javascript

getter-setter

在具有自己属性的对象 属性 上使用 getter 和 setter

Using getter and setter on an object property that has his own properties

javascript

getter-setter

在具有自己属性的对象属性上使用 getter 和 setter