javascript中对象的定义、使用以及对象和原型链操作小结


Posted in Javascript onDecember 14, 2016

本文实例总结了javascript中对象的定义、使用以及对象和原型链操作。分享给大家供大家参考,具体如下:

1. 除了5种基本类型外,JS中剩下的就是对象

(1)对象的定义:

直接定义:

var test={x:1,y:1}

new方式创建:

var test=new Object({x:1})

Object.create方式:

var test=Object.create({x:1})

(2)对象上的赋值与取值

举例:

var test={
x:1,
y:2
}

方法一:可以通过test['x']取值

方法二:可以通过test.x取值

本质,将[]里面的值toString之后取到,比如我们这里有赋值语句比如:

test[{}]=3;

可以通过test[{z:1}]取到值3,若为5大基本类型,则要通过相同值取。

简而言之,就是test内部的值会调用toString方法后存储。

2.对象与原型链

(1)这里涉及到了JS中的继承,JS的对象中除了null,其他都继承于原型对象object.prototype,也就是说JS的大部分对象的原型链上的顶端都具有对象object.prototype.

JS是基于原型链集成的,并且对象上可以访问到原型链上对象的属性和方法。

举例:

function test(){
 this.x=x;
 this.y=y
}
var my=new test();
test.prototype.z=3;
alert(my.z); //输出为3

test.prototype为my的直接父链原型,并且my也可以沿着原型链查找,直到object.prototype,因此可以实现object.prototype中的方法,比如

my.toString();//返回[object Object]

(2)原型链对于对象遍历的影响

我们上述定义了一个对象my,如果对对象使用for in遍历,那么会有

function test(){
  this.x=1;
  this.y=2;
}
var my=new test();
test.prototype.z=3;
console.log(my.__proto__);//会输出test.prototype
for( p in my)
{
 console.log(my[p])//会输出1,2,3
}

我们发现最后输出了my[p]的值为1,2,3,发现遍历my上的属性时候,把my对象原型链上的属性也遍历出来了。

补充:并且这种遍历是无序的。

(3)特殊赋值

针对上述例子,如果我们对my对象进行赋值,

my.z=4;
alert(my.z);//这里得到的值为4

我们发现,如果对象上的属性和对象原型上的对象冲突,优先对于对象上属性进行赋值。

(4)在对象的原型链上,所有对象都继承与object.prototype,除了null,我们可以用以下链式来反应:

my(或者其他对象)—>test.prototype?>……..?>object.prototype——>null

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 #Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 #Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 #Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 #Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 #Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 #Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 #Javascript
You might like
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
内业资料员岗位职责
2014/01/04 职场文书
高中化学教学反思
2014/01/13 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2015年派出所工作总结
2015/04/24 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书