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函数作用域学习示例(js作用域)
Jan 13 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
vue中格式化时间过滤器代码实例
Apr 17 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
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
Python向日志输出中添加上下文信息
2017/05/24 Python
py-charm延长试用期限实例
2019/12/22 Python
Python3如何判断三角形的类型
2020/04/12 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
策划主管的工作职责
2013/11/24 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
环保宣传标语
2014/06/12 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
windows安装python超详细图文教程
2021/05/21 Python
Java实现多线程聊天室
2021/06/26 Java/Android
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android