如何自定义属性的特性?

用对象.属性的特性和自定义的属性的特性有什么区别?

它的四大特性 writable   enumerable   configable   有什么区别?

先预习一个用对象.属性定义 ,属性的四大特性是以什么方式呈现的。

这时个属性的三大特性默认值都为true。

代码演示:

 <script>
//用对象.属性定义的属性,它的三大特性都为true
function Foo(){}
Foo.prototype.age = 22
var obj = new Foo()
obj.name = "ziksang"
obj.addr = "上海"
obj.telephone = 15921848427
console.log(obj.name)//=>ziksang
obj.name = "博客园" //修改了name属性的值
console.log(obj.name) //=>博客园 因为此时定义的方式 writable为true,所以可以修改name的属性值
for( var p in obj){ //因为此时定义的方式,enumerable为true, 此时也是可以枚举的,
console.log(p) //用for in枚举可以把对象原型上的属性也枚举出来,因为原型上的属性也是用此定义属性,所以他的enumerable也为true
}
console.log(Object.keys(obj)) //用Object.keys(obj)方式枚举只能枚举对象自有的属性
delete obj.addr //删除对象上addr属性
console.log(obj.addr) //=>undefined 因为用此定义时他的configurable为true,所以是可以删除对象的
Foo.prototype.age = 33 //对于三大特性,我对原型上的属性只做了一个修改的特性,因为原型上定义的方式如果也是对象.属性定义的话,跟对象属性的三大特性一样,在此就不一一举例了
console.log(Foo.prototype.age) //=>33
</script>

     如何用Object.defineProperty自定义属性的特性

 语法 :

 Object.defineProperyty(obj,prop,descriptor)

 obj: 需要定义的对象

 prop:需要定义 或修改的属性名

 descriptor:属性定义或修改的属性描述

 该方法允许精确添加或修改对象的属性,正常属性添加通过赋值来创建并显示在属性枚举中(for in 循环或Object.keys()方法),这种 方式添加的属性值可能被改变,也可能会被删除。该方法允许改变这些额外细节默认设置。

configureable:当且仅当这个属性描述符值为true时,该属性可能会改变,也可能会被从相应的对象删除。默认为false.

enumerable:true当且仅当该属性出现在相应的对象枚举属性中。默认为false.

value:与属性有关的值。可以是任何有效的javascript值。默认为undefined.

writable:true当且仅当可能用赋值运算符改变与属性相关的值。默认为false.

第一种方式,当不设定三大属性时?

代码演示如下:

 <script>
//如果用自定义Object.defineProperty方式来自定义属性的话,没有设置三大属性为true时,默认为false,看看在默认情况下会如何
function Foo(){}
Foo.prototype.age = 22
var obj = new Foo()
obj.name = "ziksang"
Object.defineProperty(obj,"telephone",{
value:15921848427 //这个语句的意思就是在obj对象上创建了一个telephone属性,设定它的值为15921848427,对它的三大属性没有任何设置,此时三大属性为默认false
})
console.log(obj.telephone) //因为上面自定义时赋值为15921848427,所以获取值为159....
obj.telephone = 110 //此处我修改其属性值
console.log(obj.telephone) //结果输出结果还是159....因为writable是默认值false,所以是不可修改的
for(var p in obj){ //此处输出结果为 name,age 因为用for in枚举的是对象自身属性和原型上的属性,为什么没有telephone呢?因为此时obj对象上属性的特性enumerable也是默认false
console.log(p)
}
console.log(Object.keys(obj)) //此处输出结果为name,因为用object.keys枚举的是对象自身的属性
delete obj.telephone; //删除telephone属性
console.log(obj.telephone) //因为自定义的属性特性默认值为false 所以是不可以删除的 //对象上的原型也可以用此方法定义属性
Object.defineProperty(Foo.prototype,"addr",{
value:"上海" //对象原型上自定义一个属性addr 三大特性都为默认值
})
console.log(obj.addr); //=>上海
for( var k in obj){ //=>name,age 因为上面addr的enumerable默认值是false,所以也是不可以枚举的
console.log(k)
}
delete Foo.prototype.addr //=删除对象原型属性
console.log(obj.addr) //=>上海 因为对象原型上属性特性configurable默认为false,所以是不可删除的
</script>

第二种方式,当三大属性都为true时,又有什么不同?

 <script>
//如果用自定义Object.defineProperty方式来自定义属性的话,设置三大属性为true时,看看以下情况又会如何
function Foo(){}
Foo.prototype.age = 22
var obj = new Foo()
obj.name = "ziksang"
Object.defineProperty(obj,"telephone",{
value:15921848427,
writable:true,
enumerable:true,
configurable:true//这个语句的意思就是在obj对象上创建了一个telephone属性,设定它的值为15921848427,对它的三大属性都设为true
})
console.log(obj.telephone) //因为上面自定义时赋值为15921848427,所以获取值为159....
obj.telephone = 110 //此处我修改其属性值
console.log(obj.telephone) //结果输出结果还是110 因为writable是为true ,所以是可修改的
for(var p in obj){ //此处输出结果为 name,telephone,age 因为用for in枚举的是对象自身属性和原型上的属性,为什么没有telephone呢?因为此时obj对象上属性的特性enumerable也是默认false
console.log(p)
}
console.log(Object.keys(obj)) //此处输出结果为name,telephone因为用object.keys枚举的是对象自身的属性
delete obj.telephone; //删除telephone属性
console.log(obj.telephone) //因为自定义的属性特configurable为false 所以是可以删除的 //对象上的原型也可以用此方法定义属性
Object.defineProperty(Foo.prototype,"addr",{
value:"上海",
writable:true,
enumerable:true,
configurable:true//对象原型上自定义一个属性addr 三大特性都为true
})
console.log(obj.addr); //=>上海
Foo.prototype.addr = "北京"
console.log(obj.addr)//因为writable设为true,所以可以修改原型的属性,所以输出是北京
for( var k in obj){ //=>name,age,addr 因为上面addr的enumerable为true,所以也是可以枚举的
console.log(k)
}
delete Foo.prototype.addr //=删除对象原型属性
console.log(obj.addr) //=>undefined 因为对象原型上属性特性configurable为true,所以是可删除的
</script>

再来深入了解configurable配置项.

当configurable为flase时 对属性从定义其特性时writable,enumerable的情况如何?

 <script>
//如果用自定义Object.defineProperty方式来自定义属性的话,设置三大属性为true时,看看以下情况又会如何
function Foo(){}
Foo.prototype.age = 22
var obj = new Foo()
obj.name = "ziksang"
Object.defineProperty(obj,"telephone",{
value:15921848427,
writable:false,//如果把三大特性都设为false
enumerable:false,
configurable:false
})
Object.defineProperty(obj,"telephone",{
writable:true, //再把writable 和enumerable再重新定义
enumerable:true
}) //结果以下都报错,返回空数组,原因是configurable是一个配置项,当配置项为false时,其它两个特性则不能被重新定义
for(var p in obj){
console.log(p)
}
console.log(Object.keys(obj))
obj.name = "博客园"
console.log(obj.name)
</script>

当configurable为true时 对属性从定义其特性时writable,enumerable的情况如何?

 <script>
//如果用自定义Object.defineProperty方式来自定义属性的话,设置三大属性为true时,看看以下情况又会如何
function Foo(){}
Foo.prototype.age = 22
var obj = new Foo()
obj.name = "ziksang"
Object.defineProperty(obj,"telephone",{
value:15921848427,
writable:false,//如果把configurable设为true,其它设为false时
enumerable:false,
configurable:true
})
Object.defineProperty(obj,"telephone",{
writable:true, //再把writable 和enumerable再重新定义
enumerable:true
}) //以下都会返回结果,因可配置的特性configurable设为true,所以其它两个物性都可以从新定义为true
for(var p in obj){ //=>name,age ,telephone
console.log(p)
}
console.log(Object.keys(obj)) //=>name,telephone
obj.name = "博客园"
console.log(obj.name) //=>博客园
</script>

