网络之美:JavaScript中Get和Set访问器的实现

简介:   前两天IE9 Beta版发布了,对于从事Web开发的朋友们来说真是个好消息啊,希望将来有一天各个浏览器都能遵循统一的标准。今天要和大家分享的是JavaScript中的Get和Set访问器,和C#中的访问器非常相似。

  前两天IE9 Beta版发布了,对于从事Web开发的朋友们来说真是个好消息啊,希望将来有一天各个浏览器都能遵循统一的标准。今天要和大家分享的是JavaScript中的Get和Set访问器,和C#中的访问器非常相似。

 

 标准的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

相关文章
|
10天前
|
消息中间件 存储 Serverless
函数计算产品使用问题之怎么访问网络附加存储(NAS)存储模型文件
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
5天前
|
JavaScript 前端开发 索引
JavaScript基础知识-数组基于索引访问
关于JavaScript数组基于索引访问的基础知识介绍。
10 1
JavaScript基础知识-数组基于索引访问
|
14天前
|
API
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
|
16天前
|
网络协议 安全 前端开发
【应用服务 App Service】Azure 应用服务测试网络访问其他域名及请求超时限制(4分钟 ≈ 230秒)
【应用服务 App Service】Azure 应用服务测试网络访问其他域名及请求超时限制(4分钟 ≈ 230秒)
|
23天前
|
Java Linux 开发者
|
26天前
|
负载均衡 安全 网络虚拟化
CCE集群VPC网络模式下几种访问场景
【8月更文挑战第13天】在CCE(Cloud Container Engine)集群的VPC网络模式下,支持多样化的访问场景:容器应用可直接利用VPC访问外部资源;通过ELB负载均衡或VPN/专线配置,实现外部网络对容器应用的安全访问;容器间通过内部IP或服务发现机制相互通信;跨VPC访问则可通过VPC对等连接或云连接服务实现。这些方案确保了应用内外部通信的安全与高效。
|
1月前
|
JSON JavaScript 前端开发
震惊!JS如何悄无声息追踪你的每一步?揭秘页面访问与关闭的超级上报大法,让数据说话,优化体验不再难!
【8月更文挑战第4天】在Web开发中,跟踪用户行为对提升体验与留存至关重要。本文以在线学习平台为例,介绍如何用JavaScript监听页面访问及关闭,并上报数据。通过`window.onload`监测页面加载,记录用户访问;利用`navigator.sendBeacon`在用户离开时发送少量数据至服务器,无需担心请求失败。需注意隐私合规、性能影响及浏览器兼容性。此技术有助于深入理解用户行为,为产品迭代提供依据。
44 8
|
10天前
|
JSON 安全 网络协议
【Azure Policy】添加策略用于审计Azure 网络安全组(NSG)规则 -- 只能特定的IP地址允许3389/22端口访问
为了确保Azure虚拟机资源的安全管理,只有指定IP地址才能通过RDP/SSH远程访问。解决方案包括使用Azure Policy服务扫描所有网络安全组(NSG),检查入站规则中的3389和22端口,并验证源地址是否在允许的IP列表中。不符合条件的NSG规则将被标记为非合规。通过编写特定的Policy Rule并定义允许的IP地址参数,实现集中管控和合规性检查。
|
14天前
|
缓存 负载均衡 NoSQL
【Azure Redis】Azure Redis添加了内部虚拟网络后,其他区域的主机通过虚拟网络对等互连访问失败
【Azure Redis】Azure Redis添加了内部虚拟网络后,其他区域的主机通过虚拟网络对等互连访问失败
|
15天前
|
安全 网络安全
【Azure 环境】当本地网络通过ER专线与Azure云上多个虚拟网络打通,如何通过特定的网络策略来限制本地部分网段访问云上虚拟机22端口?
【Azure 环境】当本地网络通过ER专线与Azure云上多个虚拟网络打通,如何通过特定的网络策略来限制本地部分网段访问云上虚拟机22端口?