网络之美: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

相关文章
|
2月前
|
安全 网络安全 数据安全/隐私保护
访问控制列表(ACL)是网络安全中的一种重要机制,用于定义和管理对网络资源的访问权限
访问控制列表(ACL)是网络安全中的一种重要机制,用于定义和管理对网络资源的访问权限。它通过设置一系列规则,控制谁可以访问特定资源、在什么条件下访问以及可以执行哪些操作。ACL 可以应用于路由器、防火墙等设备,分为标准、扩展、基于时间和基于用户等多种类型,广泛用于企业网络和互联网中,以增强安全性和精细管理。
256 7
|
8天前
|
Java Maven Spring
【SpringBug】lombok插件失效,但是没有报错信息,@Data不能生成get和set方法
解决写了@Data注解,但是在测试文件中生成的反编译target文件Us二Info中没有get和set方法
|
5月前
|
消息中间件 存储 Serverless
函数计算产品使用问题之怎么访问网络附加存储(NAS)存储模型文件
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
10天前
|
Kubernetes 网络协议 应用服务中间件
Kubernetes Ingress:灵活的集群外部网络访问的利器
《Kubernetes Ingress:集群外部访问的利器-打造灵活的集群网络》介绍了如何通过Ingress实现Kubernetes集群的外部访问。前提条件是已拥有Kubernetes集群并安装了kubectl工具。文章详细讲解了Ingress的基本组成(Ingress Controller和资源对象),选择合适的版本,以及具体的安装步骤,如下载配置文件、部署Nginx Ingress Controller等。此外,还提供了常见问题的解决方案,例如镜像下载失败的应对措施。最后,通过部署示例应用展示了Ingress的实际使用方法。
27 2
|
5月前
|
JavaScript 算法 前端开发
采招网JS逆向:基于AES解密网络数据
采招网JS逆向:基于AES解密网络数据
81 0
|
2月前
|
网络协议 安全 文件存储
动态DNS(DDNS)技术在当前网络环境中日益重要,它允许使用动态IP地址的设备通过固定域名访问
动态DNS(DDNS)技术在当前网络环境中日益重要,它允许使用动态IP地址的设备通过固定域名访问,即使IP地址变化,也能通过DDNS服务保持连接。适用于家庭网络远程访问设备及企业临时或移动设备管理,提供便捷性和灵活性。示例代码展示了如何使用Python实现基本的DDNS更新。尽管存在服务可靠性和安全性挑战,DDNS仍极大提升了网络资源的利用效率。
72 6
|
2月前
|
安全 网络安全 数据安全/隐私保护
访问控制列表(ACL)是网络安全管理的重要工具,用于定义和管理网络资源的访问权限。
访问控制列表(ACL)是网络安全管理的重要工具,用于定义和管理网络资源的访问权限。ACL 可应用于路由器、防火墙等设备,通过设定规则控制访问。其类型包括标准、扩展、基于时间和基于用户的ACL,广泛用于企业网络和互联网安全中,以增强安全性、实现精细管理和灵活调整。然而,ACL 也存在管理复杂和可能影响性能的局限性。未来,ACL 将趋向智能化和自动化,与其他安全技术结合,提供更全面的安全保障。
115 4
|
2月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
2月前
|
Java Windows
IDEA不使用lombok,如何快速生成get和set方法
【11月更文挑战第10天】在 IntelliJ IDEA 中生成 `get` 和 `set` 方法有多种方式:通过菜单操作、使用快捷键或自定义模板。菜单操作包括选择“Code”菜单中的“Generate...”,快捷键为“Alt + Insert”。自定义模板可在“File”->“Settings”->“Editor”->“Code Style”->“Java”中设置。批量生成时,可多选变量一次性生成。
|
2月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密