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 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
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实现腾讯与百度坐标转换
2017/08/05 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
JavaScript闭包详解
2015/02/02 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Python的条件锁与事件共享详解
2019/09/12 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
入股协议书范本
2014/04/14 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
银行资信证明
2015/06/17 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers