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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
ES5新增数组的实现方法
May 12 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
js 手机号码合法性验证代码集合
2012/09/29 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
node.js到底要不要加分号浅析
2018/07/11 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python文件和流(实例讲解)
2017/09/12 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
python如何随机生成高强度密码
2020/08/19 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
文员个人的求职信范文
2013/09/26 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
简单的辞职信范文
2014/01/18 职场文书
九年级历史教学反思
2014/01/27 职场文书
四年级学生评语大全
2014/04/21 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android