网络之美 JavaScript中Get和Set访问器的实现代码_Javascript教程-查字典教程网
网络之美 JavaScript中Get和Set访问器的实现代码
网络之美 JavaScript中Get和Set访问器的实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:标准的Get和Set访问器的实现复制代码代码如下:functionField(val){this.value=val;}Field.prot...

标准的Get和Set访问器的实现

复制代码 代码如下:

function Field(val){

this.value = val;

}

Field.prototype = {

get value(){

return this._value;

},

set value(val){

this._value = val;

}

};

var field = new Field("test");

field.value="test2";

//field.value will now return "test2"

在如下浏览器能正常工作:

我们常用的实现方法可能是这样的:

复制代码 代码如下:

function Field(val){

var value = val;

this.getValue = function(){

return value;

};

this.setValue = function(val){

value = val;

};

}

var field = new Field("test");

field.setValue("test2")

field.getValue() // return "test2"

在DOM元素上Get和Set访问器的实现

复制代码 代码如下:

HTMLElement.prototype.__defineGetter__("description", function () {

return this.desc;

});

HTMLElement.prototype.__defineSetter__("description", function (val) {

this.desc = val;

});

document.body.description = "Beautiful body";

// document.body.description will now return "Beautiful body";

在如下浏览器能正常工作:

通过Object.defineProperty实现访问器

将来ECMAScript标准的扩展对象的方法会通过Object.defineProperty来实现,这也是为什么IE8就是通过这种方法来实现get和set访问器,看来微软还是很有远见的,遗憾的是目前只有IE8+和Chrome 5.0+支持,其它的浏览器都不支持,而且IE8+也只支持DOM元素,不过将来的版本将和Chrome一样支持普通的Javascript对象。

DOM元素上的Get和Set访问器的实现

复制代码 代码如下:

Object.defineProperty(document.body, "description", {

get : function () {

return this.desc;

},

set : function (val) {

this.desc = val;

}

});

document.body.description = "Content container";

// document.body.description will now return "Content container"

在如下浏览器能正常工作:

普通对象的Get和Set访问器的实现

复制代码 代码如下:

var lost = {

loc : "Island"

};

Object.defineProperty(lost, "location", {

get : function () {

return this.loc;

},

set : function (val) {

this.loc = val;

}

});

lost.location = "Another island";

// lost.location will now return "Another island"

在如下浏览器能正常工作:

本文总结

尽管微软的IE只是支持了Object.defineProperty,没有完美的实现Get和Set访问器,但是我们已经看到了IE有了很大的进步,特别是刚发布的IE9使用的新的javascript引擎,支持HTML5和CSS3,支持硬件加速等等,相信有一天各个浏览器都能完全拥抱标准,带来一个完美的WEB世界。

参考文献:

1. Getters and setters with JavaScript

2. JavaScript Getters and Setters

作者:梦想

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类