CPPAlien / JS-QA

前端知识问答
0 stars 0 forks source link

Object. defineProperty 的作用 #2

Open CPPAlien opened 5 years ago

CPPAlien commented 5 years ago
Object.defineProperty(obj, prop, desc)
Object.defineProperty(obj, "key" ,{
    configurable:true | false,   // 
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});

这个 key 可以为 obj 中已有属性,也可以为新属性,此时相当于新添加一个属性。


configurable

是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。

这个属性起到两个作用:

enumerable

此属性是否可以被枚举(使用for...in或Object.keys())。设置为true可以被枚举;设置为false,不能被枚举。默认为false。

writable

属性的值是否可以被重写。设置为true可以被重写;设置为false,不能被重写。默认为false。

value

属性对应的值,可以使任意类型的值,默认为undefined

存取器描述

当使用存取器描述属性的特性的时候,允许设置以下特性属性:

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

注意:当使用了getter或setter方法,不允许使用writable和value这两个属性

getter/setter 当设置或获取对象的某个属性的值的时候,可以提供getter/setter方法。

getter 是一种获得属性值的方法

setter是一种设置属性值的方法。

在特性中使用get/set属性来定义对应的方法。

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
    get:function (){
        //当获取值的时候触发的函数
        return initValue;    
    },
    set:function (value){
        //当设置值的时候触发的函数,设置的新值通过参数value拿到
        initValue = value;
    }
});
//获取值
console.log( obj.newKey );  //hello

//设置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value
注意:get或set不是必须成对出现,任写其一就可以。如果不设置方法,则get和set的默认值为undefined
也可以使用获取函数和设置函数
obj = {
  newKey: 'xxx',
  set newKey(value) {
  },
  get newKey() {
     return 'xxx'
  }
}

configurable和enumerable同上面的用法。

CPPAlien commented 3 years ago

Object.assign 浅拷贝

dest = {}
src = { a: {}}
Object.assign(dest, src)

console.log(dest.a === src.a)  // true