IE8 中的 JavaScript getter 支持
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7791267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript getter support in IE8
提问by Saeed Neamati
Check out this code. This is a very simple JavaScript object which is implemented using Module Pattern(and you can see the live example at this fiddle address)
看看这个代码。这是一个非常简单的 JavaScript 对象，它使用Module Pattern实现（您可以在这个 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);
However, IE8 doesn't support JavaScript getand setkeywords. You can both test it and see MDN.
但是，IE8 不支持 JavaScriptget和set关键字。您可以测试它并查看MDN。
What should I do to make this script compatible with IE8 too?
我应该怎么做才能使这个脚本也与 IE8 兼容？
回答by Andy E
What should I do to make this script compatible with IE8 too?
我应该怎么做才能使这个脚本也与 IE8 兼容？
Change it completely. For example, instead of using accessor properties, use a combination of normal properties and functions:
彻底改变它。例如，不要使用访问器属性，而是使用普通属性和函数的组合：
human.firstName = 'Saeed';
human.lastName = 'Neamati';
alert(human.getFullName());
Somebody else suggested using a DOM object in IE and adding the properties using Object.defineProperty(). While it may work, I'd highly recommend against this approach for several reasons, an example being that the code you write may not be compatible in all browsers:
其他人建议在 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
This is true of at least Chrome. Either way it's safer and easier to write code that works across all the browsers you want to support. Any convenience you gain from being able to write code to take advantage of getters and setters has been lost on the extra code you wrote specifically targeting Internet Explorer 8.
至少 Chrome 是这样。无论哪种方式，编写适用于您想要支持的所有浏览器的代码都更安全、更容易。您从编写代码以利用 getter 和 setter 中获得的任何便利都已丢失在您专门针对 Internet Explorer 8 编写的额外代码中。
This is, of course, in addition to the reduction in performance, the fact that you will not be able to use a for...inloop on the object and the potential confusion ensuing when you use a property you thought you defined but was pre-existing on the DOM object.
当然，除了性能降低之外，您将无法for...in在对象上使用循环，并且当您使用您认为已定义但预先存在于对象上的属性时，潜在的混乱随之而来。 DOM 对象。
回答by Gabriele Petrioli
You cannot (as Andy answered)
你不能（正如安迪回答的那样）
The closest alternative would be
最接近的选择是
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());
回答by B T
IE8 supports getters and setters on DOM nodes, so if you really want to have getters and setters, you can do this:
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);
Note this gives you a somewhat significant performance hit, so I wouldn't use this technique if you need to create thousands of objects like this. But if you're not worried about performance of this particular object, it'll tide you over. And if you couldn't care less about ie8 performance, and just want it to work, use this technique for ie8 only and you're golden : )
请注意，这会给您带来一些显着的性能损失，因此如果您需要像这样创建数千个对象，我不会使用这种技术。但是如果你不担心这个特定对象的性能，它会让你渡过难关。如果你不太关心 ie8 的性能，只是想让它工作，那么只对 ie8 使用这种技术，你就是金子:)
回答by Bob Yang
Check it on http://robertnyman.com/2009/05/28/getters-and-setters-with-javascript-code-samples-and-demos/
检查http://robertnyman.com/2009/05/28/getters-and-setters-with-javascript-code-samples-and-demos/
The future, and ECMAScript standardized way, of extending objects in all sorts of ways is through Object.defineProperty. This is how Internet Explorer chose to implement getters and setters, but it is unfortunately so far only available in Internet Explorer 8, and not in any other web browser. Also, IE 8 only supports it on DOM nodes, but future versions are planned to support it on JavaScript objects as well.
以各种方式扩展对象的未来和 ECMAScript 标准化方式是通过 Object.defineProperty。这就是 Internet Explorer 选择实现 getter 和 setter 的方式，但遗憾的是，目前仅在 Internet Explorer 8 中可用，而在任何其他 Web 浏览器中均不可用。此外，IE 8 仅在 DOM 节点上支持它，但未来的版本计划在 JavaScript 对象上也支持它。
You can find the test cases on the same site at http://robertnyman.com/javascript/javascript-getters-setters.html#object-defineproperty
您可以在同一站点上找到测试用例，网址为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";
Result:
结果：
document.body.description = "Content container"
