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 动态参数判空操作
Dec 22 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
5种方法告诉你如何使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
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php无限遍历目录示例
2014/02/21 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
php常量详细解析
2015/10/27 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
javascript内置对象arguments详解
2014/03/16 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
python之PyMongo使用总结
2017/05/26 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
学期自我评价
2014/01/27 职场文书
临床护士自荐信
2014/01/31 职场文书
无毒社区工作方案
2014/05/23 职场文书
政工例会汇报材料
2014/08/26 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
助学金感谢信
2015/01/20 职场文书
毕业生党员个人总结
2015/02/14 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
2016年教师节慰问信
2015/12/01 职场文书
旅游安全责任协议书
2016/03/22 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js