Object.defineProperty()方法的用法详解
Object.defineProperty()函数是给对象设置属性的。
Object.defineProperty(object, propertyname, descriptor);
一共有三个参数。
object:必须,要在其上添加或修改属性的对象。
propertyname:必需。 一个包含属性名称的字符串。
descriptor: 属性描述符。 它可以针对数据属性或访问器属性。
descriptor:有以下参数值
value: 属性的值,默认为 undefined。
writable: 该属性是否可写,如果设置成 false,则任何对该属性改写的操作都无效(但不会报错,但是在严格模式下会报错。),对于像前面例子中直接在对象上定义的属性,这个属性该特性默认值为为 true。
configurable:总开关,一旦为false,就不能再设置他的(value,writable,configurable)
enumerable:定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。
get: 对定义的属性取值的时候会触发get 对应的函数,并且返回结果,默认返回undefined。
set: 对定义的属性赋值的时候会触发set 对应的函数
writable : 该属性是否可写,如果设置成 false,则任何对该属性改写的操作都无效
var someOne = { };Object.defineProperty(someOne, "name", {value:"coverguo" , //由于设定了writable属性为false 导致这个量不可以修改writable: false }); console.log(someOne.name); // 输出 coverguosomeOne.name = "linkzhu";console.log(someOne.name); // 输出coverguo
configurable : 总开关,一旦为false,就不能再设置他的(value,writable,configurable)
var someOne = { };Object.defineProperty(someOne, "name", {value:"coverguo" ,configurable: false }); delete someOne.name; console.log(someOne.name);// 输出 coverguosomeOne.name = "linkzhu";console.log(someOne.name); // 输出coverguoObject.defineProperty(someOne, "name", {value:"coverguo123" ,configurable: true }); //由于前面已经设置了,configurable,所以后面在修改value,configurable,以及writable都无效了。会报错。//error: Uncaught TypeError: Cannot redefine property: b
get : 对定义的属性取值的时候会触发get 对应的函数,并且返回结果,默认返回undefined。
set:对定义的属性赋值的时候会触发set 对应的函数
var a= {} Object.defineProperty(a,"b",{set: function(newValue){console.log("你要赋值给我,我的新值是" + newValue);},get: function(){console.log("你取我的值")return 2 //注意这里,我硬编码返回2 }})a.b = 1 //打印 你要赋值给我,我的新值是1console.log(a.b) //打印 你取我的值//打印 2 注意这里,和我的硬编码相同的
实际场景用法举例:
//假如有一个目标节点, 我们想设置其位移时是这样的
var targetDom = document.getElementById('target');var transformText = 'translateX(' + 10 + 'px)';targetDom.style.webkitTransform = transformText;targetDom.style.transform = transformText;/*通过上面,可以看到如果页面是需要许多动画时,我们这样编写transform属性是十分蛋疼的。(┬_┬) 但如果通过Object.defineProperty, 我们则可以*/
var dom = document.getElementById('target');Object.defineProperty(dom, 'translateX', {set: function(value) {var transformText = 'translateX(' + value + 'px)';dom.style.webkitTransform = transformText;dom.style.transform = transformText;}//这样再后面调用的时候, 十分简单dom.translateX = 10;dom.translateX = -10;//甚至可以拓展设置如scale, originX, translateZ,等各个属性,达到下面的效果dom.scale = 1.5; //放大1.5倍dom.originX = 5; //设置中心点X}
转载于:https://www.cnblogs.com/xinggood/p/6601067.html
Object.defineProperty()方法的用法详解相关推荐
- getordefault java_Java map.getOrDefault()方法的用法详解
Map.getOrDefault(Object key, V defaultValue)方法的作用是: 当Map集合中有这个key时,就使用这个key值: 如果没有就使用默认值defaultValue ...
- java的sort的用法_Java排序方法sort用法详解
Java排序方法sort用法详解 发布于 2020-2-28| 复制链接 摘记: 本文实例为大家分享了java对数组.集合的排序方法,供大家参考,具体内容如下对数组的排序: ```java //对数组 ...
- Object.assign() 方法的使用详解
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 注意: 会改变源对象 语法: Object.assign(target, ...sou ...
- css3 实现圆角方法,CSS3 border-radius圆角的实现方法及用法详解
这篇文章主要介绍了CSS3 border-radius圆角的实现方法及用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 以前想实现一个圆角是比较麻烦的,不 ...
- Js中String对象方法replace()用法详解
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replacement) ...
- php delegate,jQuery中delegate()方法的用法详解
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.下面我们具体来了解一下. 语法结构: 代码如下: $(selector).d ...
- java sort方法_Java排序方法sort用法详解
本文实例为大家分享了java对数组.集合的排序方法,供大家参考,具体内容如下 对数组的排序: //对数组排序 public void arraySort(){ int[] arr = {1,4,6,3 ...
- python——class类和方法的用法详解
因为一直不太清楚面向对象的类和方法的编程思想,所以特地补了一下python-class的知识,在这里记录和分享一下. 文章目录 类和方法的概念和实例 1.python类:`class` 2.类的构造方 ...
- Go 延迟调用 defer 用法详解
引子 package counterimport ("log""sync" )type Counter struct {mu *sync.MutexValue ...
最新文章
- (U3D)Time的使用
- [LeetCode] Add Two Numbers(stored in List)
- 浏览器URL地址里一堆%或者6E616D6531之类的是啥?编码
- linux c remove 删除文件或目录函数
- Linux 查看电脑基本配置
- SQL Server Indexes
- flask 定义数据库关系(一对多) --
- SQL Search
- 初级开发人员的缺点_在您作为初级开发人员的第一年获得此建议
- Linux数码管和点阵程序,随笔:python turtle绘制八段数码管和共阳极8x8led点阵
- 生产问题分析!delete in子查询不走索引?!
- 英语学习笔记2019-10-11
- 【基础】集成学习 (Ensemble Learning)
- 引用 使用Eclipse生成Java Doc
- 基本排序算法:Python实现
- Latex中使用BibTex插入参考文献
- 2021-08-27小白笔记3
- QuickTime格式解析
- CSS模块、筛选模块、文档处理(CUD)模块、事件模块
- flea-db使用之SQL模板接入