您的位置：首页 > Web前端 > JavaScript

js面向对象

2015-07-01 14:49 651 查看

=========JS面向对象1===========

1. JS自带很多对象，这些对象下有很多方法。例如： Date() Array()

2. 面向对象特点（OOP）：

3 . 面向对象的组成：对象的属性和方法。

4. 工厂函数：（模仿系统自带的对象）

//当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)

//new后面调用的函数 : 叫做构造函数

function CreatePerson(name){

this.name = name;
this.showName = function(){
alert( this.name );
};

}

var p1 = new CreatePerson('小明');
//p1.showName();
var p2 = new CreatePerson('小强');
//p2.showName();

alert( p1.showName == p2.showName );  //false

var arr = new Array();
var date = new Date();

5. 基本类型的比较是只比较值相等，而对像之间的比较会比较值和引用地址是否相等。

6. 原型：去改写对象下面公用的方法或者属性，让公用的方法或者属性在内存中存在一份（提高性能）

7. 原型（prototype）方法要写在构造函数后面。

8. 面向对象的写法：

function 构造函数(){
this.属性
}

构造函数.原型.方法 = function(){};

var 对象1 = new 构造函数();
对象1.方法();

//当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)

//new后面调用的函数 : 叫做构造函数

function CreatePerson(name){

this.name = name;

}
CreatePerson.prototype.showName = function(){
alert( this.name );
};

var p1 = new CreatePerson('小明');
//p1.showName();
var p2 = new CreatePerson('小强');
//p2.showName();

alert( p1.showName == p2.showName );  //true

var arr = new Array();
var date = new Date();

9. 使用面向对象的方式编写选项卡：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script>

/*window.onload = function(){
var oParent = document.getElementById('div1');
var aInput = oParent.getElementsByTagName('input');
var aDiv = oParent.getElementsByTagName('div');

for(var i=0;i<aInput.length;i++){
aInput[i].index = i;
aInput[i].onclick = function(){
for(var i=0;i<aInput.length;i++){
aInput[i].className = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
};
}

};*/

//先变型:
//尽量不要出现函数嵌套函数
//可以有全局变量
//把onload中不是赋值的语句放到单独函数中

/*var oParent = null;
var aInput = null;
var aDiv = null;

window.onload = function(){

oParent = document.getElementById('div1');
aInput = oParent.getElementsByTagName('input');
aDiv = oParent.getElementsByTagName('div');

init();

};

function init(){
for(var i=0;i<aInput.length;i++){
aInput[i].index = i;
aInput[i].onclick = change;
}
}

function change(){
for(var i=0;i<aInput.length;i++){
aInput[i].className = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
}*/

//改成面向对象:
//全局变量就是属性
//函数就是方法
//Onload中创建对象

//改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象

window.onload = function(){

var t1 = new Tab();
t1.init();

};

function Tab(){
this.oParent = document.getElementById('div1');
this.aInput = this.oParent.getElementsByTagName('input');
this.aDiv = this.oParent.getElementsByTagName('div');
}

Tab.prototype.init = function(){
var This = this;
for(var i=0;i<this.aInput.length;i++){
this.aInput[i].index = i;
this.aInput[i].onclick = function(){
This.change(this);
};
}
};

Tab.prototype.change = function(obj){
for(var i=0;i<this.aInput.length;i++){
this.aInput[i].className = '';
this.aDiv[i].style.display = 'none';
}
obj.className = 'active';
this.aDiv[obj.index].style.display = 'block';
};

</script>
</head>

<body>
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
</div>
</body>
</html>

重用，然后第二次调用的时候添加其他方法：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script>

/*var arr = [4,7,1,3];
arr.sort();  // 1 3 4 7

var arr2 = [4,7,1,3];
arr2.push(5);
arr2.sort(); // 1 3 4 5 7
*/

window.onload = function(){

var t1 = new Tab('div1');
t1.init();
t1.autoPlay();

var t2 = new Tab('div2');
t2.init();
t2.autoPlay();

};

function Tab(id){
this.oParent = document.getElementById(id);
this.aInput = this.oParent.getElementsByTagName('input');
this.aDiv = this.oParent.getElementsByTagName('div');
this.iNow = 0;
}

Tab.prototype.init = function(){
var This = this;
for(var i=0;i<this.aInput.length;i++){
this.aInput[i].index = i;
this.aInput[i].onclick = function(){
This.change(this);
};
}
};

Tab.prototype.change = function(obj){
for(var i=0;i<this.aInput.length;i++){
this.aInput[i].className = '';
this.aDiv[i].style.display = 'none';
}
obj.className = 'active';
this.aDiv[obj.index].style.display = 'block';
};

Tab.prototype.autoPlay = function(){

var This = this;

setInterval(function(){

if(This.iNow == This.aInput.length-1){
This.iNow = 0;
}
else{
This.iNow++;
}

for(var i=0;i<This.aInput.length;i++){
This.aInput[i].className = '';
This.aDiv[i].style.display = 'none';
}
This.aInput[This.iNow].className = 'active';
This.aDiv[This.iNow].style.display = 'block';

},2000);

};

</script>
</head>

<body>
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
</div>

<div id="div2">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航