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插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
Node.js模块加载详解
Aug 16 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
详解JavaScript的变量
Apr 04 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
JavaScript中的Proxy对象
Nov 27 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 类相关函数的使用详解
2013/05/10 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
详解angular element()方法使用
2017/04/08 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
详解Python中with语句的用法
2015/04/15 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
python读取和保存视频文件
2018/04/16 Python
Python3离线安装Requests模块问题
2019/10/13 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Django缓存Cache使用详解
2020/11/30 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
出国导师推荐信
2015/03/25 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
用javascript制作qq注册动态页面
2021/04/14 Javascript
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript