跨浏览器的Getter和Setter

7 浏览
0 Comments

跨浏览器的Getter和Setter

这在现代的Chrome/Firefox/Opera上可以工作,但在IE8上失败了。我还没有在IE9上尝试过。如何使这个在所有浏览器中兼容,包括IE7+?(这里是Fiddle。)

var foo = { 
    get test(){ return 'Works'; } 
};
// foo.test应该是'Works'

我看到一些使用__defineGetter__的用法,但在IE8中抛出了一个'未识别的方法'错误。

0
0 Comments

在不同的浏览器中创建对象的getter和setter方法存在兼容性问题,即在某些浏览器中无法正确使用这些方法。这个问题的出现是因为不同的浏览器对于JavaScript对象的属性操作方法存在差异。为了解决这个问题,可以使用"defineProperty"方法来创建对象的getter和setter方法,这样就不需要像调用setProp() / getProp()这样的函数调用。

以上代码展示了如何使用"defineProperty"方法来创建对象的getter和setter方法。首先定义了一个JavaScript对象"Person",并给它设置了一个默认值为'John'的属性"__name"。然后使用"defineProperty"方法给对象添加了名为"name"的属性,其中定义了它的getter和setter方法。在getter方法中,可以添加一些额外的逻辑来获取属性的值;在setter方法中,可以添加一些额外的逻辑来设置属性的值。

通过以上的代码,可以在不同的浏览器中正确地使用getter和setter方法。在创建了"Person"对象之后,可以通过"p.name"来获取属性的值并输出到控制台上,然后通过"p.name = 'Stephen'"来设置属性的值为'Stephen',再次输出到控制台上。

更多关于"defineProperty"方法的信息可以在Mozilla的官方网站上找到,链接在这里:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/defineProperty

0
0 Comments

跨浏览器的Getter和Setter问题的出现主要是因为不同浏览器对于属性的获取和设置方法有不同的实现。为了解决这个问题,可以使用下面的解决方法:

// 超级强大的跨浏览器属性函数,基于http://thewikies.com/
function addProperty(obj, name, onGet, onSet) {
    // 包装函数
    var
        oldValue = obj[name],
        getFn = function () {
            return onGet.apply(obj, [oldValue]);
        },
        setFn = function (newValue) {
            return oldValue = onSet.apply(obj, [newValue]);
        };
    // 现代浏览器,IE9+,以及IE8(必须是DOM对象)
    if (Object.defineProperty) {
        Object.defineProperty(obj, name, {
            get: getFn,
            set: setFn
        });
    // 旧版本Mozilla
    } else if (obj.__defineGetter__) {
        obj.__defineGetter__(name, getFn);
        obj.__defineSetter__(name, setFn);
    // IE6-7
    // 必须是真正的DOM对象(具有attachEvent),并且必须连接到文档(以便触发onpropertychange)
    } else {
        var onPropertyChange = function (e) {
            if (event.propertyName == name) {
                // 暂时删除事件,以防止再次触发并创建循环
                obj.detachEvent("onpropertychange", onPropertyChange);
                // 获取更改后的值,通过set函数处理
                var newValue = setFn(obj[name]);
                // 恢复get函数
                obj[name] = getFn;
                obj[name].toString = getFn;
                // 恢复事件
                obj.attachEvent("onpropertychange", onPropertyChange);
            }
        };  
        obj[name] = getFn;
        obj[name].toString = getFn;
        obj.attachEvent("onpropertychange", onPropertyChange);
    }
}

这段代码提供了一个函数`addProperty`,它可以在不同浏览器上添加跨浏览器的Getter和Setter。它通过检测浏览器是否支持`Object.defineProperty`来确定使用哪种方法来定义属性的Getter和Setter。如果浏览器支持`Object.defineProperty`,就直接使用该方法来定义属性的Getter和Setter;如果浏览器不支持`Object.defineProperty`,就使用`__defineGetter__`和`__defineSetter__`来定义属性的Getter和Setter;如果浏览器是IE6-7,就使用`attachEvent`和`onpropertychange`来实现属性的Getter和Setter。

这个解决方法可以解决不同浏览器对于属性的Getter和Setter的实现差异,使得开发者可以跨浏览器地定义和使用属性的Getter和Setter。

0
0 Comments

《跨浏览器的Getter和Setter》问题出现的原因是在IE8及更低版本中,属性访问只是简单的属性访问,没有办法在不显式调用函数的情况下运行函数代码。在IE8中,可能可以在DOM元素上实现,但我不认为对于常规本地对象有效。

解决方法如下:

1. 使用Object.defineProperty()方法来定义Getter和Setter:

var obj = {};
Object.defineProperty(obj, 'property', {
    get: function() {
        // Getter code
    },
    set: function(value) {
        // Setter code
    }
});

2. 使用函数来模拟Getter和Setter的行为:

var obj = {};
function getProperty() {
    // Getter code
}
function setProperty(value) {
    // Setter code
}
obj.__defineGetter__('property', getProperty);
obj.__defineSetter__('property', setProperty);

以上是解决跨浏览器的Getter和Setter问题的两种方法。通过使用Object.defineProperty()方法或者使用函数来模拟Getter和Setter的行为,我们可以在不同浏览器中实现跨浏览器的Getter和Setter功能。

0