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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
JQuery 风格的HTML文本转义
Jul 01 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
javascript cookie的简单应用
Feb 24 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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 URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
php框架知识点的整理和补充
2021/03/01 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
基于JavaScript实现验证码功能
2017/04/01 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
Python制作数据导入导出工具
2015/07/31 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
经典c++面试题六
2012/01/18 面试题
租房协议书范例
2014/10/14 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
MySQL 语句执行顺序举例解析
2022/06/05 MySQL