一、基本用法简介

声明一个简单的对象,如下

var obj = {
name: 'ldld'
}

 我们可以用Object.defineProperty来声明这个对象

var obj = {}
Object.defineProperty(obj,'name',{
value:'ldld',
writable:true,
enumerable: true,
configurable: true
})

下列就这四个基本的配置简单介绍一下

  1. value:初始值
  2. 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'
  3. enumerable:是否可枚举,这个是否能遍历到该属性(for)
  4.   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的更多相关文章

  1. JavaScript 之 对象属性的特性 和defineProperty方法

    对象是无序属性的集合,而这些属性在创建是都带有一些特征值(可以理解为属性的属性,天生自带的),这些特征值是为了实现JavaScript引擎用的,因此JavaScript不能直接访问. JavaScri ...

  2. js object 对象 属性和方法的使用

    //object 对象 属性和方法的使用 var person = new Object(); person.name="张海"; person.age="; perso ...

  3. JavaScript 访问对象属性和方法及区别

    这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考 属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...

  4. 转: JavaScript 获取对象属性和方法

    一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举 ...

  5. JavaScript 获取对象属性和方法

    ShineJaie 原创整理,转载请注明出处. 一.获取对象属性和方法 Object.keys() 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返 ...

  6. 2018-06-27 jq文档处理与jq对象属性操作

    jQ文档处理: 内部插入 A.append(B) ->把B后追加到A内部中 B.appendTo(A) ->把B后追加到A内部中 A.prepend(B) ->把B后追加到A内部中 ...

  7. js 中object对象的操作

    n = object对象 for(var p in n){ console.log(p);// 取得是key值 console.log(n[p]);//取得是value值 } 继之前js中数组的常用方 ...

  8. js - object的属性操作

    视频学习地址: http://www.imooc.com/video/6002 原文PPT下载地址: http://img.mukewang.com/down/54c5ec1a000141f10000 ...

  9. 获取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 ...

随机推荐

  1. Vue.js 源码学习笔记

    最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...

  2. 创建Spring Boot微服务项目

    创建一个测试用的微服务项目HelloWorld 创建项目 编写服务代码 @RestController public class HelloWorld { @RequestMapping(" ...

  3. nginx 499错误

    原因: 服务响应时间太长,客户端自动断开链接. 解决: 1. 找到响应世间长的接口,看依赖的数据源(数据库,第三方接口等)响应时间是否超时,还是自己程序有逻辑问题. 可以通过加入日志打印时间消耗来确定 ...

  4. CSRF verification failed. Request aborted.错误解决办法

    在Django项目的页面,提交form表单POST请求时,会出现报错:CSRF verification failed. Request aborted. 需要在form表单中加:{% csrf_to ...

  5. 被我误解的max_connect_errors

    第一节  什么是max_connect_errors 一开始接触这个参数的时候,感觉他和max_connections的含义差不多,字面意思简单明了,这个参数的含义是最大连接错误数,翻翻mysql的文 ...

  6. Ionic创建混合App(一)

    前言 最近公司要开始做App项目,最终选定了ionic开发方案,在这里我将学习的过程记录在这里,一方面避免自己忘记,另一方面方便大家交流学习.这里我们采用的是 Ionic2 + Angular2 : ...

  7. 使用Nginx代理和转发Websocket连接

    1.Websocket 简介 WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端. 2.Nginx 简介 ...

  8. iis8.5部署net项目

    服务器上运行提示: iis版本: 使用命令行运行cmd(管理员模式) 输入: %windir%\system32\inetsrv\appcmd unlock config -section:syste ...

  9. python常用模块学习1

    import time time.sleep(1)#暂停时间 time.time()#显示当前系统时间戳 t=time.localtime()#结构化当地时间,可以将结构化时间想象成一个类 print ...

  10. MYSQL学习笔记——数据类型

    mysql的数据类型可以分为三大类,分别是数值数据类型.字符串数据类型以及日期时间数据类型. 数值数据类型                                               ...