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 事件冒泡简介及应用
Jan 11 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
vue axios整合使用全攻略
May 24 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
vue中使用腾讯云Im的示例
Oct 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP时间处理类操作示例
2018/09/05 PHP
php7 新增功能实例总结
2020/05/25 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
Vue实现购物车功能
2017/04/27 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
python分割和拼接字符串
2013/11/01 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python实现的knn算法示例
2018/06/14 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
哈弗商学院毕业生求职信
2014/02/26 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
英文求职信范文
2014/05/23 职场文书
谢师宴邀请函
2015/02/02 职场文书
简历自荐信范文
2015/03/09 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书