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 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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控制网页过期时间的代码
2008/09/28 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
javascript Object与Function使用
2010/01/11 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
详解webpack介绍&安装&常用命令
2017/06/29 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
Python学习资料
2007/02/08 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
python里反向传播算法详解
2020/11/22 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
人力资源总监工作说明
2014/03/03 职场文书
动员大会主持词
2014/03/20 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
班主任高考寄语
2015/02/26 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
道歉的话怎么说
2015/05/12 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
Golang 对es的操作实例
2022/04/20 Golang