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对象与JSON格式数据相互转换
Feb 20 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
DIV始终居中的js代码
Feb 17 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
node读写Excel操作实例分析
Nov 06 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
消息持续发送的完整例子
2006/10/09 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
js模拟微博发布消息
2017/02/23 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
轻松掌握python设计模式之策略模式
2016/11/18 Python
深入浅出学习python装饰器
2017/09/29 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
应届生保险求职信
2013/11/11 职场文书
化工专业推荐信范文
2013/11/28 职场文书
证婚人经典证婚词
2014/01/09 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
好家长事迹材料
2014/01/23 职场文书
公司应聘求职信
2014/06/21 职场文书
班级心理活动总结
2014/07/04 职场文书
公司2015年终工作总结
2015/05/26 职场文书
优质服务标语口号
2015/12/26 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python