Object.assign和Object.defineProperty

目录

1.Object.assign() 

定义

语法

示例

总结

2.Object.defineProperty

1.定义

 2.参数

3.set和get（即存取器描述：定义属性如何被存取），

---

1.Object.assign() 

定义

Object.assign()方法用于从一个或多个对象复制所有可枚举的属性值更多的源对象到目标对象。对象是通过引用分配和复制的。它将返回目标对象。

语法

Object.assign(target, sources)

target：目标对象。

sources：源对象(可多个)。

括号中的第一个参数是目标对象，后面的全都是源对象。

常结合展开运算符使用，即Object.assign(target, ...sources)

示例

const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object3= {
  g: 1,
  h: 2,
  i: 3
};
const object2 = Object.assign({c: 4, d: 5}, object1);
const object4 = Object.assign({g: 34, h: 25}, object3);
console.log(object2.c, object2.d);
console.log(object4.g, object4.h);

输出值为3,5,1,2，可见，并不会改变目标对象中的属性值

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const source2 = { c: 5, d: 6 };
 
const currentTarget = Object.assign(target, source, source2);
console.log(currentTarget);

输出结果为 {a: 1, b: 3, c: 5, d: 6}，可见，后面的属性名和属性值会将前面的覆盖掉。

总结

1、如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

2、Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

3、注意目标自身也会改变

4.如果只有一个参数，Object.assign会直接返回该参数 

const target = { a: 1, b: 2 };
const currentTarget = Object.assign(target);
console.log(currentTarget);
//输出结果为 {a: 1, b: 2}

5.该参数不是对象会先转为对象，然后return;(undefined || unll 出现在target（源对象）位置无法转换为对象会报错) 

const currentTarget = Object.assign(10);
console.log(currentTarget);
//输出结果为 Number {10}

注意，Object.assign 不会在那些source对象值为 null 或undefined的时候抛出错误。 

6.其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。

2.Object.defineProperty

1.定义

Object.defineProperty会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

 2.参数

obj :  第一个参数就是要在哪个对象身上添加或者修改属性，即源对象。

prop : 第二个参数就是添加或修改的属性名。

descriptor： 第三个参数是配置项，一般是一个对象。

举一个简单例子：

let person = {
   name:"码农",
   age: 18
}
Object.defineProperty(person,'sex',{ value:"男" })
console.log(person)  // 打印结果为 {name:"码农", age: 18,sex: "男"}

 第三个参数descriptor一般是一个对象 ，这个配置项有6个常用的属性

let  person = {
  name:"码农",
  age: 18
}
Object.defineProperty(person,'sex',{
    value:"男",       //value，设置属性值
    enumerable:true,  //enumerable，控制属性是否可以枚举（是否可以被遍历），默认值是false
    writable:true,    //writable，控制属性是否可以被修改（重写），默认值是false
    configurable:true //configurable：控制属性是否可以被删除，默认值是false
})
console.log(person)

3.set和get（即存取器描述：定义属性如何被存取），

这两个属性是干嘛的？

注意：当使用了getter或setter方法，不允许使用writable和value这两个属性(使用会直接报错)

get 是获取值的时候的方法，类型为 function ，获取值的时候会被调用，不设置时为undefined

set 是设置值的时候的方法，类型为 function ，设置值的时候会被调用，不设置时为undefined

get或set不是必须成对出现，任写其一就可以，我们通过代码来看看 

let number = 18
let person = {
  name:'码农',
  sex:'男',
}
 
Object.defineProperty(person,'age',{
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
   get(){
      console.log('有人读取age属性了')
      return number
   },
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
   set(value){
      console.log('有人修改了age属性，且值是',value)
      number = value
   }
})
console.log(person)

 

get：当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值，

set：当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值，

可以实现一个数据的联动效果。