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实现键盘方向键翻页功能的代码
Jun 03 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
Vue自定义toast组件的实例代码
Aug 15 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 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 文件上传实例代码
2012/04/19 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php魔术变量用法实例详解
2014/11/13 PHP
php多线程并发实现方法
2016/09/30 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
怎么清空javascript数组
2013/05/11 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
Python的randrange()方法使用教程
2015/05/15 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
如何使用repr调试python程序
2020/02/28 Python
windows支持哪个版本的python
2020/07/03 Python
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
企业承诺书怎么写
2014/05/24 职场文书
担保书格式
2015/01/20 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
运动会广播稿300字
2015/08/19 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL