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 相关文章推荐
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
Vue.js实现的购物车功能详解
Jan 27 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
Openlayers绘制地图标注
Sep 28 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 中的类
2006/10/09 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
简单的三步vuex入门
2018/05/20 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
深入解析Python中的WSGI接口
2015/05/11 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Python基础教程之异常详解
2019/01/10 Python
Python logging设置和logger解析
2019/08/28 Python
Python实现图片识别加翻译功能
2019/12/26 Python
python实现文字版扫雷
2020/04/24 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
物流专业求职计划书
2014/01/10 职场文书
国际贸易求职信
2014/07/05 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
招商银行收入证明
2015/06/17 职场文书
新学期开学寄语2016
2015/12/04 职场文书
新课程改革心得体会
2016/01/22 职场文书