跨浏览器的 Getter 和 Setter

Question

这在现代 Chrome/Firefox/Opera 中有效，但在 IE8 中失败。 IE9没试过。我怎样才能使这个跨浏览器兼容，包括IE7+？ （在这里小提琴。）

var foo = { 
    get test(){ return 'Works'; } 
};

// foo.test should be 'Works'

我已经看到了 __defineGetter__ 的一些用法，但这引发了“无法识别的方法” ' IE8 中的错误。

Answer 1

这是 IE6/7/8 的解决方法。我进行了测试，效果非常好！

更新：链接已损坏，您可以在此处查看我的测试代码：

    // Super amazing, cross browser property function, based on http://thewikies.com/
function addProperty(obj, name, onGet, onSet) {

    // wrapper functions
    var
        oldValue = obj[name],
        getFn = function () {
            return onGet.apply(obj, [oldValue]);
        },
        setFn = function (newValue) {
            return oldValue = onSet.apply(obj, [newValue]);
        };

    // Modern browsers, IE9+, and IE8 (must be a DOM object),
    if (Object.defineProperty) {

        Object.defineProperty(obj, name, {
            get: getFn,
            set: setFn
        });

    // Older Mozilla
    } else if (obj.__defineGetter__) {

        obj.__defineGetter__(name, getFn);
        obj.__defineSetter__(name, setFn);

    // IE6-7
    // must be a real DOM object (to have attachEvent) and must be attached to document (for onpropertychange to fire)
    } else {

        var onPropertyChange = function (e) {

            if (event.propertyName == name) {
                // temporarily remove the event so it doesn't fire again and create a loop
                obj.detachEvent("onpropertychange", onPropertyChange);

                // get the changed value, run it through the set function
                var newValue = setFn(obj[name]);

                // restore the get function
                obj[name] = getFn;
                obj[name].toString = getFn;

                // restore the event
                obj.attachEvent("onpropertychange", onPropertyChange);
            }
        };  

        obj[name] = getFn;
        obj[name].toString = getFn;

        obj.attachEvent("onpropertychange", onPropertyChange);

    }
}

Answer 2

我不相信你可以。

在 IE8 及更低版本中，属性访问仅仅是属性访问。如果不显式调用函数，则无法运行函数代码。

我认为在 IE8 中你也许可以使用 DOM 元素，但我不相信它适用于常规的本机对象。

Answer 3

有一个“definePropery”方法，本质上允许您在对象上创建访问器方法（getter/setter），而无需调用像 setProp() / getProp() 这样的函数调用。

语法有点奇怪，但我已经能够让它在 Firefox、Chrome、Safari 和 IE9 上运行。

假设我有一个名为“Person”的 JavaScript 对象。

function Person()
{
 // set a default value //
    this.__name = 'John';
 // add getter & setter methods //
    Object.defineProperty(this, "name", {
        get: function() {
        // additional getter logic
            return this.__name;
        },
        set: function(val) {
            this.__name = val;
        // additional setter logic
        }
    });
}

var p = new Person();
console.log(p.name); // 'John'
p.name = 'Stephen';
console.log(p.name); // 'Stephen'

有关 Mozilla 网站的更多信息此处。

Answer 4

不能，未实现该语法的浏览器不支持该语法。您需要相当长的一段时间才能使用该语法而不会出现 CBC 问题。值得庆幸的是，IE6 在北美几乎已经消亡了。