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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
python获取外网ip地址的方法总结
2015/07/02 Python
python实现给数组按片赋值的方法
2015/07/28 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Django模板语言 Tags使用详解
2019/09/09 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
windows支持哪个版本的python
2020/07/03 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
2014年终个人总结报告
2015/03/09 职场文书
毕业论文致谢范文
2015/05/14 职场文书
安全教育观后感
2015/06/17 职场文书