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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
javascript自执行函数
Feb 10 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
vue.js轮播图组件使用方法详解
Jul 03 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 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 - Html Transfer Code
2006/10/09 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
详解JS模块导入导出
2017/12/20 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
详解Python自建logging模块
2018/01/29 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python如何删除文件中重复的字段
2019/07/16 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
数控机械专业个人的自我评价
2014/01/02 职场文书
欢迎标语大全
2014/06/21 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
会议主持人开场白台词
2015/05/28 职场文书