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分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
jQuery对val和atrr("value")赋值的区别介绍
Sep 26 Javascript
javascript实现获取字符串hash值
May 10 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
详解Vue底部导航栏组件
May 02 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Python分支结构(switch)操作简介
2018/01/17 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
用Python读取几十万行文本数据
2018/12/24 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
Flask处理Web表单的实现方法
2021/01/31 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
经理职责范文
2013/11/08 职场文书
商务英语求职信范文
2015/03/19 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript