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的实现回车键Enter切换焦点
Sep 14 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
浅谈React和Redux的连接react-redux
Dec 04 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 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数字格式化
2006/12/06 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python中字符串的格式化方法小结
2016/05/03 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
学习Python爬虫的几点建议
2020/08/05 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
公司庆典欢迎词
2015/01/26 职场文书
特此通知格式
2015/04/27 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
SQL中的三种去重方法小结
2021/11/01 SQL Server
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server