javascript面向對象寫法與應用
一、什麼是對象？
對象是n個屬性和方法組成的集合，如js內置的document, Date, Regexp, Math等等
document就是有很多的屬性和方法, 如：getElementById, getElementsByTagName等等這些就是document對象支持的方法，那麼我們常見的onclick, onmouseover,onmouseout等等就是document支持的屬性
二、javascript創建自定義對象，常用的有兩種方式：
上面是js內置的對象，如果我們需要自己創建對象，可以使用下面2種方式【構造函數方式與字面量方式】：
1, var obj = new Object() 構造函數方式
2, var obj = {} 字面量方式，其實就是一個json
三、為對象添加屬性和方法
var obj = new Object();
obj.userName = 'ghostwu';
obj.age = 22;
obj.sex = 'man';
obj.showUserName = function(){
alert( obj.userName );
}
obj.showUserName();
此處創建了一個obj對象， 添加了3個屬性: userName, age, sex，一個方法: showUserName
訪問屬性和方法：
對象.屬性名稱
對象.方法名稱()
另一種形式創建對象
var obj = {};
obj.userName = 'ghostwu';
obj.age = 22;
obj.sex = 'man';
obj.showUserName = function(){
return this.userName + '---->' + this.age + '---->' + this.sex;
}
alert( obj.showUserName() );
先創建一個空的json,然後再為這個空的json對象添加屬性和方法，上例方法中使用了一個關鍵詞this,
也可以直接在創建json的時候，添加屬性和方法
var obj = {
userName : 'ghostwu',
age :22,
sex :'man',
showInfo : function(){
return this.userName + '---->' + this.age + '--->' + this.sex;
}
};
alert( obj.showInfo() );
四，用面向對象的寫法，封裝一個加、減法.
方式一:
var obj = new Object();
obj.add = function( a, b ){
return a + b;
};
obj.sbb = function( a, b ){
return a - b;
}
alert( obj.add( 10, 20 ) );
alert( obj.sbb( 10, 20 ) );
方式二:
var obj = {};
obj.add = function( a, b ){
return a + b;
}
obj.sbb = function( a, b ){
return a - b;
}
alert( obj.add( 10, 20 ) );
alert( obj.sbb( 10, 20 ) );
方式三:
var obj = {
add : function( a, b ){
return a + b;
},
sbb : function( a, b ){
return a - b;
}
};
alert( obj.add( 10, 20 ) );
alert( obj.sbb( 10, 20 ) );
五、用面向對象的寫法，封裝一個素數對象
var Prime = {
aPrime : [],
isPrime : function( n ){
if ( n < 2 ) {
return false;
}else {
var flag = true;
for( var i = 2; i < n; i++ ){
if( n % i == 0 ) {
flag = false;
break;
}
}
return flag;
}
},
getPrime : function( start, end ){
for( var i = start; i <= end; i++ ){
if( this.isPrime( i ) ) {
this.aPrime.push( i );
}
}
return this.aPrime;
},
count : function(){
return this.aPrime.length;
}
};
alert( Prime.isPrime( 11 ) );
alert( Prime.getPrime( 1, 100 ) );
alert( Prime.count() );
這裡我用的是json方式，你可以試試用構造函數方式改寫
六、面向對象的寫法，封裝一個隔行變色的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
margin: 10px;
padding: 10px;
}
.even-color {
background:#ccc;
}
.odd-color {
background: #eee;
}
.active{
background:yellow;
}
</style>
<script>
var Bg = {
aDiv : [],
oldColor : null,
init : function(){
this.aDiv = document.querySelectorAll( "div" );
},
setBgColor : function(){
for( var i = 0 ; i < this.aDiv.length; i++ ){
if( i % 2 == 0 ) {
this.aDiv[i].className = 'even-color';
}else {
this.aDiv[i].className = 'odd-color';
}
}
},
hover : function(){
var that = this;
for( var i = 0 ; i < this.aDiv.length; i++ ){
this.aDiv[i].onmouseover = function(){
that.oldColor = this.className;
this.className = 'active';
}
this.aDiv[i].onmouseout = function(){
this.className = that.oldColor;
}
}
}
}
window.onload = function(){
Bg.init();
Bg.setBgColor();
Bg.hover();
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
我們可以在此例的基礎上，稍加改造，讓對象支持像jquery一樣的鏈式調用，只需要在3個方法中， 返回當前對象(this)即可
var Bg = {
aDiv : [],
oldColor : null,
init : function(){
this.aDiv = document.querySelectorAll( "div" );
return this;
},
setBgColor : function(){
for( var i = 0 ; i < this.aDiv.length; i++ ){
if( i % 2 == 0 ) {
this.aDiv[i].className = 'even-color';
}else {
this.aDiv[i].className = 'odd-color';
}
}
return this;
},
hover : function(){
var that = this;
for( var i = 0 ; i < this.aDiv.length; i++ ){
this.aDiv[i].onmouseover = function(){
that.oldColor = this.className;
this.className = 'active';
}
this.aDiv[i].onmouseout = function(){
this.className = that.oldColor;
}
}
}
}
window.onload = function(){
Bg.init().setBgColor().hover();
}