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如何取消事件冒泡
Sep 23 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
node中koa中间件机制详解
Aug 22 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 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异常处理定义与使用方法分析
2017/07/25 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
vue二级路由设置方法
2018/02/09 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
python中的set实现不重复的排序原理
2018/01/24 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
python使用列表的最佳方案
2020/08/12 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
社区十八大感言
2014/01/19 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
百万英镑观后感
2015/06/09 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
redis实现排行榜功能
2021/05/24 Redis
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang