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 相关文章推荐
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
Vue项目History模式404问题解决方法
Oct 31 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 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
SMARTY学习手记
2007/01/04 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
php split汉字
2009/06/05 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
Firefox div高度自适应
2009/04/28 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
毕业生个人求职信范文分享
2014/01/05 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
小学综合实践活动总结
2014/07/07 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
2019秋季运动会口号
2019/06/25 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers