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的replace方法介绍
Oct 20 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 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 递归效率分析
2009/11/24 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
为你总结一些php信息函数
2015/10/21 PHP
实现PHP搜索加分页
2016/10/12 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
python3 求约数的实例
2019/12/05 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
Python创建临时文件和文件夹
2020/08/05 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python