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 ...
随机推荐
- Vue.js 源码学习笔记
最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...
- 创建Spring Boot微服务项目
创建一个测试用的微服务项目HelloWorld 创建项目 编写服务代码 @RestController public class HelloWorld { @RequestMapping(" ...
- nginx 499错误
原因: 服务响应时间太长,客户端自动断开链接. 解决: 1. 找到响应世间长的接口,看依赖的数据源(数据库,第三方接口等)响应时间是否超时,还是自己程序有逻辑问题. 可以通过加入日志打印时间消耗来确定 ...
- CSRF verification failed. Request aborted.错误解决办法
在Django项目的页面,提交form表单POST请求时,会出现报错:CSRF verification failed. Request aborted. 需要在form表单中加:{% csrf_to ...
- 被我误解的max_connect_errors
第一节 什么是max_connect_errors 一开始接触这个参数的时候,感觉他和max_connections的含义差不多,字面意思简单明了,这个参数的含义是最大连接错误数,翻翻mysql的文 ...
- Ionic创建混合App(一)
前言 最近公司要开始做App项目,最终选定了ionic开发方案,在这里我将学习的过程记录在这里,一方面避免自己忘记,另一方面方便大家交流学习.这里我们采用的是 Ionic2 + Angular2 : ...
- 使用Nginx代理和转发Websocket连接
1.Websocket 简介 WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端. 2.Nginx 简介 ...
- iis8.5部署net项目
服务器上运行提示: iis版本: 使用命令行运行cmd(管理员模式) 输入: %windir%\system32\inetsrv\appcmd unlock config -section:syste ...
- python常用模块学习1
import time time.sleep(1)#暂停时间 time.time()#显示当前系统时间戳 t=time.localtime()#结构化当地时间,可以将结构化时间想象成一个类 print ...
- MYSQL学习笔记——数据类型
mysql的数据类型可以分为三大类,分别是数值数据类型.字符串数据类型以及日期时间数据类型. 数值数据类型 ...