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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
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 什么是PEAR?
2009/03/19 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP运行模式的深入理解
2013/06/03 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP的PDO连接讲解
2019/01/24 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
Python调用命令行进度条的方法
2015/05/05 Python
python简单分割文件的方法
2015/07/30 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
Flask-Mail用法实例分析
2018/07/21 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
英国假发网站:Hothair
2018/02/23 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
关于迟到的检讨书
2014/01/26 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
生活部的活动方案
2014/08/19 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
创业计划书之书店
2019/09/10 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS