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 相关文章推荐
获取内联和链接中的样式(js代码)
Apr 11 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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 变量定义方法
2009/06/14 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
vuex与组件联合使用的方法
2018/05/10 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python读写unicode文件的方法
2015/07/10 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
python实现KNN近邻算法
2020/12/30 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
师范毕业生自荐信
2013/10/17 职场文书
中层干部岗位职责
2013/12/18 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
学校万圣节活动方案
2014/02/13 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
五一劳动节活动总结
2015/02/09 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书