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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
JQuery select标签操作代码段
May 16 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
Python基于property实现类的特性操作示例
2018/06/15 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
五年级语文教学反思
2014/01/30 职场文书
保护水资源的标语
2014/06/17 职场文书
药店营业员岗位职责
2015/04/14 职场文书
暂停营业通知
2015/04/25 职场文书
婚礼家长致辞
2015/07/27 职场文书
初二数学教学反思
2016/02/17 职场文书
分家协议书范本
2016/03/22 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android