Prototype Object对象 学习


Posted in Javascript onJuly 12, 2009

Object is used by Prototype as a namespace; that is, it just keeps a few new methods together, which are intended for namespaced access (i.e. starting with “Object.”).
上面说的namespace个人理解就相当于C#中的静态类,提供工具函数的意思,和C#中的namespace应该不是一个概念。因为C#中的命名空间后面不会直接跟方法,肯定是接一个对象然后在调用方法,不过和C++中的命名空间倒是有些类似
clone
extend
inspect
isArray
isElement
isFunction
isHash
isNumber
isString
isUndefined
keys
toHTML
toJSON
toQueryString
values

//通过匿名函数调用的方式创建Object对象 
(function() { //取得类型的字符串表达形式,(Prototype 学习——工具函数学习($方法))这篇日志里有详细的说明 
function getClass(object) { 
return Object.prototype.toString.call(object) 
.match(/^\[object\s(.*)\]$/)[1]; 
} 
//继承方法,非常简单的类抄写机制,就是把source里面的所有属性和方法复制一份到destination中,如果是引用类型,则source和destination将指向同一个地址 
function extend(destination, source) { 
for (var property in source) 
destination[property] = source[property]; 
return destination; 
} 
//返回object的字符串表达形式 
function inspect(object) { 
try { 
if (isUndefined(object)) return 'undefined'; 
if (object === null) return 'null'; 
return object.inspect ? object.inspect() : String(object); 
} catch (e) { 
if (e instanceof RangeError) return '...'; 
throw e; 
} 
} 
//返回object的JSON(JavaScript Object Notation) 
function toJSON(object) { 
var type = typeof object; 
switch (type) { 
case 'undefined': 
case 'function': 
case 'unknown': return; 
case 'boolean': return object.toString(); 
} 
if (object === null) return 'null'; 
if (object.toJSON) return object.toJSON(); 
if (isElement(object)) return; 
var results = []; 
for (var property in object) { 
var value = toJSON(object[property]); 
if (!isUndefined(value)) 
results.push(property.toJSON() + ': ' + value); 
} 
return '{' + results.join(', ') + '}'; 
} 
//返回查询字符串,例如:param1=value1¶m2=value2 
function toQueryString(object) { 
return $H(object).toQueryString(); 
} 
//返回HTML字符串 
function toHTML(object) { 
return object && object.toHTML ? object.toHTML() : String.interpret(object); 
} 
//取得object的所有key 
function keys(object) { 
var results = []; 
for (var property in object) 
results.push(property); 
return results; 
} 
//取得object的所有value 
function values(object) { 
var results = []; 
for (var property in object) 
results.push(object[property]); 
return results; 
} 
//把object中的所有属性和方法拷贝到一个空对象中,并返回 
function clone(object) { 
return extend({ }, object); 
} 
//判断object是不是基本的DOM Element 
function isElement(object) { 
return !!(object && object.nodeType == 1); 
} 
//判断object是否为数组 
function isArray(object) { 
return getClass(object) === "Array"; 
} 
//判断object是否为Prototype 的 Hash 对象 
function isHash(object) { 
return object instanceof Hash; 
} 
//判断object是否为函数 
function isFunction(object) { 
return typeof object === "function"; 
} 
//判断object是否为字符串 
function isString(object) { 
return getClass(object) === "String"; 
} 
//判断object是否为数字 
function isNumber(object) { 
return getClass(object) === "Number"; 
} 
//判断object是否已经定义 
function isUndefined(object) { 
return typeof object === "undefined"; 
} 
//返回Object对象 
extend(Object, { 
extend: extend, 
inspect: inspect, 
toJSON: toJSON, 
toQueryString: toQueryString, 
toHTML: toHTML, 
keys: keys, 
values: values, 
clone: clone, 
isElement: isElement, 
isArray: isArray, 
isHash: isHash, 
isFunction: isFunction, 
isString: isString, 
isNumber: isNumber, 
isUndefined: isUndefined 
}); 
})();

