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/Css 文件的代码
Jul 03 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
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 中的str_replace 函数总结
2007/04/27 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
javascript 写类方式之七
2009/07/05 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
python中文乱码的解决方法
2013/11/04 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Python如何读写CSV文件
2020/08/13 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
法人任命书范本
2014/06/04 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis