如何自定义属性的特性?

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

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

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

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

代码演示:

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

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

代码演示如下:

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

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

  1. <script>
  2. //如果用自定义Object.defineProperty方式来自定义属性的话,设置三大属性为true时,看看以下情况又会如何
  3. function Foo(){}
  4. Foo.prototype.age = 22
  5. var obj = new Foo()
  6. obj.name = "ziksang"
  7. Object.defineProperty(obj,"telephone",{
  8. value:15921848427,
  9. writable:true,
  10. enumerable:true,
  11. configurable:true//这个语句的意思就是在obj对象上创建了一个telephone属性,设定它的值为15921848427,对它的三大属性都设为true
  12. })
  13. console.log(obj.telephone) //因为上面自定义时赋值为15921848427,所以获取值为159....
  14. obj.telephone = 110 //此处我修改其属性值
  15. console.log(obj.telephone) //结果输出结果还是110 因为writable是为true ,所以是可修改的
  16. for(var p in obj){ //此处输出结果为 name,telephone,age 因为用for in枚举的是对象自身属性和原型上的属性,为什么没有telephone呢?因为此时obj对象上属性的特性enumerable也是默认false
  17. console.log(p)
  18. }
  19. console.log(Object.keys(obj)) //此处输出结果为name,telephone因为用object.keys枚举的是对象自身的属性
  20. delete obj.telephone; //删除telephone属性
  21. console.log(obj.telephone) //因为自定义的属性特configurable为false 所以是可以删除的
  22.  
  23. //对象上的原型也可以用此方法定义属性
  24. Object.defineProperty(Foo.prototype,"addr",{
  25. value:"上海",
  26. writable:true,
  27. enumerable:true,
  28. configurable:true//对象原型上自定义一个属性addr 三大特性都为true
  29. })
  30. console.log(obj.addr); //=>上海
  31. Foo.prototype.addr = "北京"
  32. console.log(obj.addr)//因为writable设为true,所以可以修改原型的属性,所以输出是北京
  33. for( var k in obj){ //=>name,age,addr 因为上面addr的enumerable为true,所以也是可以枚举的
  34. console.log(k)
  35. }
  36. delete Foo.prototype.addr //=删除对象原型属性
  37. console.log(obj.addr) //=>undefined 因为对象原型上属性特性configurable为true,所以是可删除的
  38. </script>

再来深入了解configurable配置项.

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

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

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

  1. <script>
  2. //如果用自定义Object.defineProperty方式来自定义属性的话,设置三大属性为true时,看看以下情况又会如何
  3. function Foo(){}
  4. Foo.prototype.age = 22
  5. var obj = new Foo()
  6. obj.name = "ziksang"
  7. Object.defineProperty(obj,"telephone",{
  8. value:15921848427,
  9. writable:false,//如果把configurable设为true,其它设为false时
  10. enumerable:false,
  11. configurable:true
  12. })
  13. Object.defineProperty(obj,"telephone",{
  14. writable:true, //再把writable 和enumerable再重新定义
  15. enumerable:true
  16. }) //以下都会返回结果,因可配置的特性configurable设为true,所以其它两个物性都可以从新定义为true
  17. for(var p in obj){ //=>name,age ,telephone
  18. console.log(p)
  19. }
  20. console.log(Object.keys(obj)) //=>name,telephone
  21. obj.name = "博客园"
  22. console.log(obj.name) //=>博客园
  23. </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. 推荐一个很好的富文本web编辑器UEditor

    前天产品提了一个编辑器的bug,本人找是找到了问题的症结,就是不好改.框架是压缩兼混淆后的代码.查一下,好多年前的框架... 咨询了一个同事有关旧框架的事情,他也建议我升级编辑器并帮忙帮我找了UEdi ...

  2. Socket程序中的Error#10054错误

    近期使用winSock做的一个网络项目中,使用TCP+Socket连接编写的一个多线程的网络程序,功能是client负责不断地向server端发送数据,服务端负责接收数据.client是一个DLL,服 ...

  3. C# winform如何在textbox中判断输入的是字母还是数字?

    1.用正规式using System.Text.RegularExpressions; string pattern = @"^\d+(\.\d)?$";if(Text1.Text ...

  4. LVM物理卷命令

    1. 物理卷命令  一般维护命令:  #pvscan //在系统的全部磁盘中搜索已存在的物理卷  #pvdisplay 物理卷全路径名称 //用于显示指定物理卷的属性. #pvdata 物理卷全路径名 ...

  5. NVMe 与 AHCI

    http://elf8848.iteye.com/blog/1731274 AHCI: NCQ技术,600MB/S,一个队列,每个队列32个指令 NVME:65000个队列,每个队列65000指令,3 ...

  6. CocoaPods导入第三方库头文件自动补齐

    使用了一段时间CocoaPods来管理Objective-c的类库,方便了不少.但是有一个小问题,当我在xcode输入import关键字的时候,没有自动联想补齐代码的功能,需要手工敲全了文件名,难以适 ...

  7. Vim程序编辑器

    Vim的三种模式: 1) 一般模式 以 vi 打开一个档案就直接进入一般模式了(这是默认的模式).在这个模式中, 你可以使用『上下左右』按键来移动光标,你可以使用『删除字符』或『删除整行』来处理档案内 ...

  8. log4j的properties详细配置,分级输出日志文件

            log4j是很常用的日志类包,在此做一下配置的记录 加载jar包和properities配置文件             将commons-logging.jar和logging-lo ...

  9. Spring定时任务,Spring4整合quartz2.2,quartz-scheduler定时任务

    Spring4整合quartz2.2,quartz-scheduler定时任务,Spring定时任务 >>>>>>>>>>>>& ...

  10. spring计划任务,springMvc计划任务,Spring@Scheduled,spring定时任务

    spring计划任务,springMvc计划任务,Spring@Scheduled,spring定时任务 >>>>>>>>>>>> ...