IE8 中的 JavaScript getter 支持

Question

查看此代码。这是一个非常简单的 JavaScript 对象，使用 Module Pattern 实现（您可以在 this fiddle address 看到实时示例）

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

你不能（as Andy answered）

最接近的选择是

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

查看http://robertnyman.com/2009/05/28/getters-and-setters-with-javascript-code-samples-and-demos/

扩展对象的未来和 ECMAScript 标准化方式 各种方式都是通过Object.defineProperty。这是如何 Internet Explorer 选择实现 getter 和 setter，但它是 不幸的是，目前仅在 Internet Explorer 8 中可用，在 任何其他网络浏览器。此外，IE 8 仅在 DOM 节点上支持它，但 未来的版本计划在 JavaScript 对象上支持它 嗯。

您可以在同一站点http://robertnyman.com/javascript/javascript-getters-setters.html#object-defineproperty找到测试用例

Object.defineProperty(document.body, "description", {
    get : function () {
        return this.desc;
    },
    set : function (val) {
        this.desc = val;
    }
});
document.body.description = "Content container";

结果：

document.body.description = "Content container"

Answer 4

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 上使用这种技术，你就是金子：)