IE8中的JavaScript getter支持

Question

看看这段代码.这是一个非常简单的JavaScript对象,它使用Module Pattern实现(你可以看到这个小提琴地址的实例)

var human = function() {
    var _firstName = '';
    var _lastName = ''
    return {
        get firstName() {
            return _firstName;
        }, get lastName() {
            return _lastName;
        }, set firstName(name) {
            _firstName = name;
        }, set lastName(name) {
            _lastName = name;
        }, get fullName() {
            return _firstName + ' ' + _lastName;
        }
    }
}();
human.firstName = 'Saeed';
human.lastName = 'Neamati';
alert(human.fullName);

但是,IE8不支持JavaScript get和set关键字.您可以测试它并查看MDN.

我该怎么做才能使这个脚本与IE8兼容？

Answer 1

我该怎么做才能使这个脚本与IE8兼容？

完全改变它.例如,不使用访问器属性,而是使用常规属性和函数的组合:

human.firstName = 'Saeed';
human.lastName  = 'Neamati';
alert(human.getFullName());

其他人建议在IE中使用DOM对象并使用添加属性Object.defineProperty().虽然它可能有用,但我强烈推荐这种方法有几个原因,例如你编写的代码可能在所有浏览器中都不兼容:

var human = document.createElement('div');
Object.defineProperty(human, 'firstName', { ... });
Object.defineProperty(human, 'lastName',  { ... });
Object.defineProperty(human, 'children',  { value: 2 });

alert(human.children);
//-> "[object HTMLCollection]", not 2

这至少对Chrome来说是如此.无论哪种方式,编写适用于您想要支持的所有浏览器的代码都更安全,更容易.您编写代码以利用getter和setter所获得的任何便利都会因您专门针对Internet Explorer 8编写的额外代码而丢失.

这是当然,除了在性能上的降低,事实上,你将无法使用for...in对象上环和潜在的混乱,当你使用,你以为你定义但在预先存在的属性随后DOM对象.

Answer 2

你不能(安迪回答)

最接近的选择是

var human = function() {
    var _firstName = '';
    var _lastName = '';

    return {
        firstName: function() {
            if (arguments.length === 1) {
                _firstName = arguments[0];
            }
            else {
                return _firstName;
            }
        },
        lastName: function() {
            if (arguments.length === 1) {
                _lastName = arguments[0];
            }
            else {
                return _lastName;
            }
        },
        fullName: function() {
            return _firstName + ' ' + _lastName;
        }
    };
}();

human.firstName('Saeed');
human.lastName('Neamati');

alert(human.fullName());

演示http://jsfiddle.net/gaby/WYjqB/2/

Answer 3

IE8支持DOM节点上的getter和setter,所以如果你真的想拥有getter和setter,你可以这样做:

var objectForIe8 = $("<div></div>")[0];    
Object.defineProperty(objectForIe8, "querySelector", {
    get: function() {
        return this.name;
    },
    set: function(val) {
        this.name = val+", buddy";  
    }
});
// notice you can overwrite dom properties when you want to use that property name
objectForIe8.querySelector = "I'm not your guy"; 

alert(objectForIe8.querySelector);

请注意,这会给您带来一些重要的性能影响,因此如果您需要创建数千个此类对象,我将不会使用此技术.但如果你不担心这个特定物体的表现,它会让你感到震惊.如果你不关心ie8性能,并且只是想让它工作,那么只使用ie8技术,你就是金色的:)