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 相关文章推荐
js获取checkbox值的方法
Jan 28 Javascript
纯javascript制作日历控件
Jul 17 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
Angular5.1新功能分享
Dec 21 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 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
十大“创意”战术!
2020/03/04 星际争霸
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
PHP重定向的3种方式
2013/03/07 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python executemany的使用及注意事项
2017/03/13 Python
浅谈Python反射 & 单例模式
2019/03/21 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
人力资源本科毕业生求职信
2014/06/04 职场文书
学校开学标语
2014/10/06 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
出差报告格式模板
2014/11/06 职场文书
体育教师个人工作总结
2015/02/09 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers