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 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
Vue基于NUXT的SSR详解
Oct 24 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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代码质量36计
2012/09/05 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python实现可自定义大小的截屏功能
2018/01/20 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
python sqlite的Row对象操作示例
2019/09/11 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
德国机车企业:FC-Moto
2017/10/27 全球购物
医院反腐倡廉演讲稿
2014/09/16 职场文书
高三英语教学计划
2015/01/23 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
MySql数据库 查询时间序列间隔
2022/05/11 MySQL