Object.propertype()方法,属性描述符?

Object.defineProperty()

作用 :
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象
语法:
Object.defineproperty( object,‘ propName ’ ,descriptor);
参数详解:
object :要定义属性的对象,返回的也是
propName :要定义或修改的属性的名称。
descriptor:要定义或修改的属性描述符,属性描述符

属性描述符:

  1. value:包含这个属性的数据值。默认值为undefined。

  <script>
       var obj = {}
     //给obj添加name属性 使用了value描述符 
     Object.defineProperty(obj, "name", {
          value:"周一"//此时就给obj对象添加了name属性,描述添加了值为 周一,可读可修改
     })
     console.log(obj)//----->{name:"周一"}
   </script>      
  1. configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性,默认值为true。

 <script>
 	var p1={
 		name:"鱼"
 	}
 		//不可删除
 		Object.defineProperty(p1,"name",{
 		  configurable : false,
		})
		console.log(p1); //{ name: '鱼' }
		delete obj.name;
		console.log(p1); //{ name: '鱼' }

 		//不可修改
 		var obj ={}
      //给obj  name属性 使用了configurable描述符
      Object.defineProperty(obj, "name", {
        configurable: false, //为false,禁止配置
      })
      Object.defineProperty(obj, "name", {
        //!!!!!!!!!!!!!描述属性值,报错,因为configurable为false不可修改
        value: "周一", 
      })
      console.log(obj) //----->{name:"undefined"}
      //  注意:如果属性描述符有 writable 或 configurable 有一个为 true,则 value 也允许修改。
      var obj2 = {}
      //给obj  name属性 使用了configurable描述符
      Object.defineProperty(obj2, "name", {
        configurable: false, //为false,禁止配置
        writable:true,//强制设置属性可写
      })
      Object.defineProperty(obj2, "name", {
      //已强制设置属性可写,所以不会报错
        value: "周一", 
      })
      console.log(obj2)//----->{name:"周一"}
   </script>
  1. enumerable:表设置属性是否可枚举,即是否允许使用 for/in 语句或 Object.keys() 函数遍历访问,默认为 true。
   var obj = {}
      //给obj  name属性 使用了enumerable描述符
      Object.defineProperty(obj, "name", {
        value: "水煮鱼", //添加了描述符
        enumerable:false,//false设置属性不可枚举即不可被for in
      })
      for(var i in obj){
        console.log(i);//!!!!!无效果
      }
  1. writable:表示能否修改属性的值。默认值为true。
	  var obj = {}
      //给obj  name属性 使用了writable描述符
      Object.defineProperty(obj, "name", {
        value: "水煮鱼", //添加了描述符
        writable:false,//false设置属性不可修改
      })
      obj.name="周一"
      console.log(obj)//----->{name:"水煮鱼"}
  1. set():属性的 setter 函数,如果没有 setter,则为 undefined。当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。
  2. get():取值 getter 函数,默认为 undefined,当访问该属性时,会调用此函数,执行时不传入任何参数,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。
  <script>
       var obj = {
        fristName: "水煮",
        lastName: "鱼",
        age: 18,
      }
     
      Object.defineProperty(obj, "fullName", {
        // 当读取属性的时候自动调用,将函数的返回值作为fullName的属性值
        get() {
          //console.log(this);//----->此时的this指向obj
          return this.fristName + "-" + this.lastName
        },
        // 当修改了属性值的时候自动调用,用来监视属性值的变化,
        set(value) {
          //value-----obj.fullName 
          const arr=value.split('-')
          this.fristName=arr[0]
          this.lastName=arr[1]
        },
      })
      

      console.log(obj.fullName)//----->如我们所想 输出水煮—鱼
      obj.fristName = "麻辣"
      console.log(obj.fullName);//---->此时  打印出的是麻辣—鱼
      obj.fullName="糖醋-排骨"
      console.log(obj.fristName , obj.lastName);//糖醋  排骨
    </script>

!!!!!!!!!!!get和value不可同时使用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值