ECMAScript5之Object
在ECMAScript5中对Object新增的些方法,以前没注意的同志们,嘻嘻,下面我们再一起来边看边学。
| 1、Object之create |
Create单词意为创造嘛,作为Object的静态方法,不言而喻那当然是创建对象呗。
谁的对象呢?
当然不是我的。。。
好吧,Object.create(prototype,descriptors)是创建一个具有指定原型且可选择性地包含指定属性的对象并返回。
纳尼,什么意思?
我们一起demo下呗。
<!DOCTYPE html>
<head>
<title>create</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
var newObj = Object.create(null,{
/*自带name,age属性*/
name: {
value: 'Monkey'
},
age: {
value: 24
}
});
console.log(newObj.name);
console.log(newObj.age);
//输出为null:原因是我们通过Object.create创建了一个null原型的对象
//http://www.cnblogs.com/giggle/p/5208199.html
console.log(Object.getPrototypeOf(newObj));
</script>
</body>
</html>

下面是Object.create具体讲解:
|
Object.create( prototype, descriptors ) |
|
|
prototype |
必须。要用作原型的对象。可为null |
|
descrioptors |
该对象的属性。 “数据属性”可获取且可设置值的属性。数据属性描述符包含value特性,以及writable、enumerable和configurable特性。若未指定最后三个特性,则它们的默认值是false。 |
|
返回值 |
一个具有指定的内部原型且包含指定的属性的新对象 |
注:用Object.create创建对象时,descriptors一定要是“数据属性”哦!!
什么意思。
我们再来写个demo,看看
<!DOCTYPE html>
<head>
<title>create</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
var newObj = Object.create(null,{
//这里我没有按照着name:{}这种格式,而是普通格式
name: 'Monkey',
age: 24
});
//下面会报错滴
console.log(newObj.name);
console.log(newObj.age);
</script>
</body>
</html>
运行上面的代码,chrome下看看

大伙看见上面报的错了么。切记切记
| 2、Object之defineProperty |
在上面大家不是看见Object.create方法么,其实这是核心哦。下面的都是辅助它的呢。
比如这个defineProperty,其实就是将属性添加到对象,或修改对象的现有属性。
|
Object.defineProperty(object, propertyName, descriptor) |
|
|
object |
必须。在其上添加新属性或修改已有属性。 |
|
propertyName |
必须。属性名 |
|
descriptor |
又是它。描述属性的 |
|
返回值 |
已修改的对象 |
Demo一下:
<!DOCTYPE html>
<head>
<title>defineProperty</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
var obj = Object.create(null);
//利用defineProperty为obj对象添加一个newDataProperty属性
Object.defineProperty(obj,"newDataProperty",{
value:'Monkey',
writable:true
});
console.log(obj.newDataProperty);
</script>
</body>
</html>

| 3、Object之defineProperties |
在上面我们看见了Object.defineProperty是添加或修改一个属性,这个嘛,从单词就知道咯,复数嘛,就是添加或修改一个或多个属性到对象咯。
|
Object.defineProperties(object,descriptors) |
|
|
object |
必须。对其添加或修改的属性对象 |
|
descriptors |
必须。包含一个或多个描述对象的JavaScript对象。 |
|
返回值 |
已修改的对象 |
<!DOCTYPE html>
<head>
<title>defineProperties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
var obj = Object.create(null);
//利用defineProperties为obj对象添加两个新属性
Object.defineProperties(obj,{
name:{
value:'Monkey'
},
age: {
value:24
}
});
console.log(obj.name);
console.log(obj.age);
</script>
</body>
</html>

| 4、Object之getOwnPropertyDescriptor |
这个静态方法就是,获取指定对象自身属性的描述符。而不是从对象的原型继承的哦。
|
Object.getOwnPropertyDescriptor(object,propertyname) |
|
|
object |
必须。访问属性的对象 |
|
propertyname |
必须。属性名 |
|
返回值 |
属性描述符 |
<!DOCTYPE html>
<head>
<title>getOwnPropertyDescriptor</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
//通过Object.create创建一个对象
var obj = Object.create(null,{
name:{
value:'Monkey',
writable:true
}
});
//获得name的描述对象
var descriptor = Object.getOwnPropertyDescriptor(obj,'name');
console.log(descriptor);
</script>
</body>
</html>

从上面可以看出Object.getOwnPropertyDescriptor的确是返回的属性的描述信息对象哦。
| 5、Object之getOwnPropertyNames |
返回对象自己的属性名称。是对象自己的,而不是继承的哦。
|
Object.getOwnPropertyNames(object) |
|
|
object |
必须。返回属于该对象的所有属性名 |
|
返回值 |
包含对象自己属性的名称 |
<!DOCTYPE html>
<head>
<title>getOwnPropertyNames</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function Fn(name,age){
this.name = name;
this.age = age;
this.fn1 = function(){
console.log(this.name+" "+this.age);
};
}
Fn.prototype.fn2 = function(){
console.log(this.name);
};
Fn.prototype.attr1 = this.name;
obj = new Fn('Monkey',24);
/*
从上面的代码可知:obj自己的对象为name,age,fn1
继承的为fn2,attr1
*/
console.log(Object.getOwnPropertyNames(obj));
</script>
</body>
</html>

ECMAScript5之Object的更多相关文章
- ECMAScript5之Object学习笔记(一)
随着IE的逐步追赶,目前到IE11已经能够很好的支持ECMAScript5标准了,其他的现代浏览器像firefox,chrome,opera就更不用说了. 再加上nodejs使得javascript在 ...
- ECMAScript5之Object学习笔记(三)
第三部分继续... Object.getOwnPropertyDescriptor(obj, prop) 获取一个对象的属性描述符 根据"Own"这个词我们可以猜到,prop只能是 ...
- ECMAScript5之Object学习笔记(二)
继续第二部分 Object.freeze(obj) 看字面意思就是“把一个对象冻结”. 下面我们来看个简单的例子以作说明: // a person instance var person = { na ...
- ECMAScript5的其它新特性
之前两篇博客 ECMAScript5 Object的新属性方法,ECMAScript5 Array新增方法,分别介绍了ECMAScript5对Object和Array的拓展,这两个对象最常用,而且改动 ...
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
- JS和JQuery的总结
JS部分 一, 词法结构 区分大小 注意://单行 /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...
- 读《编写可维护的JavaScript》第11章总结
这周也是拿到了同程的offer,从此走上了前端之路!感谢我的贵人们.再次纪念一下~! 第11章 不是你的对象不要动 11.1 什么是你的 你的对象:当你的代码创建了这些对象或者你有职责维护其他人的代码 ...
- 《JavaScript高级程序设计》学习笔记(5)——面向对象编程
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...
- js的原型模式
以下内容来自<JavaScript高级程序设计>第三版 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所 ...
随机推荐
- 对Hibernate的理解
---恢复内容开始--- 一.面向对象设计的软件内部运行过程可以理解成就是不断创建各种新对象,建立对象之间的关系,调用对象的方法来改变各个对象的状态和对象消亡的过程.不管程序运行的过程和操作怎么样,本 ...
- 【Silverlight】打开Silverlight程序报错,"未找到导入的项目......请确认<Import>声明中的路径正确,且磁盘上存在该文件"
在打开Silverlight程序时,报错(如图所示),程序使用的是Visual Studio 2013和最新的Silverlight版本(Silverlight5). 然后我在网上找了下说:Silve ...
- [Android] 多重使用Fragment 中的onFragmentInteraction
新建的一个Fragment,被一个Activity使用,那么这个Activity需要继承一个接口: public class MainActivity extends Activity impleme ...
- Smart3D系列教程3之 《论照片三维重建中Smart3D几个工作模块的功能意义》
[摘要] 近年来,倾斜摄影测量技术是国际测绘遥感领域近年发展起来的一项高新技术,利用照片进行三维重建成为一项关键性的技术.Smart3D软件,是照片三维重建主流软件之一,本文将就Smart3D建模软件 ...
- >hibernate的四种状态
hibernate的四种状态 1.临时状态 与数据库中没有相对应的数据,也不在session的管理之中,一般是新new出来的对象 2.持久化状态 对象在session的管理中,最后会在事务提交后,在数 ...
- Excel表格数据导入到SQLServer数据库
转载:http://blog.csdn.net/lishuangzhe7047/article/details/8797416 步骤: 1,选择要插入的数据库--右键--任务--导入数据 2,点击下一 ...
- form data和request payload的区别
HTML <form> 标签的 enctype 属性 在下面的例子中,表单数据会在未编码的情况下进行发送: <form action="form_action.asp&qu ...
- 爬虫初探(2)之requests
关于请求网络,requests这个库是爬虫经常用到的一个第三方库. import requests url = 'http://www.baidu.com' #这里用get方法用来请求网页,其他还有p ...
- 浅谈Js对象的概念、创建、调用、删除、修改!
一.我们经常困惑,对象究竟是什么,其实这是一种思维,一种意识上的东西,就像我们都说 世界是有物质组成的道理一样,理解了下面的几句话!对象也不是那么抽象! 1.javascript中的所有事 ...
- IOS第三天-新浪微博 - 版本新特性,OAuth授权认证
*********版本新特性 #import "HWNewfeatureViewController.h" #import "HWTabBarViewController ...