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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
JS event使用方法详解
Apr 28 Javascript
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python利用lxml读写xml格式的文件
2017/08/10 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
python实现括号匹配的思路详解
2018/08/23 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
致铅球运动员广播稿精选
2014/01/12 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
自查自纠工作总结
2014/10/15 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python