javascript动态添加、修改、删除对象的属性和方法

上一节介绍了如何引用一个对象的属性和方法,现在介绍如何为一个对象添加、修改或
者删除属性和方法。
在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对
应的类中修改,并重新实例化,而且程序必须经过重新编译。JavaScript 中却非如此,它提
供了灵活的机制来修改对象的行为,可以动态添加、修改、删除属性和方法。例如首先使用
类Object来创建一个空对象user:
var user=new Object();
1.添加属性
这时user 对象没有任何属性和方法,显然没有任何用途。但可以为它动态的添加属性
和方法,例如:
user.name=”jack”;
user.age=21;
user.sex=”male”;
通过上述语句,user 对象便具有了三个属性:name、age和sex。下面输出这三个语句:
alert(user.name);
alert(user.age);
alert(user.sex);
由代码运行效果可知,三个属性已经完全属于user 对象了。
2.添加方法
添加方法的过程和属性类似:
user.alert=function(){
alert(“my name is:”+this.name);
}
这就为user 对象添加了一个方法“alert”,通过执行它,可以弹出一个对话框显示自己
的名字介绍:
user.alert();
3.修改属性
修改一个属性的过程就是用新的属性替换旧的属性,例如:
user.name=”tom”;
user.alert=function(){
alert(“hello,”+this.name);
}
这样就修改了user 对象name属性的值和alert方法,它从显示“my name is”变为了显
示“hello”。
4.删除属性
删除一个属性的过程也很简单,就是将其置为undefined:
user.name=undefined;
user.alert=undefined;
这样就删除了name属性和alert方法。在之后的代码中,这些属性变的不可用。
在添加、修改或者删除属性时,和引用属性相同,也可以采用方括号([])语法:
user[“name”]=”tom”;
使用这种方式还有一个额外的特点,就是可以使用非标识符字符串作为属性名称,例如
标识符中不允许以数字开头或者出现空格,但在方括号([])语法中却可以使用:
user[“my name”]=”tom”;
需要注意,在使用这种非标识符作为名称的属性时,仍然要用方括号语法来引用:
alert(user[“my name”]);
而不能写为:
alert(user.my name);
利用对象的这种性质,甚至可以很容易实现一个简单的哈希表,在本书的后面将会看到
其应用。此可见,JavaScript中的每个对象都是动态可变的,这给编程带来了很大的灵活性,
也和其他语言产生了很大的区别,读者可以体会这种性质。
 
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,针对您的问题,我可以给您提供一些思路和示例代码。 首先,我们需要创建一个表格类,来表示整个表格。这个表格类可以包含一些属性,比如表头、行数、列数等。同时,我们还需要定义一些方法,来处理表格的操作,比如添加删除修改行和列等。 下面是一个简单的示例代码: ```javascript class Table { constructor(rows, cols, header) { this.rows = rows; this.cols = cols; this.header = header; this.data = []; // 初始化表格数据 for (let i = 0; i < rows; i++) { let row = []; for (let j = 0; j < cols; j++) { row.push(""); } this.data.push(row); } } // 添加一行 addRow() { let row = []; for (let j = 0; j < this.cols; j++) { row.push(""); } this.data.push(row); this.rows++; } // 删除一行 deleteRow(index) { this.data.splice(index, 1); this.rows--; } // 添加一列 addColumn() { for (let i = 0; i < this.rows; i++) { this.data[i].push(""); } this.cols++; } // 删除一列 deleteColumn(index) { for (let i = 0; i < this.rows; i++) { this.data[i].splice(index, 1); } this.cols--; } // 修改单元格 setValue(row, col, value) { this.data[row][col] = value; } // 获取单元格值 getValue(row, col) { return this.data[row][col]; } // 渲染表格 render() { let table = document.createElement("table"); // 添加表头 let thead = document.createElement("thead"); let tr = document.createElement("tr"); for (let j = 0; j < this.cols; j++) { let th = document.createElement("th"); th.innerHTML = this.header[j]; tr.appendChild(th); } thead.appendChild(tr); table.appendChild(thead); // 添加表格数据 let tbody = document.createElement("tbody"); for (let i = 0; i < this.rows; i++) { let tr = document.createElement("tr"); for (let j = 0; j < this.cols; j++) { let td = document.createElement("td"); td.innerHTML = this.data[i][j]; tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); // 返回表格对象 return table; } } // 使用示例 let table = new Table(3, 4, ["姓名", "性别", "年龄", "地址"]); table.setValue(0, 0, "张三"); table.setValue(0, 1, "男"); table.setValue(0, 2, "20"); table.setValue(0, 3, "北京"); table.addRow(); table.setValue(3, 0, "李四"); table.setValue(3, 1, "女"); table.setValue(3, 2, "18"); table.setValue(3, 3, "上海"); table.render(); ``` 以上是一个简单的面向对象动态表格实现,其中包括了表格的基本操作和渲染。您可以根据需要进行扩展和修改。希望能够帮助到您!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值