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

相关文章
|
3月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态网络的引擎
JavaScript:构建动态网络的引擎
|
2月前
|
网络协议 Linux 虚拟化
配置VM网络:如何设定静态IP以访问主机IP和互联网
以上就是设定虚拟机网络和静态IP地址的基本步骤。需要注意的是,这些步骤可能会因为虚拟机软件、操作系统以及网络环境的不同而有所差异。在进行设定时,应根据具体情况进行调整。
303 10
|
3月前
|
Shell 开发工具 git
使用代理访问网络各项命令总结
工作中常需设置代理,容易导致环境混乱。本文总结了 SourceTree 无法拉取代码的问题,排查了环境变量、Git 全局配置及系统代理设置,最终通过清除 Git 代理配置解决。内容涵盖排查步骤、命令整理及脚本处理,帮助快速定位并解决代理相关网络问题。
201 3
|
6月前
|
JavaScript API 开发者
在Vue.js中设置方法时访问$vuetify实例的正确姿势。
总之,访问 `$vuetify`实例是一种直观而有效的方法,它使得在Vue组件中处理Vuetify相关的逻辑成为可能。务必留意正确使用 `this`上下文,并确保在执行任何操作之前,Vue组件实例已经正确初始化并且可用。这种方式在组件自身逻辑与Vuetify的界面表现层之间架起了一座桥梁,使得开发者可以通过书写组件代码来控制和优化用户界面。
93 14
|
5月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
158 1
|
安全 网络安全 数据安全/隐私保护
访问控制列表(ACL)是网络安全中的一种重要机制,用于定义和管理对网络资源的访问权限
访问控制列表(ACL)是网络安全中的一种重要机制,用于定义和管理对网络资源的访问权限。它通过设置一系列规则,控制谁可以访问特定资源、在什么条件下访问以及可以执行哪些操作。ACL 可以应用于路由器、防火墙等设备,分为标准、扩展、基于时间和基于用户等多种类型,广泛用于企业网络和互联网中,以增强安全性和精细管理。
1813 7
|
7月前
|
存储 缓存 NoSQL
Redis中的常用命令-get&set&keys&exists&expire&ttl&type的详细解析
总的来说,这些Redis命令提供了处理存储在内存中的键值对的便捷方式。通过理解和运用它们,你可以更有效地在Redis中操作数据,使其更好地服务于你的应用。
468 17
|
7月前
|
监控 算法 JavaScript
基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
本文探讨局域网网络访问控制软件的技术框架,将其核心功能映射为图论模型,通过节点与边表示终端设备及访问关系。以JavaScript实现DFS算法,模拟访问权限判断,优化动态策略更新与多层级访问控制。结合流量监控数据,提升网络安全响应能力,为企业自主研发提供理论支持,推动智能化演进,助力数字化管理。
194 4
|
7月前
|
域名解析 监控 网络协议
21.7K star!再见吧花生壳,没有公网ip,也能搞定所有网络访问!内网穿透神器NPS
“nps”是一款强大的内网穿透工具,支持多种协议与功能。它无需公网IP或复杂配置,可实现远程桌面、文件共享和私有云搭建等。项目采用Go语言开发,具有高性能与轻量级特点,适用于远程办公、物联网管理等场景。其核心亮点包括零配置穿透、多级代理网络、实时流量监控及企业级安全特性。对比同类工具,“nps”在安装复杂度、协议支持和管理界面方面表现优异。项目地址:https://github.com/ehang-io/nps。
1747 12

热门文章

最新文章