js 中对象属性特性的描述的更多相关文章

  1. js 中对象属性特性2

    对象的存储描述: get   和   set 方法 <script> var obj ={ get age(){ return 22 }, set age(value){ console. ...

  2. js 中对象--属性相关操作

    查询属性: 可以用 对象.属性 来查询属性和属性方法               或者                    对象[“属性”]  来查询属性和属性方法 演示代码: <script ...

  3. js 中对象属性的特性

    数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 4个描述的行为特性: writable  表示能否修改属性的值.默认为true Enumerable 表示能否过过for in循 ...

  4. js 中对象的特性

    用Object.definedproperties 一次性添加或修改多个属性的特性和值. <script> var obj ={} Object.defineProperties(obj, ...

  5. js中对象的一些特性,JSON,scroll家族

    一.js中对象的一些特性 对象的动态特性 1.当对象有这个属性时,会对属性的值重写 2.当对象没有这个属性时,会为对象创建一个新属性,并赋值 获得对象的属性的方式 为元素设置DOM0级事件 二.JSO ...

  6. js中迭代元素特性与DOM中的DocumentFragment类型 笔记

    JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...

  7. Python中的属性访问与描述符

    Python中的属性访问与描述符 请给作者点赞--> 原文链接 在Python中,对于一个对象的属性访问,我们一般采用的是点(.)属性运算符进行操作.例如,有一个类实例对象foo,它有一个nam ...

  8. 【转载】js中对象的使用

    原文链接:http://www.jb51.net/article/90256.htm[侵删] 简单记录javascript中对象的使用 一.创建对象 //创建一个空对象 var o={}; //创建一 ...

  9. [转]JS中对象与字符串的互相转换

    原文地址:http://www.cnblogs.com/luminji/p/3617160.html 在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: thr ...

随机推荐

  1. weekend110(Hadoop)的 第二天笔记

    (2015年1月11日) 课程目录 01-NN元数据管理机制 02-NN工作机制2 03-DN工作原理 04-HDFS的JAVA客户端编写 05-filesystem设计思想总结 06-hadoop中 ...

  2. Android基于XMPP Smack Openfire下学习开发IM(六)总结

    不管学习什么都应该总结 这里我把关于Xmpp的一些方法整理到一个工具类中了 我就分享给大家 XmppConnection.java package com.techrare.utils; import ...

  3. Android——Cocosd2d-x手机游戏开发学习思路

    手机APP应用如雨后春笋般冒了出来,而在众多的APP应用中,游戏占据了半壁江山.它丰富着人们的业余生活,增进了人们之间的沟通交流.也有许多开发的朋友对游戏开发情有独钟,他们不止是享受着有很多的人们去下 ...

  4. jsp中如何获得url路径和绝对路径

    jsp中如何获得url路径 request.getHeader("referer") JSP中获得当前应用的相对路径和绝对路径 根目录所对应的绝对路径:request.getReq ...

  5. JavaScript实现拖拽预览,AJAX小文件上传

    本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. <div  id="drop_area" style="bord ...

  6. 是否以某字符串结尾 是否以某字符串开始 是否是整数 裁减字符串空格 是否是浮点数 是否所有字符为数字类型 是否为空 是否是EMAIL 是否是电话号码 身份证号码验证-支持新的带x身份证 日期验证

    /* 1.是否以某字符串结尾 endsWith(theStr,endStr) @param theStr:要判断的字符串 @param endStr:以此字符串结尾 @return boolean; ...

  7. 后台action处理数据传递给前台界面

    package com.renmai.util; import java.io.IOException; import javax.servlet.http.HttpServletResponse; ...

  8. [TypeScript] Configuring TypeScript Which Files to Compile with "Files" and "OutDir"

    This lesson shows how to configure the .tsconfig so you only compile the .ts files you want. It then ...

  9. 如何使用JCA (J2EE 连接器架构)实现企业应用--转载

    JCA (J2EE 连接器架构,Java Connector Architecture)是对J2EE标准集的重要补充.因为它注重的是将Java程序连接到非Java程序和软件包中间件的开发.连接器特指基 ...

  10. MVVM架构的一次实践,重写iOS头条客户端

    前言: 一个iOS头条APP,使用MVVM架构实现,代码中有注释,封装了AFN网络请求,解媾代码,使用起来非常方便.用最经典的TableView展示,后续不断更新,喜欢就star或fork一下,有问题 ...