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 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 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
在线增减.htpasswd内的用户
2006/10/09 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python监控文件或目录变化
2016/06/07 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python简单的三元一次方程求解实例
2020/04/02 Python
parser.add_argument中的action使用
2020/04/20 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
技术总监岗位职责
2013/12/05 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
工人先进事迹材料
2014/12/26 职场文书
音乐教师个人总结
2015/02/06 职场文书
中标通知书格式
2015/04/17 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js