ECMAScript的属性类型

定义只有内部才能使用的特性,描述了属性的各种特征。是为实现JavaScript引擎用的。因此在JS中不能直接访问它们。

1.数据属性

  • [[Configurable]]表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。(不可配置)
  • [[Enumerable]]表示能否通过for-in循环返回属性。
  • [[Writable]]表示能否修改属性的值。
  • [[Value]]包含这个属性的数据值。

要修改属性默认的特性,必须使用ECMAScript5的Object.defineProperty(属性所在的对象,属性的名字,描述符对象)方法。其中描述符对象必须是configurable、enumerable、writeable、value。设置其中一个或多个值,可以修改对应的特性值。

var person = {
  name: 'Nichole'
};

Object.defineProperty(person, "name", {
  writable: false, // 设置属性不可修改
  value: 'Bubble'
});

console.log(person.name); // Bubble
person.name = 'Hello';
// 非严格模式下,该操作被忽略;严格模式下,会导致抛出错误。
console.log(person.name); // Bubble 

ECMAScript的属性类型_第1张图片
严格模式下抛出错误

可以多次调用 Object.defineProperty()修改同一属性,但在把 configurable特性设置为false后就会有限制了。

2.访问器属性

访问器属性不包含数据值,它包含一对getter()setter()函数。在读取访问器属性时,会调用getter(),这个函数负责返回有效的值。在写入访问器属性时,会调用setter()并传入新值,这个函数负责如何处理数据。访问器属性有如下特性:

  • [[Configurable]]
  • [[Enumerable]]
  • [[Get]]在读取属性时调用的函数,默认值为undefined
  • [[Set]]在写入属性时调用的函数,默认值为undefined

访问器属性不能直接定义,必须使用Object.defineProperty()来定义。

var person = {
  _name: 'Nichole',
  count: 0
};

Object.defineProperty(person, 'name', {
  get: function () {
    return this._name;
  },
  set: function (newValue) {
    this._name = newValue;
    this.count += 1;
  }
});

person.name = 'Bubble';
console.log(person._name) // Bubble
console.log(person.count) // 1

person对象有两个默认属性:_namecount。而访问器属性name则包含一个getter()和一个setter()。
使用访问器属性的常见方式即:设置一个属性的值会导致其他属性发生变化。

  1. 如果只指定getter意味着属性不能写;
  2. 如果只指定setter意味着属性不能读。

之前的浏览器不支持的使用,使用的是__defineGetter____defineSetter__

定义多个属性:

var person = {
  _name: 'Nichole',
  count: 0
};

Object.defineProperties(person, {
    _name: {
      writable: true,
      value: 'Bubble'
    },
    count: {
      writable: true,
      value: 12
    },
    name: {
      get: function () {
        return this._name;
      },
      set: function (newValue) {
        this._name = newValue;
        this.count++;
      }
    }
  }
);
person.name = 'HAH';
console.log(person._name) // HAH
console.log(person.count) // 13

3.读取属性的特性

Object.getOwnPropertyDescriptor(person, '_name').configurable

4.扩展思考:

Vue动态数据绑定如何实现?

你可能感兴趣的:(ECMAScript的属性类型)