javascript动态创建对象的属性详解

面向对象的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
赞 (0)

相关推荐

  • JS Testing Properties 判断属性是否在对象里的方法

    Testing Properties To check whether an object has a property with a given name. You can do this with the in operator, with the hasOwnProperty() and propertyIsEnumerable() methods, 在JS中判断一个对象是否包含某个属性,可以使用 in,hasOwnProperty() and propertyIsEnumerable()

  • JS声明对象时属性名加引号与不加引号的问题及解决方法

    一般情况下属性名加引号和不加引号是都可以的,效果是一样的. var obj = { name : '你好', 'age' : 1, }; document.write( obj['name'] + '<br />' ); document.write( obj.age); 上面两行代码均可以正确执行. 当且仅当你的属性名是非法怪异的名字时候,会报错. var obj = { 333 : '这个会报错' }; document.write( obj.333); 此时报错. var obj = {

  • 详解js访问对象的属性和方法

    对象的属性和方法统称为对象的成员. 访问对象的属性 在JavaScript中,可以使用" . "和" [ ] "来访问对象的属性. 二者区别:" . "表示法一般作为静态对象使用时来存取属性.而"[ ]"表示法在动态存取属性时就非常有用. var object = {name:'xiaoming',age:29}; var name1 = object.name;var name2 = object['name']; 访问对象

  • JavaScript选取(picking)和反选(rejecting)对象的属性方法

    有时候我们需要将一个对象的某些属性选取出来,比方说我们有一个用数组表示的数据库表,我们需要一些函数来 select (选取) 几个字段: function pick(obj, keys) { return keys.map(k => k in obj ? {[k]: obj[k]} : {}) .reduce((res, o) => Object.assign(res, o), {}); } const row = { 'accounts.id': 1, 'client.name': 'Joh

  • JavaScript 判断对象中是否有某属性的常用方法

    判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式. 一.点( . )或者方括号( [ ] ) 通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined.当然,这里的"不存在"指的是对象自身和原型链上都不存在,如果原型链有该属性,则会返回原型链上的属性值. // 创建对象 let test = {name : 'lei'} // 获取对象的自身的属性 test.name //"lei" test["name&q

  • JS实现json对象数组按对象属性排序操作示例

    JS实现json对象数组按对象属性排序操作示例

    本文实例讲述了JS实现json对象数组按对象属性排序操作.分享给大家供大家参考,具体如下: 在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据json中某一项进行数组的排序. 例如返回的数据结构大概是这样: { result:[ {id:1,name:'中国银行'}, {id:3,name:'北京银行'}, {id:2,name:'河北银行'}, {id:10,name:'保定银行'}, {id:7,name:'涞水银行'} ] } 现在我们根据业务需要,要根据

  • javascript动态创建对象的属性详解

    面向对象的JavaScript在客户端编码时提供了极大的灵活性,Javascript对象上的属性有助于设置可在对象内使用以管理和使用数据的值. 我对JavaScript中属性的理解,在javascript中,可以通过在文字对象上定义变量来创建属性. 例如 var obj = { property1: '', property2: '' }; 现在可以通过使用来访问这些属性 obj.property1 = 'some value'; obj.property2 = 'some other valu

  • Javascript中window.name属性详解

    关于window下自带name的属性 不知道大家有没有发现这样一种情况 在控制台里直接输出未声明变量,正常情况应该是会报错的,而且声明未赋值的变量输出应该是undefined var a; //undefined b; //报错 但是偏偏就个别特例,就是name属性 其实window自身就带有name这个属性,在控制台输入window可以可以看到 打开 往下翻就可以找到 window.name直译过来是窗口名字,主要用于为超链接和表单设置目标(targets),什么意思呢,我们做个案例 建立两个

  • JavaScript对象的property属性详解

    JavaScript中对象的property有三个属性:1.writable.该property是否可写.2.enumerable.当使用for/in语句时,该property是否会被枚举.3.configurable.该property的属性是否可以修改,property是否可以删除. 在ECMAScript 3标准中,上面三个属性的值均为true且不可改:新建对象的property是可写的.可被枚举的.可删除的:而在ECMAScript 5标准中,可通过property的描述对象(prope

  • JavaScript精炼之构造函数 Constructor及Constructor属性详解

    JavaScript精炼之构造函数 Constructor及Constructor属性详解

    除了创建对象,构造函数(constructor) 还做了另一件有用的事情-自动为创建的新对象设置了原型对象(prototype object) .原型对象存放于 ConstructorFunction.prototype 属性中. 例如,我们重写之前例子,使用构造函数创建对象"b"和"c",那么对象"a"则扮演了"Foo.prototype"这个角色: // 构造函数 function Foo(y) { // 构造函数将会以特

  • JavaScript实现动态生成表格案例详解

    JavaScript实现动态生成表格案例详解

    目录 前言 实现思路 实现代码  实现效果 前言 在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除. 实现思路 先创建一个表格和一个表单,将表单中输入的内容动态添加进表格中,表单页面右上角有一个关闭按钮,当点击时,可以将表单页面关闭并将表格页面显示.为了页面美观,我将添加数据的按钮放在了表格的<tfoot></tfoot>中,将动态生成的表格数据添加到<tbody><tbody>

  • JavaScript对Json的增删改属性详解

    使用JS对Json数据的处理,项目遇到需要对Json数据进行相关操作,比如增删改操作,本以为会比较难,网上搜索下,发现还是比较简单的,贴一段代码: <script type="text/javascript"> var json = { "age":24, "name":"cst" }; //修改Json中的age值,因为Json中存在age属性 json["age"] = 30; alert(

  • JavaScript 键盘事件的处理及属性详解

    目录 引言 处理键盘事件 键盘事件属性 引言 JavaScript 中的事件,当用户或浏览器尝试操作页面时,就会发生事件来处理 JavaScript 与HTML的交互.正如大家所知,JavaScript 与HTML一起工作,因此,页面加载.单击按钮.最小化窗口.单击鼠标.敲打键盘等发生的一切都是事件.就像在单击按钮时向用户显示任何消息一样,这是通过事件发生的. 所有HTML元素(如按钮.文本框.图像)都可以包含可以使用 JavaScript 代码触发的事件.所有这些事件都是DOM的一部分(文档对

  • javascript中Array()数组函数详解

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =

  • 玩转JavaScript OOP - 类的实现详解

    玩转JavaScript OOP - 类的实现详解

    概述 当我们在谈论面向对象编程时,我们在谈论什么? 我们首先谈论的是一些概念:对象.类.封装.继承.多态. 对象和类是面向对象的基础,封装.继承和多态是面向对象编程的三大特性. JavaScript提供了对象却缺乏类,它不能像C#一样能显式地定义一个类. 但是JavaScript的函数功能非常灵活,其中之一就是构造函数,结合构造函数和原型对象可以实现"类". 对象和类的概念 对象 "对象"是面向对象编程中非常重要的一个概念,一个对象是一个"东西"

  • JavaScript中BOM和DOM详解

    目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型)

随机推荐