JavaScript从入门到入门（七）

第四章 JavaScript自定义对象及表格操作

01.JavaScript自定义对象

目前在Javascript中，已经存在一些标准的类，例如Date、Array、RegExp、String、Math、Number等等，这为我们编程提供了许多方便。但对于复杂的客户端程序而言，这些还远远不够。我们也可以根据JS的对象扩展机制，用户可以自定义JS对象，，例如定义User类、Hashtable类等等。

1.1 自定义对象方式

自定义对象方式有以下7种：直接创建方式、对象初始化器方式、构造函数方法、prototype原型方式、混合的构造函数/原型方式、动态原型方式和工厂模式。
1）直接创建式

var objectName = new Object();
objectName.property1 = value1;
...
objectName.propertyN = valueN;
objectName.methodName1 = function([参数列表]){
    //函数体
}
...
objectName.methodNameN = function([参数列表]){
    //函数体
}

2）对象初始化器方式

objectName = {property1:value1,
              property2:value2,
              …, 
              propertyN:valueN
              methodName1:function([参数列表]){
                                                //函数体
              }
              ...
              methodNameN:function([参数列表]){
                                                //函数体
              }
}

3）构造函数式

function 函数名([参数列表]){       //一般这种方法函数名首字母大写
        this.属性1 = 属性值1;
        ...
        this.属性N = 属性值N;
        this.函数1 = method1;
        ...
        this.函数N = methodN;
        }
        
function method1([参数列表]){
                //函数体
}
function methodN([参数列表]){
                 //函数体
}

4）原型（prototype）方式

function 对象构造器(){
}
对象构造器.prototype.属性名 = 属性值；
对象构造器.prototype.函数名 = function([参数列表]){
                 //函数体
}

注意：在声明一个新的函数后，该函数（在JavaScript中，函数也是对象）就会拥有一个prototype的属性，通过该属性可以为对象添加新的属性和方法。
5）混合的构造函数/原型方式
构造函数方式便于动态为属性赋值，但是这种方式将方法也定义在了构造方法体中，使得代码比较杂乱；而原型方式不便于为属性动态赋值，但是这种方式定义的属性和方法实现了分离；所以取长补短——构造函数定义属性，原型方式定义方法。

function 对象构造器([参数列表]){
}
对象构造器.prototype.函数名 = function([参数列表]){
                 //函数体
}

6）工厂模式

function 对象构造器([参数列表]){
var Objectname = new Object();
Objectname.属性 = 属性;
Objectname.函数 = function(){
                    //函数体
                  }
}

7）动态原型方式
在构造函数中通过标志量让所有的对象共享一个方法，而每个对象拥有自己的属性

function 对象构造器([参数列表]){
    this.属性=属性;
    对象构造器.prototype.method=function(){
            //函数体
        }
    }
}

1.2 表格操作

• 建立表格
  HTML中<table>定义表格布局。
  包含的元素：
  <caption></caption>:表头信息
  <tr></tr>:定义一个表格行
  <th></th>:定义一个表格头，若是纯文字，则会默认粗体
  <td></td>:定义一个单元格
• 操作表格
  1）插入表格
  Javascript可以控制table，动态的插入行和单元格。主要有insertRow和insertCell两种方法
  rows保存着<tbody>元素中行的HTMLCollection。语法为

tableObject.insertRow(index)

该方法创建一个新的 TableRow 对象，表示一个新的<tr>标记，用于在表格中的指定位置插入一个新行，并返回这个新插入的行 TableRow，新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。如果表是空的，则新行将被插入到一个新的<tbody> 段，该段自身会被插入表中。若参数 index 小于 0 或大于表中的行数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。
table.insertRow()，默认添加到最后一行，统计行数：table.rows.length

cells保存着<tr>元素中单元格的HTMLCollectioin集合，语法为

rowObject.insertCell(pos)

insertCell(pos) 向cells集合的指定位置插入一个单元格,并返回引用；默认添加到最后一列，还可以根据需要动态改变单元格的属性，统计列数：table.rows.item(0).cells.length

2）删除表格
table.deleteRow(index) 用来删除指定位置的行。
通过node.parentNode找到节点的父节点，然后用rowObject.rowIndex找到行索引，再用table.deleteRow(index)删除行。示例

function del(r){
    var i = r.parentNode.parentNode.rowIndex;   //访问被删除行的索引
    document.getElementById('myTable').deleteRow(i);    //删除行
    }

row.deleteCell(index) 用来/删除指定位置的单元格
DOM方法：removeChild(node)用来删除子节点（元素）

参考：
1.JavaScript——自定义对象总结
2.JS 创建自定义对象的方法

后续持续更新……
原创不易，如果觉得不错，就点个赞吧！