inspect方法:
Object.inspect() // -> 'undefined' 
Object.inspect(null) // -> 'null' 
Object.inspect(false) // -> 'false' 
Object.inspect([1, 2, 3]) // -> '[1, 2, 3]' 
Object.inspect('hello') // -> "'hello'"

toJSON方法:
注意这里面有一个递归调用的过程var value = toJSON(object[property]);最后返回一个JSON格式的字符串表示,下面看一下示例:
var data = {name: 'Violet', occupation: 'character', age: 25, pets: ['frog', 'rabbit']}; 
/* '{"name": "Violet", "occupation": "character", "age": 25, "pets": ["frog","rabbit"]}' */ 
//在eval返回的JSON字符串时要记住加上括号,否则报错,这里括号起到强制求值的作用。 
//要不然会把JSON字串当成复合语句,里面的("name":)当成Label,然后解析后面的内容就会出错了 
var obj=eval('('+Object.toJSON(data)+')'); 
alert(obj.name);

toQueryString方法:
用object创建一个Hash对象,然后调用Hash对象的toQueryString方法,并返回调用结果,讲到Hash对象时在详细说toQueryString方法。
一般这个方法在调用Ajax.Request时会经常用到,下面看一下示例:
Object.toQueryString({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' }) 
// -> 'action=ship&order_id=123&fees=f1&fees=f2&label=a%20demo'

toHTML方法:
如果传进去的object参数为undefined或者null将返回空字符串
alert(Object.toHTML())
alert(Object.toHTML(null))
如果object定义了toHTML方法,则调用object的toHTML方法,否者调用String的静态方法interpret,其实就是判断一下object是否为null,为null则返回'',否则调用object的toString方法,并返回调用结果
Object.extend(String, { 
interpret: function(value) { 
return value == null ? '' : String(value); 
}, 
specialChar: { 
'\b': '\\b', 
'\t': '\\t', 
'\n': '\\n', 
'\f': '\\f', 
'\r': '\\r', 
'\\': '\\\\' 
} 
});

下面看一下示例:
var Bookmark = Class.create({ 
initialize: function(name, url) { 
this.name = name; 
this.url = url; 
}, 
toHTML: function() { 
return '<a href="#{url}" href="#{url}">#{name}</a>'.interpolate(this); 
} 
}); 
var api = new Bookmark('Prototype API', 'http://prototypejs.org/api'); 
Object.toHTML(api); 
//-> '<a href="http://prototypejs.org/api" href="http://prototypejs.org/api">Prototype API</a>'

keys和values方法:
看一下示例就明白了,就不多说了:
Object.keys() 
// -> [] 
Object.keys({ name: 'Prototype', version: 1.5 }).sort() 
// -> ['name', 'version'] 
Object.values() 
// -> [] 
Object.values({ name: 'Prototype', version: 1.5 }).sort() 
// -> [1.5, 'Prototype']

clone方法:
'{}'就是空对象的直接量,相当于new Object()
var o = { name: 'Prototype', version: 1.5, authors: ['sam', 'contributors'] }; 
var o2 = Object.clone(o); 
o2.version = '1.5 weird'; 
o2.authors.pop(); 
o.version // -> 1.5 
o2.version // -> '1.5 weird' 
o.authors // -> ['sam'] 
// Ouch! Shallow copy!,注意这里!

isXXX方法不说了吧。
Javascript 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
了解javascript中的Dom操作
May 27 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 #Javascript
Prototype 学习 工具函数学习($A方法)
Jul 12 #Javascript
Prototype 学习 工具函数学习($方法)
Jul 12 #Javascript
Prototype 学习 Prototype对象
Jul 12 #Javascript
javascript 动态加载 css 方法总结
Jul 11 #Javascript
checkbox 复选框不能为空
Jul 11 #Javascript
javascript 页面只自动刷新一次
Jul 10 #Javascript
You might like
个人站长制做网页常用的php代码
2007/03/03 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
详解angular笔记路由之angular-router
2017/09/12 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
详细介绍Python的鸭子类型
2016/09/12 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
python脚本实现验证码识别
2018/06/07 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Python匿名函数及应用示例
2019/04/09 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
django配置app中的静态文件步骤
2020/03/27 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
体育教师求职信
2014/06/30 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python