面试题：JavaScript 函数方法创新实践之专家难度：基于函数代理的可观察对象

Question

利用JavaScript的 `Proxy` 和函数特性，创建一个可观察对象 `observable`。该对象接收一个初始数据对象，返回一个代理对象。代理对象上的所有属性访问和修改操作都应该通过函数方法进行监听。例如，可以添加一个 `subscribe` 方法，接收一个回调函数，当代理对象的任何属性发生变化时，回调函数会被触发，并且回调函数能接收到变化的属性名和新的值。同时要处理嵌套对象的属性变化监听。

Answer 1

function observable(data) {
    const subscribers = [];

    function subscribe(callback) {
        subscribers.push(callback);
        return () => {
            const index = subscribers.indexOf(callback);
            if (index !== -1) {
                subscribers.splice(index, 1);
            }
        };
    }

    function notify(property, value) {
        subscribers.forEach(callback => callback(property, value));
    }

    const handler = {
        get(target, prop) {
            if (prop ==='subscribe') {
                return subscribe;
            }
            const value = target[prop];
            if (typeof value === 'object' && value!== null) {
                return observable(value);
            }
            return value;
        },
        set(target, prop, value) {
            const oldValue = target[prop];
            target[prop] = value;
            if (oldValue!== value) {
                notify(prop, value);
            }
            return true;
        }
    };

    return new Proxy(data, handler);
}

你可以使用以下方式测试这个函数：

const myData = {
    name: 'John',
    age: 30,
    address: {
        city: 'New York'
    }
};

const myObservable = observable(myData);

const unsubscribe = myObservable.subscribe((prop, value) => {
    console.log(`${prop} has changed to ${value}`);
});

myObservable.name = 'Jane';
myObservable.address.city = 'Los Angeles';

unsubscribe();