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报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
JavaScript字符串对象
Jan 14 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 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
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
Yii核心验证器api详解
2016/11/23 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
关于Python如何避免循环导入问题详解
2017/09/14 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
非常详细的C#面试题集
2016/07/13 面试题
创业培训计划书
2014/05/03 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2014年防汛工作总结
2014/12/08 职场文书
小学中队活动总结
2015/05/11 职场文书
工作证明格式范文
2015/06/15 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL