js基础之对象

发表于 分类于 阅读次数：

对象的属性类型

对象的属性有一些特性值，这些特征值是为了实现javascript引擎用的，所以是内部才用到的特性，用[[]]表示。
这些特性分为两种：数据属性和访问器属性

  1. 数据属性：可以读取或写入的值，有四个特性：
  • [[Configurable]]: 能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性。默认是true。一句话就是能否修改
  • [[Enumerable]]: 能否通过for-in循环返回属性，默认是true。是否可枚举
  • [[Writable]]: 能否修改属性的值。默认是true
  • [[Value]]: 包含这个属性的数据值。读取属性值就是读取的这个位置，写入也是。默认是undefined。

要修改上面这些特性，必须使用Object.defineProperty()方法，例如：

1
2
3
const obj = {
   name:  'Jhon'
}
1
2
3
4
5
6
Object.defineProperty(obj, 'name', { // 特性为小写，大写开头无效
   enumerable: false,
   value: 'Alice'
})

console.log(obj.name) // Alice
1
2
3
4
5
6
7
8
9
10
11
Object.getOwnPropertyDescriptor(obj, 'name')
// {value: "Alice", writable: true, enumerable: false, configurable: true}

这些特性默认是true，但是如果采用
Object.defineProperty(obj, 'age', {
  value: 18
})
得到的属性age，默认特性全部是false

Object.getOwnPropertyDescriptor(obj, 'age')
// {value: 18, writable: false, enumerable: false, configurable: false}
  1. 访问器属性：
  • [[Configurable]]: 能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性。默认是true。一句话就是能否修改
  • [[Enumerable]]: 能否通过for-in循环返回属性，默认是true
  • [[Get]]: 读取属性时调用的函数，默认返回undefined
  • [[Set]]: 写入属性时调用的函数，默认返回undefined
  • 设置getter和setter时不能同时设置数据属性Writable和Value
1
2
3
4
5
6
7
8
9
10
11
const obj = {};
Object.defineProperty(obj, 'name', {
  get() {
    return this.value
  },
  set(val) {
    this.value = 'This is ' + val;
  }
})
obj.name = 'Alice';
console.log(obj.name); // This is Alice

用法：

  • 双向绑定
1
Object.de