javascript 学习笔记(八)javascript对象


Posted in Javascript onApril 12, 2011

1、javascript中的内置对象
javascript中除了本身的内置对象,如以下我们所熟悉的对象:
•Array
•Date
•Math
•String
•RegExp
•……
各个对象都有自己的属性及方法,比如我们经常使用属性及方法
属性:stringObject.length; arrayObject.length;……
方法:stringObject.indexOf(); stringObject.splite(); stringObject.substr(); arrayObject.concat(); arrayObject.push(); arrayObject.join();……
2、如何自定义对象,及添加属性和方法
a. 通过关键字new创建

var newObject = new Object(); //创建一个新类 
newObject.name = "new object"; //添加一个name的属性 
newObject.say = function() { //添加say()方法 
alert(this.name); //output new object 
}

对于以上的创建方法,我们可以利用JSON(JavaScript Object Notation)的方法简写为如下代码:
var newObject = { 
name: "new object"; 
say: function () { 
alert(this.name); 
} 
};

我们利用JSON的数据格式创建一个更为复杂的对象
var company = { 
name: "tuanzz", 
product: "groupon", 
address: {province: "Hubei", city: "wuhan"}, 
person:[ 
{name: "zhangchen",age: "23"}, 
{name: "luomi", age: "23"}, 
], 
readme: function() { 
alert("My name is "+this.person[0].name+" and "+this.person[0].age+" years old"); 
} 
}; 
company.readme(); //output My name is zhangchen and 23 years old;

我们可以看到,用JSON的数据格式创建的对象,代码不仅看起来十分优雅。
JSON的形式就是用大括“{}”号包括起来的项目列表,每一个项目间并用逗号“,”分隔,而项目就是用冒号“:”分隔的属性名和属性值。这是典型的字典表示形式,也再次表明了 JavaScript里的对象就是字典结构。不管多么复杂的对象,都可以被一句JSON代码来创建并赋值。
b、通过构造函数来创建对象
function objectFun(name) { 
this.name = name; 
this.say = function() { 
alert(this.name); 
} 
} 
var newObject = new objectFun("zhangchen"); 
newObject.say(); //output zhangchen

首先新建一个objectFun()函数,其中定义了属性和方法,这里我们可以把objectFun看作一个类(在javascript中函数就是对象),然后通过new实例化出一个对象,newObject对象中同样也有了父类中属性和方法。
我们可以用以下代码来检测函数确实是对象:
//普通函数 
function say(s) { 
alert(s); 
} 
say("hi"); 
//给函数对象赋属性,函数就是对象 
say.test = "it can work?"; 
alert(say.test); //output it can work?

如何理解以上创建对象的方法?我们看下面的代码:
function objectFun(name) { 
this.name = name; 
this.say = function() { 
alert(this.name); 
} 
} 
var newObject = new Object(); //创建一个空对象 
objectFun.call(newObject, "zhangchen"); //将newObject作为this参数调用objectFun函数 
newObject.say("zhangchen");//output zhangchen

首先创建一个newObject对象,newObject作为this参数调用objectFun函数。讲了这么多,我们完全可以把objectFun作为构造函数来使用。
-------------------------------------------------------------------------------------------------------------------------------------------------
余下内容大家可参考李战写的悟透JavaScript
Javascript 相关文章推荐
javascript json 新手入门文档
Dec 03 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
AngularJS中的模块详解
Jan 29 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
js实现数字滚动特效
Dec 16 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 #Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 #Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 #Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 #Javascript
window.dialogArguments 使用说明
Apr 11 #Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 #Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
营销与策划专业求职信
2014/06/20 职场文书
新党章心得体会
2014/09/04 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
简单租房协议书
2014/10/21 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
python中的plt.cm.Paired用法说明
2021/05/31 Python
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技