javascript-object对象属性操作之Object.defineProperty
一、基本用法简介
声明一个简单的对象,如下
var obj = {
name: 'ldld'
}
我们可以用Object.defineProperty来声明这个对象
var obj = {}
Object.defineProperty(obj,'name',{
value:'ldld',
writable:true,
enumerable: true,
configurable: true
})
下列就这四个基本的配置简单介绍一下
- value:初始值
- writable:是否可以修改该属性的值
var obj = {}
Object.defineProperty(obj,'name',{
value:'ldld',
writable:false,
enumerable: true,
configurable: true
}) obj.name // 'ldld'
obj.name = 'LLLL'; // 这里会修改失败,严格模式下会报错 TypeError
console.log(obj.name) // 'ldld' - enumerable:是否可枚举,这个是否能遍历到该属性(for)
- configurable : 这个得重点讲一下
var obj = {}
// 第一次设置操作configurable配置,设置为false
Object.defineProperty(obj,'name',{
value:'ldld',
writable:true,
enumerable: true,
configurable: false
}) obj.name // 'ldld'
obj.name = 'LLLL'; // configurable: false 不影响writable属性,这里可以设置成功
console.log(obj.name) // 'LLLL' // 第二次设置操作configurable配置,在第一步false基础上改回true
Object.defineProperty(obj,'name',{
value:'ldld',
writable:true,
enumerable: true,
configurable: true // 现在我们想改回来,但是很遗憾,不能。不管是严格模式还是非严格模式都会报错
})此外,configurable会影响该对象属性是否可以被删除
Object.defineProperty(obj,'name',{
value:'ldld',
writable:true,
enumerable: true,
configurable: true
}) delete obj.name;
console.log(obj.name) // undefined ,说明删除成功 Object.defineProperty(obj,'name',{
value:'ldld',
writable:true,
enumerable: true,
configurable: false
}) delete obj.name;
console.log(obj.name) // ldld, 说明name属性没有被删除
二、对象常量
const str = 'abc';
str = 'def'; // 报错Uncaught TypeError: Assignment to constant variable. const obj = {name:'ldld'};
obj.name = {
name:'ldld1234' // 这里会修改成功
}
const声明的对象不可变,实际上是可以理解为指针的不可变。
const str = 'abc'; 表示str指针指向栈中一个地址,值'abc';
str = 'def';表示str又指到另一个地址,值为'def',违反了不可变的规则,报错了。
const obj = {name:'ldld'};表示obj 对象指向一个堆 内存堆的obj的引用,不管怎么改变obj里面的值,在内存堆中地方始终不变,因此不会报错。
那么问题来了,我们想声明一个不可变的对象,那怎么办?可以参考如下:
var obj = {}
Object.defineProperty(obj,'name',{
value:'ldld',
writable:false,
configurable: false
})
// 此时问obj的name属性不可改变了。
但是问题来来,name是不能再改变,但是我们可以给对象扩展其他属性。。。
三、防止对象扩展Object.preventExtensions
var obj = {}
Object.defineProperty(obj,'name',{
value:'ldld',
writable:false,
configurable: false
})
// 此时问obj的name属性不可改变了。但是可以扩展obj属性
obj.age = 100;
console.log(obj.age) // 100
Object.preventExtensions(obj);
obj.sex = 'male';
console.log(obj.sex) // undefined,说明扩展失败
四、密封Object.seal
顾名思义,密封一个对象,这个对象不能配置,不能扩展属性,不能删除属性。但是可以可以修改熟悉过的值
Object.seal(obj)// 等同于如下:代码1 + 代码2
// 代码1
Object.defineProperty(obj,'[该对象所有的属性]',{
configurable: false
// writable:true, // 此时默认为true,可以修改
})
// 代码2
Object.preventExtensions(obj);
四、冻结Object.freeze(obj)
Object.freeze(obj)// 等同于如下:代码1 + 代码2
// 代码1
Object.seal(obj)
// 代码2
Object.defineProperty(obj,'[该对象所有的属性]',{
writable:false
})
由此可见,冻结,就是定一个对象常量的终极大法。
javascript-object对象属性操作之Object.defineProperty的更多相关文章
- JavaScript 之 对象属性的特性 和defineProperty方法
对象是无序属性的集合,而这些属性在创建是都带有一些特征值(可以理解为属性的属性,天生自带的),这些特征值是为了实现JavaScript引擎用的,因此JavaScript不能直接访问. JavaScri ...
- js object 对象 属性和方法的使用
//object 对象 属性和方法的使用 var person = new Object(); person.name="张海"; person.age="; perso ...
- JavaScript 访问对象属性和方法及区别
这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考 属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...
- 转: JavaScript 获取对象属性和方法
一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举 ...
- JavaScript 获取对象属性和方法
ShineJaie 原创整理,转载请注明出处. 一.获取对象属性和方法 Object.keys() 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返 ...
- 2018-06-27 jq文档处理与jq对象属性操作
jQ文档处理: 内部插入 A.append(B) ->把B后追加到A内部中 B.appendTo(A) ->把B后追加到A内部中 A.prepend(B) ->把B后追加到A内部中 ...
- js 中object对象的操作
n = object对象 for(var p in n){ console.log(p);// 取得是key值 console.log(n[p]);//取得是value值 } 继之前js中数组的常用方 ...
- js - object的属性操作
视频学习地址: http://www.imooc.com/video/6002 原文PPT下载地址: http://img.mukewang.com/down/54c5ec1a000141f10000 ...
- 获取Object对象属性的方法,Reflect.ownKeys, Object.getOwnPropertyNames,Object.getOwnPropertySymbols,Object.keys,for in
let triangle={ a:1, b:2, c:3 } function coloTriangle(){ this.color='red'; } coloTriangle.prototype=t ...
随机推荐
- Symmetric Tree(对称二叉树)
来源:https://leetcode.com/problems/symmetric-tree Given a binary tree, check whether it is a mirror of ...
- Java相关面试题总结+答案(七)
[Hibernate] 113. 为什么要使用 hibernate? hibernate 是对 jdbc 的封装,大大简化了数据访问层的繁琐的重复性代码. hibernate 是一个优秀的 ORM 实 ...
- BZOJ 1878(离散化+线段树)
题面 传送门 分析 首先我们观察到区间范围较大,而区间个数较少,考虑离散化,将所有询问按照右端点进行排序 离散化之后研究区间颜色个数变化的规律 当我们处理到第a[i]个段时,设a[i]上一次出现的地方 ...
- 开发chrome插件(扩展)
官方文档 https://developer.chrome.com/extensions/getstarted.html [干货]Chrome插件(扩展)开发全攻略 http://blog.haoji ...
- IE9的兼容性
/* 解决IE9表格错位 */ .el-table--border th:last-of-type.gutter { display: table-cell !important; width: 50 ...
- vue报错TypeError: Cannot read property 'protocol' of undefined
错误信息如下所示: isURLSameOrigin.js?3934:57 Uncaught (in promise) TypeError: Cannot read property 'protocol ...
- winsows CMD及Linux命令大全 欢迎补充
CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本) CMD命令锦集 1. gpedit.msc-----组策略 2. sndrec32--- ...
- linux权限管理—基本权限
目录 Linux权限管理-基本权限 一.权限的基本概述 二.权限修改命令chmod 三.基础权限设置案例 四.属主属组修改命令chown Linux权限管理-基本权限 一.权限的基本概述 1.什么是权 ...
- 简要说明 django restframework 的交互式文档
现在为了解决前后端交互沟通的问题,不少框架都推出了相关的swage库, 用起来似乎很是友好. 正好最近在开发一个小项目,想到新项目就用新版本新技术的理念,我下载了restframework 3.7的版 ...
- Java8 的一些新特性的学习理解
近期在学习队列相关的一些知识,在学习过程中发现Iterable<T>接口中新增了两个新的方法,出于好奇,就想知道这是什么东东,干什么用的.俗话说:实践出真知,所以就有了以下反复的测试. 先 ...