JavaScript ES5 数据属性与访问器属性详解

作者：半夏时间：2026-10-30 13:12:53浏览：143

本文详细解析JavaScript ES5中的两种属性类型：数据属性和访问器属性。通过Object.defineProperty和Object.defineProperties方法，可以精确控制属性的[[Configurable]]、[[Enumerable]]、[[Writable]]及[[Value]]等特性，并演示了getter/setter在访问器属性中的应用及特性读取方法。

JavaScript对象与属性基础

在JavaScript中，对象被视为无序属性的集合，这些属性可以包含基本值、其他对象或函数。通俗地说，可以将对象理解为一组名值对，其中值可以是数据或函数。

创建自定义对象通常有两种方式。第一种方式是创建一个Object实例，然后为其添加属性和方法，例如：


var person = new Object(); 
person.name = "Scott"; 
person.age = 24; 
person.sayName = function(){ 
  alert(person.name); 
}

第二种方式是使用对象字面量法，通常推荐采用这种方法来创建对象，例如：


var person = { 
  name: "Scott", 
  age: 24, 
  sayName: function(){ 
     alert(this.name);  
  } 
}

属性类型

JavaScript定义了两种不同的属性：数据属性和访问器属性。数据属性主要用于存储数据值，而访问器属性则用于执行get/set操作，不直接存储数据值。在ES5中，为了描述属性的各种特征，定义了特性（attribute）。在JavaScript中无法直接访问特性，因此将其置于双对方括号中，例如[[Enumerable]]。

数据属性及其特性

数据属性

数据属性主要通过四个特性来描述其行为：

1. [[Configurable]]：默认为true。它表示能否通过delete删除属性从而重新定义属性，能否修改属性特性，或者能否把属性修改为访问器属性；

2. [[Enumerable]]：默认为true。它表示能否通过for-in循环返回属性；

3. [[Writable]]：默认为true。它表示能否修改属性的值。

4. [[Value]]：默认值为undefined。它表示包含属性的数据值。读写属性值都从这个位置进行。

对于上面直接在person对象上定义的属性，它们的[[Configurable]]、[[Enumerable]]、[[Writable]]特性都被默认设置为true，而[[Value]]特性被设置为特定值。如果想要修改属性默认的特性，可以使用ES5提供的Object.defineProperty()方法，这个方法接收三个参数：属性所在对象、属性的名字和一个描述符对象。描述符对象只能包含上述四个特性的一个或多个。例子如下：


var person = { 
  name: "Scott"
} 
Object.defineProperty(person,"name",{ 
  writable:false; 
}) 
 
console.log(person.name);  //"Scott" 
person.name = "Evan"; 
console.log(person.name);  //"Scott"

将person对象name属性的特性writable设置为false，此属性的值为不可修改的，因此对该属性的复制操作会直接忽略。


var person = { 
  name: "Scott"
} 
Object.defineProperty(person,"name",{ 
  configurable:false; 
}) 
 
console.log(person.name);  //"Scott" 
delete person.name; 
console.log(person.name);  //"Scott"

可以看到，当把name属性的特性值configurable设置为false之后，就表示不能从对象中删除属性。但需要注意的是，当把属性定义为不可配置之后，就不能把它变回可配置的了。此时修改除writable之外的其它特性都会报错，例如：


var person = { 
  name: "Scott"
} 
Object.defineProperty(person,"name",{ 
  configurable:false; 
}) 

Object.defineProperty(person,"name",{ 
  configurable:true;  //此处会抛出错误 
})

也就是说，在把configurable特性修改为false之后，再修改其它特性就会有限制存在。

访问器属性与定义方法

访问器属性

访问器属性不包含数据值。它包含一对getter和setter函数。当读取访问器属性时，会调用getter函数并返回有效值；当写入访问器属性时，会调用setter函数并传入新值，setter函数负责处理数据。该属性有四个特性：

1. [[Configurable]]：默认为true。表示能否通过delete删除属性从而重新定义属性，能否修改属性特性，或者能否把属性修改为访问器属性；

2. [[Enumerable]]：默认为true。表示能否通过for-in循环返回属性；

3. [[Get]]：读取属性时调用的函数，默认为undefined；

4. [[Set]]：写入属性时调用的函数，默认为undefined。

访问器属性不能直接定义，必须通过Object.defineProperty()函数定义，例如：


var person = { 
  _name: "Scott", 
  _age: 24, 
  _tel: 86247 
}; 
//name属性为只读的 
Object.defineProperty(person,"name",{ 
  get: function(){ 
    return this._name; 
  } 
}); 
//age属性为只写不可读的 
Object.defineProperty(person,"age",{ 
  set: function(p){ 
     this._age = p; 
  } 
}); 
//tel属性为可读可写的 
Object.defineProperty(person,"tel",{ 
  get:function(){ 
     return this._tel; 
  }, 
  set: function(p){ 
     this._tel = p; 
  } 
}); 
console.log(person.name);  //"Scott" 
person.name = "Evan"; 
console.log(person.name);  //"Scott"，对name属性的修改无效 
console.log(person.age);  //undefined，不可读属性 
person.age = 25; 
console.log(person._age);  //25，已经修改 
console.log(person.tel);  //"86247"，可读属性 
person.tel = "13975"; 
console.log(person.tel);  //"13975"，可以修改

属性前面的下划线表示只能通过对象方法访问的属性。当我们使用person.name时实际上调用的是name属性的getter函数，为person.name赋值时调用的是name属性的setter函数，这样属性和访问器之间的关系就很清晰。

批量定义与特性读取

定义多个属性

实际上ES5为我们提供了为一个对象定义多个属性的方法，即Object.defineProperties()，该函数接收两个参数，属性所在的对象以及需要修改的属性及其描述符对象组成的对象，例如把上边的例子修改为一次性定义多个属性，如下：


var person = { 
  _name: "Scott", 
  _age: 24, 
  _tel: 86247 
}; 
Object.defineProperties(person,{ 
  name:{ 
    get: function(){ 
      return this._name; 
    } 
  }, 
  age:{ 
    set: function(p){ 
      this._age = p; 
    } 
  }, 
  tel:{ 
    get:function(){ 
      return this._tel; 
    }, 
    set: function(p){ 
      this._tel = p; 
    } 
  } 
});

读取属性的特性

ES5提供了Object.getOwnPropertyDescripter()方法来获取给定属性的描述符。该方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。结果会返回一个对象，如果是访问器属性，返回的对象有configuable、enumerable、get和set；如果是数据属性，这个返回对象的属性包括configuable、enumerable、writable和value。对于上面的例如，使用如下：


var person = { 
  _name: "Scott", 
  _age: 24, 
  _tel: 86247 
}; 
Object.defineProperties(person,{ 
  name:{ 
    get: function(){ 
      return this._name; 
    } 
  }, 
  age:{ 
    set: function(p){ 
      this._age = p; 
    } 
  }, 
  tel:{ 
    get:function(){ 
      return this._tel; 
    }, 
    set: function(p){ 
      this._tel = p; 
    } 
  } 
}); 
var descripter = Object.getOwnPropertyDescripter(person,"tel"); 
console.log(descripter.value);  //undefined 
console.log(descripter.enumerable);  //false 
console.log(typeof descripter.get);  //"function"

上面的代码中获取了person对象的tel属性，由于其是一个访问器属性，所以其value为undefined，enumerable为false，而get为指向getter函数的一个指针。

以上这篇浅谈JavaScript 数据属性和访问器属性就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13