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 相关文章推荐
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
AngularJS手动表单验证
Feb 01 Javascript
从0开始学Vue
Oct 27 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
微信小程序实现刷脸登录
May 25 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
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
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
详解JavaScript的变量
2019/04/04 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
python树莓派红外反射传感器
2019/01/21 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
python集合删除多种方法详解
2020/02/10 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
《学会合作》教学反思
2014/04/12 职场文书
四风自我剖析材料
2014/09/30 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技