JS面向对象总结

创建对象的两种常用方式

//构造函数/原型方式函数内找属性,原型找方法
function Car(sColor,IDoors,Impg){
   this.color = sColor;
   this.door = IDoors;
   shi.mgp = Imgp;

}

Car.prototype.showColor = function(){
   alert(this.color);
}

var car1 = new Car("red",3,4);
car1.showColor();

var car2 = new Car("blue",4,5);
car1.showColor();

//动态原型方法
function Car(sColor,IDoors,Impg){
   this.color = sColor;
   this.door = IDoors;
   shi.mgp = Imgp;
   //判断原型赋予了
   if(typeof Car._initialized == "undefined"){
       alert(this.color);
   }
   Car._initialized = true;
}

var car1 = new Car("red",3,4);
car1.showColor();

var car2 = new Car("blue",4,5);
car1.showColor();

//利用str 和利用原型进行字符添加的性能比较
1:定义StringBuffer类
function StringBuffer(){
    this._strings_ = new Array;
}
//添加方法
StringBuffer.prototype.apppend = function(str){
    this._strings_.push(str);
}
//toString的方法
StringBuffer.prototype.toString = function(){
    return this.strings_.join("");
}

----------------------------
var d1 = new Date();
var str = "";
for(var i =0; i < 10000; i++){
    str += "text";
}
var d2 = new Date();
-----------------------------

var oBuffer = new StringBuffer();
d1 = new Date();
for(var i = 0; i <1000; i++){
    oBuffer.append("text");
}
var sResult = buffer.toString();
d2 = new Date();
-------------------------------
结果就是利用原型的执行速度比自己拼装的快50%-66%

//利用原型实现自己的一些方法,好比在自己建立一个可以找到到数组中某一个元素的位置

Array.prototype.indexOf = function(vItem){

for(var i =0; i < this.length; i++){

if(vItem == this.[i]){

return i;

}

return -1;

}

var aColors = new Array("red","green","yellow");

alert(aColors.indexOf("green"));

//DOM对table的操作

        //利用table的属性对table进行操作
        function addTable(){
            //创建Table元素
           var oTable = document.createElement("table");
           //设置元素的属性
           oTable.setAttribute("border","1");
           oTable.setAttribute("width","100%");
           //创建tBody
           var oBody = document.createElement("tbody");
           //然后把oBody加到table中
           oTable.appendChild(oBody);

           //然后创建单元格
           oBody.insertRow(0);
           oBody.rows[0].insertCell(0);
           oBody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));
           oBody.rows[0].insertCell(1);
           oBody.rows[0].cells[1].appendChild(document.createTextNode("cell 1,2"));

           oBody.insertRow(1);
           oBody.rows[1].insertCell(0);
           oBody.rows[1].cells[0].appendChild(document.createTextNode("cell 2,1"));
           oBody.rows[1].insertCell(1);
           oBody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));

           document.body.appendChild(oTable);
       }

        //利用appendChild拼装
       function addTable1(){

           //创建Table元素
           var oTable = document.createElement("table");
           //设置元素的属性
           oTable.setAttribute("border","1");
           oTable.setAttribute("width","100%");
           //创建tBody
           var oBody = document.createElement("tbody");
           //然后把oBody加到table中
           oTable.appendChild(oBody);

           var tr = document.createElement("tr");

           var td = document.createElement("td");
           td.appendChild(document.createTextNode("cell 1,1"));

           tr.appendChild(td);

           var td1 = document.createElement("td");
           td1.appendChild(document.createTextNode("cell 1,1"));
           tr.appendChild(td1);

           oBody.appendChild(tr);

           var tr1 = document.createElement("tr");
           var td1 = document.createElement("td");
           td1.appendChild(document.createTextNode("cell 1,1"));
           tr1.appendChild(td1);

           var td12 = document.createElement("td");
           td12.appendChild(document.createTextNode("cell 1,1"));
           tr1.appendChild(td12);

           oBody.appendChild(tr1);

           document.body.appendChild(oTable);


       }
   </script>
</head>
<body onload = "addTable1();">

</body>
<html>

//js对NodeIterator的操作

<html>
<head>
<script type="text/javascript">
      var ite = null;
      function makeList(){
          var oDiv = document.getElementById("div1");
          var oFilter = new Object();
          oFilter.acceptNode = function(oNode){
              return (oNode.tagName == "p")? NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT;
          };
          ite = document.createNodeIterator(oDiv,NodeFilter.SHOW_ELEMENT,oFilter,false);
          var oOutPut = document.getElementById("text1");
          var oNode = ite.nextNode();
          while(oNode){
              oOutPut.value += oNode.tagName + "\n";
              oNode = ite.nextNode();
          }

      }
</script>
</head>

<body>
     <div id = "div1">
         <p>hello <b>world!</b></p>
       <ul>
             <li>list1</li>
           <li>list2</li>
           <li>list3</li>
       </ul>
   </div>
   <textarea rows="10",cols="40" id="text1"></textarea><br/>
   <input type= "button" value="Make List" onclick="makeList()" />

</body>
</html>

//js对元素的增删改查

增加:

var text = document.createTextNode("hello");

var pElement = document.createElement("p");

pElement.appendChild(text );

删除:

var pElement= document.getElementsByTag("P")[0];

pElement.parentNode.removeChild(pElement);

修改:

var oldElement= document.getElementsByTag("P")[0];

var text = document.createTextNode("new");

var newElement = document.createElement("p");

newElement.appendChild(text);

oldElement.parentNode.replace(newElement,oldElement);