– 关注前端和node js,分享福利和心得!

使用Object.defineProperty添加新的属性或修改原有的属性

对象是由多个键值对组成的元素集合,定义对象可以用构造函数或者字面量的形式

let obj=new Object();//或者obj={} 
obj.name="张三"//添加属性
obj.say=function(){}//添加方法

除了这种方式添加属性外,还可以使用Object.defineProperty添加新的属性或修改原有的属性

Object.defineProperty

语法:

Object.defineProperty(obj,key,descriptor)

参数说明:

obj:必须。目标对象 key:必须。需要新增或者修改的属性名称 descriptor:必须。新增或者修改的属性所拥有的特性描述

返回值:

改造后的目标对象

针对属性,我们可以给这个属性设置一些特性,比如是否只读不能改写,是否可以删除,是否可以被for in或者Object.keys()遍历

给对象的属性添加特性描述,有两种方式:数据描述和存取器描述。

数据描述

当修改或者新增对象的某个属性时,给这个属性添加一些特性(属性)来描述

let obj={
    test:'hello'
}
//给对象已有的属性添加特性描述
Object.defineProperty(obj,'test',{
    configurable:true|false,
    enumerable:true|false,
    value:'属性值',
    writable:true|false
})
//给对象添加新属性并添加特性描述
Object.defineProperty(obj,'newKey',{
    configurable:true|false,
    enumerable:true|false,
    value:'属性值',
    writable:true|false
}),

数据描述中的属性都是可选的

value writable enumerable configurable
属性值,可以是任意类型,默认为undefined 属性的值是否可以被重写,true可以重写,false不能被重写,默认false 此属性是否可以被遍历(for in或者Object.keys()),true可以被遍历,false不能。默认为false 1、是否可以使用delete删除此属性。2、是否可以再次修改次属性的特性描述(writable,enumerable,configurable),true可以false不可以,默认为false。

提示:一旦使用Object.defineProperty给对象添加属性,如果不设置属性的特性描述,那么configurable,writable,enumerable都默认为false

var obj={}
Object.defineProperty(obj,'name',{})
obj.name//undefined

设置值
obj.name="张三"
obj.name//undefined 因为默认writable为false,不允许修改值

存取器描述

当使用存取器描述属性的特性时,可以设置以下特性属性

var obj={}
Object.defineProperty(obj,'newKey',{
    get:function(){}|undefined,
    set:function(){}|undefined,
    configurable:true|false,
    enumerable:true|false
})

当使用了get和set方法后,不允许再使用value和writable这两个属性。get和set方法不需要成对出现,如果不设置方法,则get和set的默认值为undefined

get set enumerable configurable
获取属性值的方法 设置属性值的方法 属性是否可以被遍历,默认false不可以 属性是否可以被删除或再次更改特性描述,默认false不可以
var obj={}
var initValue="hello"
Object.defineProperty(obj,'newKey',{
    get(){
        //当获取属性值的时候触发的函数
        return initValue;//一定要用中间变量转存一下
    },
    set:function(value){
        //当设置属性值的时候触发的函数,设置的新值通过参数value获取
        initValue=value
    },

})
obj.newKey//hello

obj.newKey="change value"
obj.newKey //change value

最新文章

    热门文章