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中“基本类型”之争小结
Jan 03 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
小程序转发探索示例
2019/02/19 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
Python变量和字符串详解
2017/04/29 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python实现名片管理系统
2018/11/29 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
经典c++面试题六
2012/01/18 面试题
咖啡厅创业计划书范本
2014/01/22 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
员工评语范文
2014/12/31 职场文书
公司租车协议书
2015/01/29 职场文书
稽核岗位职责
2015/02/10 职场文书
工作收入证明范本
2015/06/12 职场文书
责任书格式
2019/04/18 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
解决vue中provide inject的响应式监听
2022/04/19 Vue.js