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 DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 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
PDO的安全处理与事物处理方法
2016/10/31 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
js实现适配移动端的拖动效果
2020/01/13 Javascript
实例讲解React 组件
2020/07/07 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python字符编码判断方法分析
2016/07/01 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
python实现KNN分类算法
2019/10/16 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
交通事故和解协议书
2015/01/27 职场文书
公司酒会主持词
2015/07/02 职场文书
Java 多线程协作作业之信号同步
2022/05/11 Java/Android