JavaScript 数据属性和访问器属性

JavaScript 数据属性和访问器属性

原文链接

一个例子

先看代码:

var obj = {name:"percy"};
console.log(obj.name);    // percy
obj.name = "zyj";
console.log(obj.name);    // zyj

// 这里借 Math 对象来举例
// 首先说明一下, Math 对象和上面定义的 obj 对象都只是 Object 对象的一个实例
console.log(Math.PI);    // 3.1415926...
Math.PI = 1234;
console.log(Math.PI);    // 3.1415926...

看到了吗?同样是 Object 的实例,obj 对象的属性却可以被改写,而 Math 对象的属性去不能被改写。好,让我们来码一行,从而让 obj 对象的属性也不能被改写:

var obj = {name:"percy"};
console.log(obj.name);    // percy

Object.defineProperty(obj,"name",{writable:false});

obj.name = "zyj";
console.log(obj.name);    // percy

看到了吗,这其中另有玄机,接下来就引入了我们的主角:对象的数据属性访问器属性

为了表示特性是内部值,规范(ECMA-262)就把它们放到了两对儿方括号里了,例如 [[Enumerable]]。

数据属性(Data Properties)

  • 数据属性有4个描述其行为的特性:

    • [[Configurable]] : 表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。

    • [[Enumerable]] : 表示能否通过 for-in 循环返回属性。

    • [[Writable]] : 表示能否修改属性的值。

    • [[Value]] : 包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值时,把新值保存在这个位置。默认值是 undefined。

像这样(var obj = new Object(); obj.name = "percy";)或者像通过对象字面量(var obj = {name: "percy"};)直接在对象上定义的属性,它们的 [[Configurable]]、[[Enumerable]] 和 [[Writable]] 特性默认都被设置为 true,而 [[Value]] 特性被设置为指定的值。

这里注意一下这个(可以先跳过,完了再看):

var person = {};   // 新建一个空对象
Object.defineProperty(person,"name",{
  value: "percy"
});
console.log(Object.getOwnPropertyDescriptor(person,"name"));
// 打印:Object {value: "percy", writable: false, enumerable: false, configurable: false}

没有按上面的2种方法为对象添加属性,而直接通过 Object.defineProperty() 为对象添加属性以及值,这种情况下,这个对象的这个属性的另外3个特性的默认值都是 false。

要修改属性默认的特性,必须使用 ECMAScript 的 Object.defineProperty() 方法。

  • Object.defineProperty( obj, prop, descriptor)

    • obj:需要定义属性的对象。

    • prop:需定义或修改的属性的名字。

    • descriptor:一个包含设置特性的对象

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

for(let prop in person){
  console.log(prop + " : " + person[prop]);
}                   // name : percy 
Object.defineProperty(person,"name",{
  enumerable: false
});
for(let prop in person){
  console.log(prop + " : " + person[prop]);
}                   // 什么也没打印

Object.defineProperty(person,"name",{
  configurable: false
});
Object.defineProperty(person,"name",{
  configurable: true
}); // 报错:TypeError: Cannot redefine property: name(…)

// 一旦把属性定义为不可配置的,那么就再也不能把属性定义回可配置的了。

访问器属性(Accessor Properties)

访问器属性不包含数据值,它们包含一对儿 gettersetter 函数(不过,这两个函数都不是必需的)。在读取访问器属性时,会调用 getter 函数,在写入访问器属性时,又会调用 setter 函数并传入新值。

  • 访问器属性有如下4个特性:

    • [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性。

    • [[Enumerable]]:表示能否通过 for-in 循环返回属性。

    • [[Get]]:在读取属性时调用的函数。默认值为 undefined。

    • [[Set]]:在写入属性时调用的函数。默认值为 undefined。

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

var book = {
    _year : 2004,
    edition : 1
};
Object.defineProperty(book,"year",{ 
    get : function () {
        alert(this._year);
    },
    set : function (newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
book.year;      // 弹出窗口,显示 2004
book.year = 2005;
console.log(book.edition);   // 2

要是上面的代码有不懂得地方,参看这里,JavaScript理解对象:属性类型(推荐)

定义多个属性

var obj = {};
Object.defineProperties(obj, {
  "property1": {
    value: true,
    writable: true
  },
  "property2": {
    value: "Hello",
    writable: false
  }
  // 等等.
});

console.log(obj); // Object {property1: true, property2: "Hello"}

读取属性的特性

Object.getOwnPropertyDescriptor(obj, prop) 返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

var girl = {name: "zyj"};
console.log(Object.getOwnPropertyDescriptor(girl,"name"));
// Object {value: "zyj", writable: true, enumerable: true, configurable: true}

Object.defineProperties(girl,{
  name:{
    writable: false
  },
  age:{
    writable: true,
    value: 22
  }
});

console.log(Object.getOwnPropertyDescriptor(girl,"name"));
// Object {value: "zyj", writable: false, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(girl,"age"));
// Object {value: 22, writable: true, enumerable: false, configurable: false}

var descriptor = Object.getOwnPropertyDescriptor(girl,"age");
console.log(descriptor.value);         // 22
console.log(descriptor.configurable);  // false
console.log(descriptor.writable);      // true
console.log(descriptor.get);           // undefined
console.log(descriptor.set);           // undefined

摘抄自文末的链接

A property is a name (string identifier) associated with a property descriptor.

  • As of ECMAScript 5, three property types are available:

    • Internal Properties

    • Data properties

    • Accessor properties

参考资料


percy507的编程之路
自2016年加入社区后,陆陆续续发布过一些文章,后面也自己折腾过个人博客(hexo+github)。但是自2018年...

主修前端,

962 声望
54 粉丝
0 条评论
推荐阅读
使用vite搭个中后台系统的脚手架
搭个中后台系统的脚手架仓库地址 [链接]搭建脚手架目的学习 vite、recoil 等新技术封装项目中常用的较复杂的组件学习一定的前端架构能力构建命令npm 与 yarn 对新版 husky(v7.0.1+)的配置方式不太相同,我们这...

percy5072阅读 3.2k

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 6.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.5k评论 6

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木35阅读 6.6k评论 10

主修前端,

962 声望
54 粉丝
宣传栏