JavaScript Accessor实现说明

第一种算是比较常见了,通过闭包Store Value从而实现accessor,适用于所有浏览器.


代码如下:

function Sandy(val){
var value = val;
this.getValue = function(){
return value;
};
this.setValue = function(val){
value = val;
};
}
//usage
var sandy = new Sandy("test");
sandy.value
// => undefined
sandy.setValue("test2")
sandy.getValue

下面是JavaScript权威指南（中文第五版）中P152页使用闭包的一个例子.


代码如下:

function makeProperty(o, name, predicate) {
var value; //This is property value;

//The setter method simply returns the value
o['get' + name] = function() { return value;};

//The getter method stores the value or throws an exception if
//the predicate rejects the value
o['set' + name] = function(v) {
if (predicate && !predicate(v) {
throw 'set' + name + ': invalid value ' + v;
} else {
value = y;
}
}
}

//The following code demenstrates the makeProperty() method
var o = {}; // Here is an empty object

//Add property accessor methods getName and setName
//Ensure that only string values are allowed
makeProperty(o, 'Name', function(x) { return typeof x == 'string'; });

o.setName('Frank'); 　　//Set the property value;
print(o.getName()); 　　//Get the property value
o.setName(0); //Try to set a value of the wrong type

第二种方法是使用__defineSetter__与__defineGetter__来实现accessor,看下划线就知道它们并非标准,适用于Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+ 和 Opera 9.5+ ,方法使用见MDN.


代码如下:

function Sandy(val){
var value = val,
_watch = function(newVal) {
console.log('val is Changed to : ' + newVal);
}

this.__defineGetter__("value", function(){
return value;
});

this.__defineSetter__("value", function(val){
value = val;
_watch(val);
});
}

var sandy = new Sandy("test");
sandy.value
// => test
sandy.value = "test2";
// => 'val is Changed to : test2'
sandy.value
// => "test2"

　除了__defineG/Setter__外, 你还可以使用'set'、'get'关键字在在原型对象上定义accessor,对于单个对象同样适用, 适用于Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+ 和 Opera 9.5+.


代码如下:

function Sandy(val){
this.value = val;
}

Sandy.prototype = {
get value(){
return this._value;
},
set value(val){
this._value = val;
}
};

//Or

var sandy = {
'_value' : 'sandy',
get value() {
　　return this._value;
},
set value(val) {
　　this._value = val;
}
}

最后一种方法,用到了Object的静态方法defineProperty,作用于单个对象,该方法应该属于ES5的范畴了,目前似乎只有Chrome 支持这种方法，其实Ie8也支持,但操作对象仅限于Dom节点(Dom node),见IEBlog,该方法的使用见MDN.


代码如下:

var sandy = {}, rValue;
Object.defineProperty(sandy, 'value' ,
{
'set' : function(val) {
rValue = val;
},
'get' : function() {
return rValue;
},
'enumerable' : true,
'configurable' : true
}
)
//Ie8+
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"

‘enumerable','configuralbe' 属于ES5规范中的Property Attributes(属性特性),在这里就不做讨论了,有兴趣的Google或者直接去看ES5的文档. ^ ^

赞 (0)

相关推荐

  • JavaScript使用ActiveXObject访问Access和SQL Server数据库

    JS操作 Access 数据库 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript">  <!--  var filePath = location.href.substring(0, location.href.indexOf("实例197.连接Access数据库.html"));    //以当前页面文件为基础,找到文件所在的绝对路径  var path = filePath + "197.mdb"

  • JS连接SQL数据库与ACCESS数据库的方法实例

    复制代码 代码如下: //连接SQL<script language="javascript">    var conn = new ActiveXObject("ADODB.Connection");   conn.Open("Provider=SQLOLEDB.1; Data Source=tgf; User ID=sa; "   +"Password=sasa; Initial Catalog=MyBulletin&q

  • 用nodejs访问ActiveX对象，以操作Access数据库为例。

    起因 有人提问"如果用nodejs访问sql server?" 找了找资料,发现有两类解决方法,使用第三方nodejs插件:https://github.com/orenmazor/node-tds.使用ADODB.ConnectionActiveX对象. 参考: http://stackoverflow.com/questions/857670/how-to-connect-to-sql-server-database-from-javascript http://stackover

  • 用javascript连接access数据库的方法

    刚看到一个朋友写的用javascript连接excel数据库的程序,想把它改成access数据库的,就找到了这两篇文章 ------------------------------------------    这几天费了挺大力气在网上查找javascript连接access数据库的方法, 经过整理总结,终于写出一段能够有效执行的代码. 但是这段代码在本地可以正常运行,一旦放到免费个人空间上就没法执 行了,主要原因就是操作权限不够,由于只支持静态页面的免费空间多数都 作了非常严格的限制,所以无论

  • Javascript连接Access数据库完整实例

    本文实例讲述了Javascript连接Access数据库的方法.分享给大家供大家参考.具体实现方法如下: var roc = roc || {}; roc.db = roc.db ||{}; //创建一个连接 roc.db.createDb = function(){ var conn = new ActiveXObject("ADODB.Connection"), fso = new ActiveXObject("Scripting.FileSystemObject&quo

  • 静态页面下用javascript操作ACCESS数据库(读增改删)的代码

    静态页面读取ACCESS数据库.htm 复制代码 代码如下: <script language="javascript">   //用 JavaScript 写服务器端连接数据库的代码示例   var conn = new ActiveXObject("ADODB.Connection");   conn.Open("DBQ=E:\\a.mdb;DRIVER={Microsoft Access Driver (*.mdb)};"); 

  • JavaScript Accessor实现说明

    第一种算是比较常见了,通过闭包Store Value从而实现accessor,适用于所有浏览器. 复制代码 代码如下: function Sandy(val){ var value = val; this.getValue = function(){ return value; }; this.setValue = function(val){ value = val; }; } //usage var sandy = new Sandy("test"); sandy.value //

  • JavaScript可视化图表库D3.js API中文参考

    D3库所提供的所有 API 都在 d3 命名空间下.d3 库使用语义版本命名法(semantic versioning). 你可以用 d3.version 查看当前的版本信息. d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素. d3.selectAll - 从当前文档中选择多项元素. selection.attr - 设置或获取指定属性. selection.classed - 添加或删除选定元素的 CSS 类(CSS class). selection.styl

  • JavaScript ECMA-262-3 深入解析.第三章.this

    介绍 在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节.讨论的主题就是this关键字. 实践证明,这个主题很难,在不同执行上下文中确定this的值经常会发生问题. 许多程序员习惯的认为,在程序语言中,this关键字与面向对象程序开发紧密相关,其完全指向由构造器新创建的对象.在ECMAScript规范中也是这样实现的,但正如我们将看到那样,在ECMAScript中,this并不限于只用来指向新创建的对象. 下面让我们更详细的了解一下,在ECMAScript中this的值到底是什么? 定义 t

  • 浅谈javascript的原型继承

    请看源码: 复制代码 代码如下: function clone(o) { var F = function(){}; F.prototype = o; return new F(); } 首先看ext(4.1的1896行开始)的原型式继承. 复制代码 代码如下: var TemplateClass = function(){}; var ExtObject = Ext.Object = { chain: function (object) { TemplateClass.prototype =

  • 深入探讨javascript中的数据类型

    深入探讨javascript中的数据类型

    学一门编程语言,无非两方面:一是语法,二是数据类型.类C语言的语法不外乎if.while.for.函数.算术运算等,面向对象的语言再加上object. 语法只是语言设计者预先做的一套规则,不同语言语法不尽相同,但都有一些共通点,对于熟悉一两门编程语言的人,学其他的编程语言时,语法往往不是问题(当然,如果你一直学的是类C语言,那么首次接触lisp时肯定也要花些时间),学习的重点往往是数据类型及其相关操作上,不是有句老话:"数据结构+算法＝程序"!其次,有些语言的语法本身就存在设计问题(j

  • javascript代码规范小结

    1. Javascript代码应符合Douban-JSLint检验标准 1-1. 语句必须都有分号结尾,除了for, function, if, switch, try, while 1-2. 只有长语句可以考虑断行,如: TEMPL_SONGLIST.replace('{TABLE}', da['results']) .replace('{PREV_NUM}', prev) .replace('{NEXT_NUM}', next) .replace('{CURRENT_NUM}', curre

  • 深入学习JavaScript对象

    深入学习JavaScript对象

    JavaScript中,除了五种原始类型(即数字,字符串,布尔值,null,undefined)之外的都是对象了,所以,不把对象学明白怎么继续往下学习呢? 一.概述 对象是一种复合值,它将很多值(原始值或其他对象)聚合在一起,可通过属性名访问这些值.而属性名可以是包含空字符串在内的任意字符串. JavaScript对象也可以称作一种数据结构,正如我们经常听说的"散列(hash)"."散列表(hashtable)"."字典 (dictionary)"

  • 每天一篇javascript学习小结（属性定义方法）

    定义(Definition).定义属性需要使用相应的函数,比如: Object.defineProperty(obj, "prop", propDesc) 如果obj没有prop这个自身属性,则该函数的作用是给obj添加一个自身属性prop并赋值, 参数propDesc指定了该属性拥有的特性(可写性,可枚举性等). 如果obj已经有了prop这个自身属性,则该函数的作用是修改这个已有属性的特性,当然也包括它的属性值. 1.defineProperty var book = { _yea

  • javascript中Object使用详解

    复制代码 代码如下: function forEach(o){ var html =""; for(var i in o){ html += i+"="+o[i]+" "; } console.log(html); console.log(o); } //1 //Object.create(proto) //Object.create(proto,descriptors) //使用指定的原型和属性来创建一个对象 //参数: //proto:新创建

  • JavaScript中的Object对象学习教程

    参数: (1)obj 必需.Object 对象分配到的变量名称.  (2)值 可选.任一 JavaScript 基元数据类型(数字.布尔值或字符串).  如果值是一个对象,则返回的对象是未修改的.  如果值是 null."未定义"或"未提供",则创建无内容的对象. Object对象的方法 Object作为构造函数使用时,可以接受一个参数.如果该参数是一个对象,则直接返回这个对象:如果是一个原始类型的值,则返回该值对应的包装对象.利用这一点,可以写一个判断变量是否为对

随机推荐