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 相关文章推荐
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
原生JS实现不断变化的标签
May 22 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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中ob_start()函数的用法
2013/06/24 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
thinkphp分页实现效果
2016/10/13 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
进步之星获奖感言
2014/02/22 职场文书
海飞丝广告词
2014/03/20 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
复活读书笔记
2015/06/29 职场文书
2015团员个人年度总结
2015/11/24 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书