【javascript】Object.defineProperty()方法以及get和set的使用

Object.definProperty()方法用来给一个对象添加新属性,或者修改已有属性

举个例子：

const obj = {
  a: 3,
};

Object.defineProperty(obj, "a", {
  value: 4,
  writable: true, // 是否可以修改属性的值
  configurable: true, // 配置项是否可以修改,就是说writable和enumerable是否能够修改
  enumerable: true, // 是否可以枚举,就是说在遍历的时候能不能遍历出来
});

console.log(obj.a); // 4

通过这个例子可以看到Object.defineProperty（）这个方法接收3个参数，

第一个参数是要修改的对象，
第二个参数是要修改的对象中的某个属性，
第三个参数是一个函数。

第一个和第二个参数没啥说的，主要说下第三个参数，第三个参数是一个函数，里边有四个配置项（属性描述符）

1. value，它的值就是你将要修改的属性的值
2. writable， 是否只读，看下边代码，容易理解：

/**
*创建一个obj对象，并给a赋值3
*通过Object.defineProperty方法将a的值修改为4
*将writable的值改为false，让这个a的属性不能被修改
*之后试着将obj的a修改为5
*但是还是打印出4
*/
const obj = {
  a: 3,
};

Object.defineProperty(obj, "a", {
  value: 4,
  writable: false,
  configurable: true,
  enumerable: true,
});

obj.a = 5;
console.log(obj.a); // 4

3. configurable，这个属性决定了writable，configurable，enumerable这三个属性的值能否被配置，简单点理解就是如果configurable的值为true，那么它们三个的值就不能被修改，configurable的值默认是true
4. enumerable， 对象中的这个值能否被枚举，看下代码：

const obj = {
  a: 3,
};
// 给obj新增了一个b属性,并给他赋值为4,然后将enumerable的值改为false
Object.defineProperty(obj, "b", {
  value: 4,
  writable: true,
  configurable: true,
  enumerable: false,
});
// 这时候打印obj,发现并不能看到b:5
console.log(obj); //{ a: 5 }
//但可以通过obj.b访问到
console.log(obj.b); // 4


/**
 * enumerable为true的情况下打印：
 * console.log(obj); //{ a: 5, b: 4 }
 */

get和set

刚开始在网上搜索相关资料的时候，有时候会搜到getter和setter，当时还是有点迷的，其实getter和setter就是把值拿出来或者存进去，是一个概念，而get和set是方法，是执行这个概念的方法。拿下边这个代码举例：

// getter和setter
const obj = {
  a: 0,
  b: 1
}
//getter就是把a的值从obj里拿出来
console.log(obj.a);
//setter就是给obj的b赋值
obj.b = 3

再来具体看看get和set方法如何使用的

const obj = {
  a: 0,
  b: 1,
};

Object.defineProperty(obj, "c", {
  get() {
    this.b++;
    return this.a;
  },
  set(a) {
    this.c = a;
  },
});
// 给obj的a赋值就会触发a的set方法，这时候a的值就变为33
obj.a = 33
// 这时候访问了obj的c,会调用c的get方法,让b自增,并返回a的值,这时候c的值就是33
console.log(obj.c)
// 但需要注意的是,这时候并没有给c赋值，所以并没有触发c的set方法
// obj.c = 22
// 那么就会触发c的set方法,这时候给c赋值了，所以会访问c的set方法

get方法默认会在这个对象身上查找该属性,如果能找到,就会使用它,否则就会去这个对象的原型链(prototype)上去查找.如果还找不到,就会返回undefined