作用

定义对象的属性
- 修改一个已有的属性，或添加一个新的属性
- 默认新增的属性，不可删、不可写、不可枚举

参数

obj 目标对象
prop 想定义的属性名
descriptor 配置集合(一个对象)，对这个属性的描述(配置)

特性

默认用 Object.defineProperty 定义的属性不可修改、不可枚举、不可删除

function defineProperty() {
  var _obj = {};

  // 定义单个属性
  Object.defineProperty(_obj, 'a', {
    value: 1
  }); // 返回 _obj, 但一般不直接赋值，return目标对象就好了

  // 同时定义多个属性
  Object.defineProperties(_obj, {
    b: {
      value: 2
    },
    c: {
      value: 3
    }
  });
  return _obj;
}

const obj = defineProperty();

obj.a = 10;
console.log(obj.a); // 1 // 属性值不可修改

for (const key in obj) {
  console.log(key + ': ' + obj[key]);
  // 属性也不可枚举
}

delete obj.a; // 不可被删除
console.log(obj); // { a: 1, b: 2, c: 3 }

writeable 可修改、enumerable 可枚举、configurable 可配置（一般用作可删除）

function defineProperty() {
  var _obj = {};

  Object.defineProperties(_obj, {
    a: {
      value: 1,
      writable: true, // 可修改
      enumerable: true, // 可枚举
      configurable: true, // 可操作的（一般指删除）
    },
    b: {
      value: 2
    }
  });
  return _obj;
}

const obj = defineProperty();

obj.a = 10;
obj.b = 5;

console.log(obj); // { a: 10, b: 2 }
// a被改了，b没有

for (const key in obj) {
  console.log(key + ': ' + obj[key]);
}
// 只打印 a: 10 ，不打印 b

delete obj.a; // 此时可删除a了
console.log(obj); // { b: 2 }

getter、setter

数据劫持

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>0</p>
  <script src="./text.js"></script>
</body>
</html>

function defineProperty() {
  var _obj = {};

  var a = 1;

  Object.defineProperties(_obj, {
    a: {
      get() {
        return '"a"\\'s value is ' + a + '.';
      },
      set(newVal) {
        console.log('The value "a" has been designed a new value "' + newVal + '".');
        var oP = document.querySelector('p');
        oP.innerText = newVal;
      }
    }
  });
  return _obj;
}

const obj = defineProperty();
console.log(obj.a);
obj.a = 233;

Untitled

function defineProperty() {
  var _obj = {};

  var a = 1;

  Object.defineProperties(_obj, {
    a: {
      get() {
        return a;
      },
      set(newVal) {
        a = newVal;
      }
    }
  });
  return _obj;
}

const obj = defineProperty();
console.log(obj.a);
obj.a = 233;
console.log(obj.a);

当给属性设置了 setter、getter 后，不允许设置 value 和 writeable

Object.defineProperties(_obj, {
  a: {
    // value: 1,
    // writable: true,
    get() {
      return a;
    },
    set(newVal) {
      a = newVal;
    }
  }
});

Untitled