js中Object.defineProperty()方法的不详解


Posted in Javascript onJuly 09, 2018

菜菜: “老大,那个, Object.defineProperty 是什么鬼?”

假设我们有个对象 user ; 我们要给它增加一个属性 name , 我们会这么做

var user = {};
user.name="狂奔的蜗牛";
console.log(user);//{name: "狂奔的蜗牛"}

如果想要增加一个sayHi方法叻?

user.sayHi=function () { console.log("Hi !") };
console.log(user);//{name: "狂奔的蜗牛", sayHi: ƒn}

Object.defineProperty 就是做这个的

那么Object.defineProperty 怎么用?

Object.defineProperty 需要三个参数(object , propName , descriptor)

1 object 对象 => 给谁加
2 propName 属性名 => 要加的属性的名字 【类型:String】
3 descriptor 属性描述 => 加的这个属性有什么样的特性【类型:Object】

那么descriptor这个是个对象 ,他有那些属性呢 ? 别着急我们一个一个说;

既然可以给一个对象增加属性,那么我们用它来做一下给 user添加 name属性,代码是这样的

var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蜗牛"
 })
 console.log(user);//{name: "狂奔的蜗牛"}

说明 是的还是那个经典的value属性,他就是设置属性值的。

等等,属性值只能为字符串吗?我们的 number function Object boolean 等呢?

var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蜗牛"
 })
 Object.defineProperty(user,"isSlow",{
  value:true
 })
 Object.defineProperty(user,"sayHi",{
  value:function () { console.log("Hi !") }
 })
 Object.defineProperty(user,"age",{
  value:12
 })
 Object.defineProperty(user,"birth",{
  value:{
   date:"2018-06-29",
   hour:"15:30"
  }
 })
 console.log(user);

js中Object.defineProperty()方法的不详解

说明 事实证明任何类型的数据都是可以的哦~

问题又来了,如果 user对象已经有了name属性,我们可以通过Object.defineProperty改变这个值吗?

我们来试试

var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蜗牛"
 })
 console.log(user);
 user.name="新=>狂奔的蜗牛"
 console.log(user);

咦??为什么我改了没作用勒??

原因:上边说了descriptor有很多属性,除了value属性还有个 writable【顾名思义属性是否可以被重新赋值】接受数据类型为 boolean(默认为false) true => 支持被重新赋值 false=>只读

哦哦,原来如果我没设置writable值的时候就默认只读啊,所以才改不掉

那我们看看,设置为true,是不是就可以改掉了。

var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蜗牛",
  writable:true
 })
 console.log(user);
 user.name="新=>狂奔的蜗牛"
 console.log(user);

js中Object.defineProperty()方法的不详解

这个descriptor还有其他的属性吗?enumerable【顾名思义属性是否可以被枚举】接受数据类型为 boolean(默认为false) true => 支持被枚举 false=>不支持

额。。。枚举??什....什么意思?

假设我们想知道这个 user对象有哪些属性我们一般会这么做

var user ={
 name:"狂奔的蜗牛",
 age:25
} ;

//es6
var keys=Object.keys(user)
console.log(keys);// ['name','age']
//es5
var keys=[];
for(key in user){
 keys.push(key);
} 
console.log(keys);// ['name','age']

如果我们使用 Object.的方式定义属性会发生什么呢?我们来看下输出

var user ={
 name:"狂奔的蜗牛",
 age:25
} ;
//定义一个性别 可以被枚举
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true
})

//定义一个出生日期 不可以被枚举
Object.defineProperty(user,"birth",{
 value:"1956-05-03",
 enumerable:false
})

//es6
var keys=Object.keys(user)
console.log(keys);
// ["name", "age", "gender"]

console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男", birth: "1956-05-03"}
console.log(user.birth);
// 1956-05-03

说明 很明显,我们定义为 enumerable=falsebirth属性并没有被遍历出来,遍历 => 其实就是枚举(个人理解啦,不喜勿喷哦~)

总结 enumerable 属性取值为 布尔类型 true | false 默认值为 false,为真属性可以被枚举;反之则不能。此设置不影响属性的调用和 查看对象的值。

configurable 是接下来我们要讲的一个属性,这个属性有两个作用:

1 属性是否可以被删除
2 属性的特性在第一次设置之后可否被重新定义特性

var user ={
 name:"狂奔的蜗牛",
 age:25
} ;
//定义一个性别 不可以被删除和重新定义特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:false
})

//删除一下
delete user.gender;
console.log(user);//{name: "狂奔的蜗牛", age: 25, gender: "男"}

//重新定义特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:true
})
// Uncaught TypeError: Cannot redefine property: gender
//会报错,如下图

js中Object.defineProperty()方法的不详解

设置为 true

var user ={
 name:"狂奔的蜗牛",
 age:25
} ;
//定义一个性别 可以被删除和重新定义特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:true
})

//删除前
console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男"}

//删除一下
delete user.gender;
console.log(user);
// {name: "狂奔的蜗牛", age: 25}

//重新定义特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:false
})

//删除前
console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男"}
//删除一下 删除失败
delete user.gender;
console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男"}

总结 configurable设置为 true 则该属性可以被删除和重新定义特性;反之属性是不可以被删除和重新定义特性的,默认值为false(Ps.除了可以给新定义的属性设置特性,也可以给已有的属性设置特性哈

最后我们来说说,最重要的两个属性 setget(即存取器描述:定义属性如何被存取),这两个属性是做什么用的呢?我们通过代码来看看

var user ={
 name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  return count;
 }
})
console.log(user.age);//12

//如果我每次获取的时候返回count+1呢
var user ={
 name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  return count+1;
 }
})
console.log(user.age);//13

接下来我不用解释了吧,你想在获取该属性的时候对值做什么随你咯~

来来来,我们看看 set,不多说上代码

var user ={
 name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  return count;
 },
 set:function(newVal){
  count=newVal;
 }
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//145
console.log(count);//145

//等等,如果我想设置的时候是 自动加1呢?我设置145 实际上设置是146

var user ={
 name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  return count;
 },
 set:function(newVal){
  count=newVal+1;
 }
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//146
console.log(count);//146

说明 注意:当使用了getter或setter方法,不允许使用writable和value这两个属性(如果使用,会直接报错滴)

get 是获取值的时候的方法,类型为 function ,获取值的时候会被调用,不设置时为 undefined

set 是设置值的时候的方法,类型为 function ,设置值的时候会被调用,undefined

get或set不是必须成对出现,任写其一就可以

var user ={
 name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
 get:function(){
  console.log("这个人来获取值了!!");
  return count;
 },
 set:function(newVal){
  console.log("这个人来设置值了!!");
  count=newVal+1;
 }
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//146

js中Object.defineProperty()方法的不详解

【完结】

Object.defineProperty方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象

  • value: 设置属性的值
  • writable: 值是否可以重写。true | false
  • enumerable: 目标属性是否可以被枚举。true | false
  • configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
  • set: 目标属性设置值的方法
  • get:目标属性获取值的方法

下一篇,我们来看看怎么用它做一个简单的双向绑定

文章传送门 => 用Object.defineProperty手写一个简单的双向绑定

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
domReady的实现案例
Nov 23 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 #Javascript
微信小程序实现倒计时补零功能
Jul 09 #Javascript
Angular6中使用Swiper的方法示例
Jul 09 #Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 #Javascript
微信小程序实现漂亮的弹窗效果
May 26 #Javascript
Angular通过指令动态添加组件问题
Jul 09 #Javascript
js实现左右两侧浮动广告
Jul 09 #Javascript
You might like
PHP生成器简单实例
2015/05/13 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
js格式化时间的方法
2015/12/18 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Python IDLE入门简介
2017/12/08 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
python 修改本地网络配置的方法
2019/08/14 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
触摸春天教学反思
2014/02/03 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技