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第二章
Sep 30 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
React快速入门教程
Jan 17 Javascript
vue params、query传参使用详解
Sep 12 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
浅析java线程中断的办法
Jul 29 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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生成唯一订单号
2015/07/05 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
iview实现图片上传功能
2020/06/29 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现简单温度转换的方法
2015/03/13 Python
利用python代码写的12306订票代码
2015/12/20 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
白酒市场开发计划书
2014/01/09 职场文书
公务员综合考察材料
2014/02/01 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
班主任先进事迹材料
2014/12/17 职场文书
英语感谢信范文
2015/01/20 职场文书
超市员工辞职信范文
2015/05/12 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL