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 tab 选项卡
Apr 26 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
JavaScript中var的重要性实例分析
Jul 09 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和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
完美解决js传递参数中加号和&号自动改变的方法
2016/10/11 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
python聊天程序实例代码分享
2013/11/18 Python
python计算最小优先级队列代码分享
2013/12/18 Python
python插入数据到列表的方法
2015/04/30 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
办理护照介绍信
2014/01/16 职场文书
退休感言
2014/01/28 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
postgresql中如何执行sql文件
2023/05/08 PostgreSQL