前端 - JS 面向物件(上)
阿新 • • 發佈：2018-11-12
文章目錄
01-面向物件
01-demo.html
<!DOCTYPE HTML> <html> <head> <title>please enter your title</title> <meta charset="gbk"> <meta name="Author" content="潭州學院-阿飛老師"> <style type='text/css'> *{ margin:0; padding:0; font-family:'Microsoft yahei';} </style> </head> <body> <script type="text/javascript"> /* 面向過程 面向物件： 是一種開發模式 所有的東西都從物件的角度出發 繼承 */ /* new Image(); new Date(); new Array(); new XMLHttpRequest(); new RegExp(); */ var obj1 = new Object(); obj1.name = '阿飛'; obj1.showName = function(){ alert( this.name ); }; var obj2 = new Object(); obj2.name = '安安'; obj2.showName = function(){ alert( this.name ); }; var obj3 = new Object(); obj3.name = '尼古拉斯'; obj3.showName = function(){ alert( this.name ); }; var obj4 = new Object(); obj4.name = 'inn'; obj4.showName = function(){ alert( this.name ); }; function person( name ){ var obj = new Object(); obj.name = name; obj.showName = function(){ alert( this.name ); }; return obj; }; var obj1 = person('阿飛'); var obj2 = person('安安'); var obj3 = person('尼古拉斯'); var obj4 = person('inn'); obj2.showName(); // 呼叫面向物件中的方法 /* a(); function a(){ alert( this ); }; */ </script> </body> </html>
02- new關鍵字
02-demo.html
<!DOCTYPE HTML> <html> <head> <title>please enter your title</title> <meta charset="gbk"> <meta name="Author" content="潭州學院-阿飛老師"> <style type='text/css'> *{ margin:0; padding:0; font-family:'Microsoft yahei';} </style> <script type="text/javascript" src='http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js'></script> </head> <body> <script> /* 在函式執行前面加new關鍵字 : 1.函式的內部會自動產生一個新物件； 2.函式內部的this指向這個物件； 3.函式預設返回這個物件 */ /* alert( new goudan().name ); //new goudan()返回一個物件 function goudan(){ //alert( this ); this.name = '1' }; */ //建構函式 工廠模式(建構函式作為封裝函式可構造(new)多個物件) function Person( name ){ //產生新物件，this -> 物件 this.name = name; //建構函式內this指標指向返回的物件 this.showName = function(){ alert( this.name ); }; //預設返回這個物件 }; var obj1 = new Person('阿飛'); var obj2 = new Person('安安'); var obj3 = new Person('尼古拉斯'); var obj4 = new Person('inn'); obj3.showName(); function person( name ){ var obj = new Object(); //建構函式內不用new一個新物件 //為減少程式碼以減少儲存記憶體,用this指標 //作簡化 obj.name = name; obj.showName = function(){ alert( this.name ); }; return obj; }; var obj1 = person('阿飛'); var obj2 = person('安安'); var obj3 = person('尼古拉斯'); var obj4 = person('inn'); obj2.showName(); </script> </body> </html>
03-原型
03-demo.html
<!DOCTYPE HTML> <html> <head> <title>please enter your title</title> <meta charset="gbk"> <meta name="Author" content="潭州學院-阿飛老師"> <style type='text/css'> *{ margin:0; padding:0; font-family:'Microsoft yahei';} </style> </head> <body> <script> /* 原型：prototype 只有建構函式有原型 建構函式.prototype 在寫面向物件的時候注意： 私有的屬性/方法，放在建構函式裡面 公共的屬性/方法，放在原型裡面 */ function Person( name ){ this.name = name; }; Person.prototype.showName = function(){ alert( this.name ); }; var obj1 = new Person('阿飛'); var obj2 = new Person('anan'); var obj3 = new Person('尼古拉斯'); var obj4 = new Person('inn'); //obj4.showGoudan(); alert( obj1.name == obj2.name ); //false 物件私有屬性 alert( obj1.showName == obj2.showName ); //true 物件公有屬性方法是一樣的 /* * 未使用原型prototype的面向物件 * 建構函式內只能設定私有屬性方法 * * */ function Person(name){ this.name = name; this.showName = function () { alert(this.name) } } var obj1 = new Person('chung'); var obj2 = new Person('kris'); alert( obj1.name == obj2.name ); //false alert( obj1.showName == obj2.showName); // false 未用原型定義的公有屬性, 私有屬性方法即使功能一樣也不是同一方法, // 就像小明家的拖把和小華家的拖把，型別功能一樣，但並不是同一物件 // 原型設定的公有屬性即小明小華兩家共用一把拖把 </script> </body> </html>
04- JS 中 = 的意義
04-demo.html
<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="gbk">
<meta name="Author" content="潭州學院-阿飛老師">
<style type='text/css'>
*{ margin:0; padding:0; font-family:'Microsoft yahei';}
</style>
</head>
<body>
<script>
/*
= : (JS中=有兩種定義)
1.賦值 基礎資料型別
2.引用 物件/函式
賦值，即將一個變數值賦值給另一個變數，基礎資料型別
兩個變數的更改互不影響
引用,當變數是物件或者函式時，=即引用的意思，另一個
變數引用目標變數，另一個變數改變也會是目標變數做出
相應改變
*/
var a = 10;
var b = 10;
var a = [1,2,3];
var b = [1,2,3];
alert( a == b ); //false : a與b 類似，但記憶體地址不同，不等
var a = [1,2,3];
var b = a;
b = [1,2,3,4];
alert( b ); // [1,2,3,4] b未做出更新，不影響其引用的a
alert( a ); // [1,2,3]
var a = [1,2,3];
var b = a;
b.push(4);
alert( b ); //[1,2,3,4] b引用a b做出更新直接改變a的值
alert( a ); //[1,2,3,4]
// alert() 內a++ 與 ++a的不同
var a = 1;
a++;// var b = a; a = a + 1;
++a;// a = a + 1; var b = a;
alert( a ); //2 2
alert(a++); //1
alert(++a); //2
</script>
</body>
</html>
面向物件寫輪播
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
li{list-style: none}
#wrap{
width:974px;
height:563px;
margin:50px auto;
position: relative;
}
#wrap .pic li{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
#wrap .pic li img{
width:100%;
height:100%;
display: none;
}
#wrap .tab li{
width:11px;
height:11px;
border-radius: 100%;
border:1px solid lightseagreen;
background:#fff;
float: left;
margin-left:8px;
cursor: pointer;
}
#wrap .tab li.on{
background:rgba(0,0,0,.5);
}
#wrap .tab{
width:110px;
height:20px;
position:absolute;
bottom: 20px;
left:45%;
}
</style>
</head>
<body>
<div id="wrap">
<ul class="pic">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
</ul>
<ul class="tab">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
/*
*
* 面向物件寫輪播圖
* 1.獲取元素標籤為需求操作
* 2.定義需要用到的變數為面向物件私有屬性
* 3.輪播圖程式碼身體部分定義為面向物件公有屬性，方便專案不同地方構造物件直接呼叫
* 此過程為面向物件的建構函式的封裝
*
*
* */
function Banner( img , tab , wrap , btn){ // 形參可設定多個,根據需求獲取元素標籤
// 定義物件私有屬性-定義獲取元素標籤
this.oPli = img;
this.oTli = tab;
this.oWrap = wrap;
this.oBtn = btn;
// 定義物件私有屬性-定義需要用到的變數
this.length = this.oTli.length;
this.timer = null;
this.index = 0;
}
// 定義物件公有屬性
Banner.prototype.init = function () {
this.oPli[0].style.display = 'block';
this.oTli[0].className = 'on';
for( var i=0;i<this.length;i++ ){
//獲取點選之前的li下標值
this.oTli[i].index = i;
var This = this;
this.oTli[i].onclick = function(){
var clickThis = this;
This.change(function(){
This.index = clickThis.index;
});
};
};
// 定時器部分
this.auto();
// 滑鼠劃入清除定時器
this.oWrap.onmouseenter = function(){
clearInterval(This.timer);
};
this.oWrap.onmouseleave = function(){
This.auto();
};
};
// 定義一個自主輪播公用屬性
Banner.prototype.auto = function () {
var This = this;
this.timer = setInterval(function(){
// 方法內呼叫物件的方法或者變數需要定義this指標的確定位置
This.change(function(){
This.index++;
This.index %= This.length;
});
},3000);
};
// 定義一個change方法的公有屬性
Banner.prototype.change = function( fn ){
this.oPli[this.index].style.display = 'none';
this.oTli[this.index].className = '';
fn&&fn();
this.oPli[this.index].style.display = 'block';
this.oTli[this.index].className = 'on';
};
// 物件模型寫好後，獲取元素標籤並進行構造物件
var oPli = document.getElementsByClassName('pic')[0].getElementsByTagName('img');
var oTli = document.getElementsByClassName('tab')[0].getElementsByTagName('li');
var oWrap = document.getElementById('wrap');
var banner1 = new Banner( oPli , oTli , oWrap );
banner1.init();
#########################################################################################################
#########################################################################################################
#########################################################################################################
/*
* 面向過程寫輪播
*
*
*
* */
var oPli = document.getElementsByClassName('pic')[0].getElementsByTagName('img');
var oTli = document.getElementsByClassName('tab')[0].getElementsByTagName('li');
var oWrap = document.getElementById('wrap');
var index = 0;
var timer;
var length = oTli.length;
//初始化輪播圖
oPli[0].style.display = 'block';
oTli[0].className = 'on';
for( var i=0;i<length;i++ ){
// 定義屬性index 初始化值為i
oTli[i].index = i;
oTli[i].onclick = function () {
var This = this;
change( function(){
index = This.index;
} )
}
}
function change( fn ){
oPli[index].style.display = 'none';
oTli[index].className = '';
fn&&fn();
oPli[index].style.display = 'block';
oTli[index].className = 'on';
}
//定時器部分
auto();
function auto(){
timer = setInterval(function(){
change( function(){
index ++;
index %= length;
} );
},3000);
}
// 處理滑鼠劃入清除定時器函式
oWrap.onmouseenter = function () {
clearInterval(timer);
};
oWrap.onmouseleave = function(){
auto();
};
</script>
</body>
</html>