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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
List Installed Software Features
Jun 11 Javascript
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 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 curl库实现整站克隆功能
2015/02/12 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
理解Python中的With语句
2015/02/02 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python编程之string相关操作实例详解
2017/07/22 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
python导入模块交叉引用的方法
2019/01/19 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
汽车技术服务英文求职信范文
2014/01/02 职场文书
简历上的自我评价
2014/02/03 职场文书
银行服务感言
2014/03/01 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
大型演出策划方案
2014/05/28 职场文书
总经理司机岗位职责
2015/04/10 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js