JavaScript.descriptor(属性描述符)
属性描述符是对JavaScript属性的描述,包括:value、writable、enumerable、configurable,除value其他默认为true。
本文包括:
- 取得属性描述符、 Object.getOwnPropertyDescriptor( obj, "property-name" );
- 属性描述符详解、
1. writable[对象是否可以再赋值], enumerable[对象是否可以迭代], configurable[是否可以通过Object.defineProperty对对象再次配置]
- 属性描述符应用、 writable: false && configurable: false 产生对象常量
- 其他相关:
- 禁止扩展:Object.preventExtensions(obj),阻止对象再添加属性,对象不可以扩展。
- 封装: Object.seal(obj),封装一个对象,对象上不能再添加新的属性、不能重新定义属性描述符、不能删除某个属性,
等价于 Object.preventExtensions(obj),并设置现有的所有属性为 configurable:false。
3.冻结:Object.freeze(obj),对象不能再做任何修改或者删除属性的操作,
效果相当于调用了 Object.seal(obj) 并设置所有属性为 writable: false
1.取得属性描述符
var myObject = {
a: 2
};
Object.getOwnPropertyDescriptor( myObject, "a" );
// { value: 2, writable: true, enumerable: true, configurable: true }
可以看到,对象myObject的属性a,除了拥有value描述符,还拥有writable、enumerable、configurable三个用于描述属性描述符。
var myObject = {};
Object.defineProperty( myObject, "a", {
value: 2,
writable: true,
configurable: true,
enumerable: true
} );
// 上面的定义等同于 myObject.a = 2;
// 所以如果不需要修改这三个特性,我们不会用 `Object.defineProperty`
myObject.a; //
通过Object.defineProperty(obj,"propertyname",{})可以为对象添加属性,并且通过属性描述符为属性添加一些特性。
2.属性描述符详解
2.1 writable[对象是否可以再赋值]
// "use strict";
var myObject = {}; Object.defineProperty( myObject, "a", {
value: 2,
writable: false, // 不可写!
configurable: true,
enumerable: true
} ); myObject.a = 3; // 写入的值将会被忽略 myObject.a; // /*
如果应用了 strict mode 的话,那么 myObject.a 将会抛出 TypeError,而不是仅仅忽略写入的值。
ES5 还引入了对象属性的 Getter 和 Setter,这里的 writable: false可以认为是和没有定义或者定义了没有任何操作的 setters 的情况大致等同。
当然了,如果是 strict mode 下,需要在 setters 里面抛出 TypeError 来完全模拟 writable: false 的情形。
*/
2.2 enumerable[对象是否可以迭代]
var myObject = {
a: 2
};
myObject.a = 3;
myObject.a; //
Object.defineProperty( myObject, "a", {
value: 4,
writable: true,
configurable: false, // 不可配置!
enumerable: true
} );
myObject.a; //
myObject.a = 5;
myObject.a; //
Object.defineProperty( myObject, "a", {
value: 6,
writable: true,
configurable: true, //同样的,也不能用delete删除对象这个属性了
enumerable: true
} ); // TypeError
/*
注意,一旦某个属性被指定为 configurable: false,
那么就不能从新指定为configurable: true 了,这个操作是单向,不可逆的。
*/
2.3 configurable[是否可以通过Object.defineProperty对对象再次配置]
var myObject = { };
Object.defineProperty(
myObject,
"a",
// make `a` enumerable, as normal
{ enumerable: true, value: 2 }
);
Object.defineProperty(
myObject,
"b",
// make `b` NON-enumerable
{ enumerable: false, value: 3 }
);
myObject.b; //
("b" in myObject); // true
myObject.hasOwnProperty( "b" ); // true
// .......
for (var k in myObject) {
console.log( k, myObject[k] );
}
// "a" 2
myObject.propertyIsEnumerable( "a" ); // true
myObject.propertyIsEnumerable( "b" ); // false
Object.keys( myObject ); // ["a"]
Object.getOwnPropertyNames( myObject ); // ["a", "b"]
/*
这里可以看到,enumerable: false 使得该属性从对象属性枚举操作中被隐藏,
但Object.hasOwnProperty(...) 仍然可以检测到属性的存在。
另外,Object.propertyIsEnumerable(..) 可以用来检测某个属性是否可枚举,
Object.keys(...) 仅仅返回可枚举的属性,
而Object.getOwnPropertyNames(...) 则返回该对象上的所有属性,
包括不可枚举的。
*/
3.属性描述符应用
var myObject = {};
Object.defineProperty( myObject, "FAVORITE_NUMBER", {
value: 42,
writable: false,
configurable: false
} );
/*
通过组合 writable: false 和 configurable: false,可以创建一个不能修改、重新定义或删除其属性的对象常量
这里对该对象属性的删除,修改操作会被忽略,不能再用Object.defineProperty(...) 来重新配置该属性的特性
*/
4.其他相关
4.1禁止扩展
/*
如果希望阻止新的属性被加入到对象,可以通过调用
Object.preventExtensions(...) 来做到这一点:
*/ var myObject = {
a: 2
}; Object.preventExtensions( myObject ); myObject.b = 3;
myObject.b; // undefined //在 strict mode 下,行为稍有不同,对属性的赋值会抛出 TypeError, 而不是仅仅忽略赋值操作
4.2封装
/*
可以通过 Object.seal(...) 来封装一个对象。在调用这个操作之后,
对象上不能再添加新的属性,也不能重新定义属性描述符或者删除某个属性:
*/
var myObject = {
a: 2
};
Object.seal(myObject);
myObject.b = 'b';
console.log(myObject); // {a: 2} myObject.a = 6;
console.log(myObject); // {a: 6} /*
Object.seal(...)
相当于调用了 Object.preventExtensions(..),并设置现有的所有属性为 configurable:false。
*/
4.3冻结
/*
调用 Object.freeze(...) 可以创建一个被冻结的对象,这个对象拥有不能再被做任何修改或者删除属性的操作
*/ var myObject = {
a: 2
};
Object.seal(myObject);
myObject.b = 'b';
console.log(myObject); // {a: 2} myObject.a = 6;
console.log(myObject); // {a: 2} //相当于调用了 Object.seal(...) 并设置所有属性为 writable: false
JavaScript.descriptor(属性描述符)的更多相关文章
- 深入理解javascript对象系列第三篇——神秘的属性描述符
× 目录 [1]类型 [2]方法 [3]详述[4]状态 前面的话 对于操作系统中的文件,我们可以驾轻就熟将其设置为只读.隐藏.系统文件或普通文件.于对象来说,属性描述符提供类似的功能,用来描述对象的值 ...
- JavaScript 属性描述符
属性描述符(Property Descriptor)是 ES5 之后出现的概念,顾名思义,它用于描述属性应该是什么样,例如是否只读,能否枚举,能否可配置等.所有对象属性均可使用属性描述符来定义. 属性 ...
- 理解JavaScript中的属性描述符
我们把描述JavaScript中定义内部特性的属性叫做属性描述符 分为两大类:数据描述符和存取描述符 数据描述符是一个拥有可写或不可写的属性(Writable); 存取描述符不包含数据值,是一组拥有g ...
- Object.defineProperty 与 属性描述符
为JavaScript对象新增或者修改属性,有两种不同方式:直接使用=赋值或者使用Object.defineProperty 定义,使用后者的话还可以设置属性的描述符. Object.definePr ...
- Python:高级主题之(属性取值和赋值过程、属性描述符、装饰器)
Python:高级主题之(属性取值和赋值过程.属性描述符.装饰器) 背景 学习了Javascript才知道原来属性的取值和赋值操作访问的“位置”可能不同.还有词法作用域这个东西,这也是我学习任何一门语 ...
- JS属性描述符之Object.defineProperty()定义对象属性特性
一.Object.defineProperty的作用 用来给对象新增属性,和修改对象中的属性. 二.JS对象中的描述符 js对象中两种属性描述符:数据描述符和存取描述符(访问描述符). 注意事项: 1 ...
- python 属性描述符
import numbers class IntField: # 一个类只要实现了这个魔法函数,那么它就是属性描述符 #数据描述符 def __get__(self, instance, owner) ...
- 元类编程--__get__ __set__属性描述符
from datetime import date, datetime import numbers class IntField: #数据描述符,实现以下任意一个,都会变为属性描述符 def __g ...
- js 面向对象之属性描述符
上回介绍了面向对象之构造器属性.这次介绍下属性描述符 遍历对象属性 let person = {name: "lisi"} for (key in person) { consol ...
随机推荐
- mybatis typealias 问题
最近在学mybatis 在一个简单的问题上却花了挺长时间 网上也没发现有类似的案例 故记录一下 在configuration里面 typealias 和 properties 同时用会出错 具体原因 ...
- CentOS 下的apache服务器配置与管理
一.WEB服务器与Apache1.web服务器与网址 2.Apache的历史 3.补充http://www.netcraft.com/可以查看apache服务器的市场占有率同时必须注意的是ngnix, ...
- uniGUI之FirDAC(13)
// uses FireDAC.Phys.SQLite 之后, 可不用添加 TFDPhysSQLiteDriverLink //访问SQLite 文件数据库 procedure TMainForm.U ...
- elasticsearch 自定义routing
由于线上elasticsearch集群数据量越来越大,优化已经已经是重中之重. 优化的方式有很多中,网上一大堆,自行百度. 优化方案中有个叫routing的方案是个需要熟悉业务日志才能使用.于是我就研 ...
- nginx_2_nginx进程模型
1.nginx进程模型概述 在上一节我们已经已经成功在linux服务器上安装了nginx,启动nginx后,查看进程:ps -ef | grep nginx 能看到启动nginx进程后,有一个mast ...
- 【快学springboot】3.多种接受参数的方式
前往掘金查看:https://juejin.im/post/5d05e5f9f265da1b6c5f74b4 前言 在开发中,我们常常会碰到多种传参的方式.这里,我们就来总结下,springboot中 ...
- 《React后台管理系统实战 :三》header组件:页面排版、天气请求接口及页面调用、时间格式化及使用定时器、退出函数
一.布局及排版 1.布局src/pages/admin/header/index.jsx import React,{Component} from 'react' import './header. ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:"text-success" 类的文本样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- c#数据四种执行方法(ExecuteNonQuery)-----转载
c#数据四种执行方法(ExecuteNonQuery) 1.使用ExecuteReader()操作数据库 2.使用ExecuteNonQuery()操作数据库 3.使用ExecuteScalar( ...
- 第1节 storm编程:4、storm环境安装以及storm编程模型介绍
dataSource:数据源,生产数据的东西 spout:接收数据源过来的数据,然后将数据往下游发送 bolt:数据的处理逻辑单元.可以有很多个,基本上每个bolt都处理一部分工作,然后将数据继续往下 ...