理解Object.defineProperty()
理解Object.defineProperty()
Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。
基本语法:Object.defineProperty(obj, prop, descriptor)
@param obj 【必须】目标对象
@param prop【必须】新增或修改的属性名字
@param descriptor 属性描述符。
属性描述符 包括两种形式:数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对getter-setter函数功能来描述的属性。
但是该两者不能同时存在,描述符只能是其中之一。
一:数据描述符:
比如如下一个普通对象:
var obj = {
"name": "kongzhi"
};
数据描述符属性如下:
Object.defineProperty(obj, "name", {
configurable: true | false,
enumerable: true | false,
value: '任意类型的值',
writable: true | false
});
下面我们来理解下每个属性的含义:
1. value:
含义: 属性的值,可以是任何类型的值,默认为undefined
1-1 不设置value属性
如下代码:
var obj = {};
Object.defineProperty(obj, "name", {});
console.log(obj.name); // undefined
1-2 设置value属性
// 设置value 代码如下:
var obj = {};
Object.defineProperty(obj, "name", {
value: "kongzhi"
});
console.log(obj.name); // kongzhi
2. writable
含义:属性的值是否可以被重写,true: 可以被重写,false: 不能被重写。默认为false。
2-1 writable设置为false,不能重写,如下代码:
var obj = {};
Object.defineProperty(obj, "name", {
value: "kongzhi",
writable: false
});
// 先打印下值
console.log(obj.name); // kongzhi
// 更改值
obj.name = "longen";
// 再打印下
console.log(obj.name); // kongzhi
2-2 writable设置为true,可以被重写,如下代码:
var obj = {};
Object.defineProperty(obj, "name", {
value: "kongzhi",
writable: true
});
// 先打印下值
console.log(obj.name); // kongzhi
// 更改值
obj.name = "longen";
// 再打印下
console.log(obj.name); // longen
3. enumerable
含义:该属性是否可以被枚举(如:for..in 或 Object.keys()). 如果为true的话,可以被枚举,设置为false的话,不能被枚举,默认为false。
3-1 enumerable被设置为false,不能被枚举,如下代码:
var obj = {};
Object.defineProperty(obj, "name", {
value: "kongzhi",
writable: false,
enumerable: false
});
// 先打印对象一下看看
console.log(obj); // {name: "kongzhi"} // 再枚举对象的属性
for(var attr in obj) {
console.log(attr); // 什么都没有输出 说明不能被枚举
}
3-2 enumerable 设置为true,可以被枚举,如下代码:
var obj = {};
Object.defineProperty(obj, "name", {
value: "kongzhi",
writable: false,
enumerable: true
});
// 先打印对象一下看看
console.log(obj); // {name: "kongzhi"} // 再枚举对象的属性
for(var attr in obj) {
console.log(attr); // 输出 name
}
4. configurable
含义:是否可以删除目标属性或是否可以修改目标属性的特性。如果为true的话,可以被删除或可以修改属性,为false的话,不能删除目标属性或不能修改目标属性,默认为false
4-1 configurable: false, 为false的话,不能删除目标属性或不能修改目标属性。如下代码:
var obj = {};
Object.defineProperty(obj, "name", {
value: "kongzhi",
writable: false,
enumerable: false,
configurable: false
});
// 先打印对象一下看看
console.log(obj); // {name: "kongzhi"} // 删除属性
delete obj.name;
// 重新打印下对象,看是否删除成功了
console.log(obj.name); // kongzhi // 修改属性
obj.name = "longen";
// 重新打印下对象,看是否修改成功了
console.log(obj.name); // kongzhi
4-2 configurable: true, 可以删除目标属性 或 可以修改目标属性,如下代码:
var obj = {};
Object.defineProperty(obj, "name", {
value: "kongzhi",
writable: false,
enumerable: false,
configurable: true
});
// 先打印对象一下看看
console.log(obj); // {name: "kongzhi"} // 删除属性
delete obj.name;
// 重新打印下对象,看是否删除成功了
console.log(obj.name); // undefined // 修改属性
obj.name = "longen";
// 重新打印下对象,看是否修改成功了
console.log(obj.name); // longen
二: 存取器描述
使用存取器描述属性的时候,可以使用如下属性:
var obj = {};
Object.defineProperty(obj, "name", {
enumerable: true | false,
configurable: true | false,
get: function() {} | undefined,
set: function(value) {} | undefined
});
注意:当使用了getter或setter的时候,就不能使用writable和value这两个属性。否则会报错。
getter 是获取属性值的方法。如果没有getter 则默认为 undefined,当我们读取某个属性的时候,其实是在对象内部调用了该方法,该方法必须使用return语句,返回值被作为属性值。
setter 是设置属性的方法。如果没有setter,则默认为undefined,该方法接收一个参数,并将该参数值分配该属性。当我们设置某个属性的时候,实际上在对象的内部调用了该方法。
如下代码是使用getter和setter的代码:
var obj = {};
var initValue = "kongzhi";
Object.defineProperty(obj, "name", {
get: function() {
// 当获取属性值的时候触发的函数
return initValue;
} ,
set: function(value) {
// 当设置值的时候触发的函数
initValue = value;
}
});
// 获取值
console.log(obj.name); // kongzhi // 设置值
obj.name = "longen";
// 打印下
console.log(obj.name); // longen
理解Object.defineProperty()的更多相关文章
- 深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...
- 理解 Object.defineProperty
理解 Object.defineProperty 本文写于 2020 年 10 月 13 日 Object.defineProperty 用于在一个对象上定义新的属性或修改现有属性并返回该对象. 什么 ...
- 理解Object.defineProperty函数中的get与set
defineProperty是什么: 该函数可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.通俗理解就是: 给对象添加一个新的属性,或者针对对象里的某些属性,可以给这 ...
- 理解Object.defineProperty的作用
对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = ...
- [转] 理解Object.defineProperty的作用
对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = ...
- 《转》理解Object.defineProperty的作用
对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = ...
- 简单的理解 Object.defineProperty()
Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性. Object.defineProperty(obj,prop,descriptor ...
- vue之Object.defineProperty()
了解Object.defineProerty()方法 关于Object.defineProperty()方法的解释,理解Object.defineProperty的作用 这篇文章做了很详细的概述 关于 ...
- 浅谈兔兔对Object.defineProperty的理解
给一个对象定义一个新的属性或者在修改一个对象现有的属性,并返回这个对象 语法: Object.defineProperty(参数1,参数2,参数3) 参数1:目标对象 参数2:要修改或者添加的属性名称 ...
随机推荐
- Linux端图形处理工具ImageMagick在Centos上的安装
一.安装背景程序要用到用户上传图片,编辑的功能,能进行旋转,裁剪,缩放等. 二.ImageMagick介绍 ImageMagick是用C语言开发图片处理程序.可以对图片进行改变大小.旋转.锐化.减色或 ...
- [转载] Redis资料汇总专题
转载自http://www.cnblogs.com/tommyli/archive/2011/12/14/2287614.html 1.Redis是什么? 十五分钟介绍 Redis数据结构 Redis ...
- [转载] 使用 Twitter Storm 处理实时的大数据
转载自http://www.ibm.com/developerworks/cn/opensource/os-twitterstorm/ 流式处理大数据简介 Storm 是一个开源的.大数据处理系统,与 ...
- 猪圈密码python脚本实现
CTF比赛中,MISC题型中有时候会考到一种一种叫做"猪圈密码"(Pigpen_chiper)的简单加密方式.网上有个表可以对照地来实现解密,但是实际中太慢不符合竞速思维,于是写一 ...
- 在ERP中定义用户时报错:SqlDateTime 溢出。必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM 之间
在ERP中定义用户时. 报错: SqlDateTime 溢出.必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM 之间. 原因分析: ①没有正确初 ...
- Java中常用加减密方式
1.加密概述: 加密就是是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使以获得了加密的信息,但因不知解密方式,仍无法了解信息的内容.大体上又分为双向加密和单向加密. 2.单项加密 2.1.概 ...
- 关于String中的不变模式
不变模式 不变模式就是为了尽可能的去除并行中的同步操作,提高并行程序的性能,可以使用一种不可改变的对象,依靠对象的不变性,可以确保其在没有同步操作的多线程环境中依然始终保持内部状态的一致性和正确性.并 ...
- PHP时间戳和日期互转换
在php中我们要把时间戳转换日期可以直接使用date函数来实现,如果要把日期转换成时间戳可以使用strtotime()函数实现,下面我来给大家举例说明. 1.php中时间转换函数 strtotime ...
- 用lua+redis实现一个简单的计数器功能 (一)
首先安装环境 依赖环境有 luajit http://luajit.org ngx_devel_kit https://github.com/simpl/ngx_devel_kit echo-ngin ...
- Java IO(2)阻塞式输入输出(BIO)的字节流与字符流
在上文中<Java IO(1)基础知识——字节与字符>了解到了什么是字节和字符,主要是为了对Java IO中有关字节流和字符流有一个更好的了解. 本文所述的输出输出指的是Java中传统的I ...