JS面向对象总结
2013-11-12 14:40
459 查看
创建对象的两种常用方式
//构造函数/原型方式 函数内找属性,原型找方法
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的操作
<html>
<head>
<script type="text/javascript">
//利用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);
//构造函数/原型方式 函数内找属性,原型找方法
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的操作
<html>
<head>
<script type="text/javascript">
//利用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);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js面向对象工作总结
- js面向对象学习总结
- js面向对象总结
- js面向对象总结
- js的面向对象总结
- js总结（三）：面向对象，prototype ,oo模拟
- js面向对象总结
- JS面向对象（智能社面向对象知识点总结）
- JS 面向对象实现 学习总结
- JS面向对象（智能社面向对象知识点总结）
- js面向对象总结（一）
- 面向对象总结
- js 宿主对象的属性和方法总结
- JAVA面向对象总结(一)
- js 面向对象练习
- C#面向对象第二天总结
- 第199天：js---扩充内置对象功能总结
- PHP OOP面向对象详细介绍总结（代码实例子）
- JavaScript基础精华02(函数声明，arguments对象，匿名函数，JS面向对象基础)
- 黑马程序员---温习面向对象知识点总结