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 相关文章推荐
jquery中获取元素的几种方式小结
Jul 05 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
PHP判断指定时间段的2个方法
2014/03/14 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Python可跨平台实现获取按键的方法
2015/03/05 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python可视化实现KNN算法
2019/10/16 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
介绍一下Make? 为什么使用make
2013/12/08 面试题
公司会计主管岗位责任制
2014/03/01 职场文书
财务总监管理职责范文
2014/03/09 职场文书
大学校务公开实施方案
2014/03/31 职场文书
经济管理专业求职信
2014/06/09 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
明星邀请函
2015/02/02 职场文书
酒店前台辞职书
2015/02/26 职场文书
任命书标准格式
2015/03/02 职场文书
预备党员表决心的话
2015/09/22 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
python中的sys模块和os模块
2022/03/20 Python
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server