javascript动态创建对象的属性详解


Posted in Javascript onNovember 07, 2018

面向对象的JavaScript在客户端编码时提供了极大的灵活性,Javascript对象上的属性有助于设置可在对象内使用以管理和使用数据的值。

我对JavaScript中属性的理解,在javascript中,可以通过在文字对象上定义变量来创建属性。

例如

var obj = {
  property1: '',
  property2: ''
  };

现在可以通过使用来访问这些属性

obj.property1 = 'some value';
obj.property2 = 'some other value';

同样,类似地,它们也可以在对象Object内的函数内使用。

例如:

var obj = {
  property1: '',
  property2: '',
  foo : function(){
      console.log(obj.property1);
  }};

现在我们知道如何在javascript对象上创建属性,让我们看看如何在Javascript上创建动态属性

有两种方法可以做到这一点

在Javascript对象上定义类似于Array的动态属性

让我们采用与上面相同的例子:

var obj = {
  property1: '',
  property2: ''
  };

在对象Objo上创建动态属性,我们可以这样做:

obj['property_name'] = 'some_value';

它的作用是,它在对象上创建一个obj新属性可以访问它作为console.log(obj.property_name);

这将在控制台上输出值some_value

使用Object.defineProperty定义动态属性。

例:

// Example of an object property added with defineProperty with a data property descriptor
Object.defineProperty(obj, "property3", {value : 'some value',
              writable : true,
              enumerable : true,
              configurable : true});
// 'property3' property exists on object obj and its value is 37
Javascript 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
prototype Element学习笔记(篇二)
Oct 26 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 #Javascript
详解在vue-test-utils中mock全局对象
Nov 07 #Javascript
vue-cli 首屏加载优化问题
Nov 06 #Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 #Javascript
vue组件tabbar使用方法详解
Nov 06 #Javascript
微信小程序下拉框功能的实例代码
Nov 06 #Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 #Javascript
You might like
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python3 打开外部程序及关闭的示例
2018/11/06 Python
python导入坐标点的具体操作
2019/05/10 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
3种python调用其他脚本的方法
2020/01/06 Python
python 获取字典键值对的实现
2020/11/12 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
婚礼证婚人证婚词
2014/01/08 职场文书
初一生物教学反思
2014/01/18 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
被告代理词范文
2015/05/25 职场文书
英语演讲开场白
2015/05/29 职场文书
长江七号观后感
2015/06/11 职场文书
施工安全责任协议书
2016/03/23 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android