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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
vue中使用input[type="file"]实现文件上传功能
Sep 10 Javascript
React配置子路由的实现
Jun 03 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
基于mysql的论坛(3)
2006/10/09 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
jQuery构造函数init参数分析
2015/05/13 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
vue.js的安装方法
2017/05/12 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
浅谈Python基础—判断和循环
2019/03/22 Python
python实现飞机大战游戏
2020/10/26 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
python中常用的数据结构介绍
2021/01/12 Python
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
授权委托书样本
2014/09/25 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
七年级语文教学反思
2016/03/03 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js