JavaScript面向對象入門

什麼是JavaScript？

咱們能夠從幾個方面去說JavaScript是什麼：

• 基於對象
  • javaScript中內置了許多對象供咱們使用【String、Date、Array】等等
  • javaScript也容許咱們本身自定義對象
• 事件驅動
  • 當用戶觸發執行某些動做的時候【鼠標單機、鼠標移動】，javaScript提供了監聽這些事件的機制。當用戶觸發的時候，就執行咱們本身寫的代碼。
• 解釋性語言
  • [x] javaScript代碼是由瀏覽器解析的，並不須要編譯。
• 基於瀏覽器的動態交互技術
  • 既然javaScript是由瀏覽器解析的，那麼它確定要基於瀏覽器。 javaScript讓網頁變得更加「靈活""
• 弱類型
  • [x] 像java、c++等編譯型語言，要先定義變量，後使用。javaScript可以直接使用，不須要先定義

---

JavaScript變量類型

javaScript變量可分爲三種類型：

• 基本類型【number、string、boolean】
  • javaScript是弱類型語言，在運行的時候才知道具體的類型是什麼。全部類型都用var來修飾。
• 特殊類型【null、undefined】
  • 當定義了變量，沒有任何賦值的時候，該變量就是undefined類型
• 複合類型【數組、對象、函數】

---

javaScript對象的類型

在JavaScript中對象的類型可分爲4種：

• 內置對象【String、Math、Array】
• 自定義對象【程序員本身建立的對象】
• 瀏覽器對象【windows、document、history、status等等與瀏覽器相關的對象】
• ActiveXObject（XMLHttpRequest）對象【異步對象，使用AJAX用到的對象，使用該對象與服務器進行異步交互】

定義函數三種方式

函數是屬於特殊類型的一種，在另一篇博文已經講解了建立對象、建立類的幾種方式，可參考：blog.csdn.net/hon_3y/arti…

值得注意的是：javaScript定義函數的時候，參數的類型是不用聲明的！

正常方式

下面就定義了一個名稱爲mysum的函數

function mysum(num1,num2){
			return num1 + num2;
		}
		var myresult = mysum(100,200);
		alert("myresult="+myresult);
複製代碼

Function定義

在JavaScript中， 一切皆是對象，函數也能夠用一個對象來表明：Function，咱們可使用Function來建立對象：

函數參數全都是字符串，最後一個字符串是方法體

var youresult = new Function("num1","num2","return num1+num2");
		alert( youresult(1000,2000) );
複製代碼

因爲這種方法寫起來並很差些，可讀性也不太好，所以不多使用【不推薦使用】

---

匿名建立函數

其實這種和第一種差很少，只不過是將一個無名的函數賦值給一個變量。那麼這個變量就表明了這個函數。

var theyresult = function(num1,num2){
							return num1 + num2;	
						 }
		alert( theyresult(10000,20000) );

複製代碼

theyresult這個變量就表明了函數。

---

建立對象

方式①

直接使用new Object()

var obj = new Object();

複製代碼

方式②

使用空的{}大括號

var obj2 = {};
複製代碼

測試

增長屬性，訪問屬性

咱們要爲建立的對象增長屬性和訪問屬性的值！

使用.操做符增長屬性

JavaScript是弱類型的語言，能夠動態的添加屬性。

obj.age = 20;
    obj.name = "zhongfucheng";
    obj.say = function () {
        alert("hello");
    };

複製代碼

測試

---

使用.操做符訪問屬性

var aa = obj.age;
    var bb = obj.name;

複製代碼

測試

---

使用[]操做符訪問屬性

var aa = [obj["age"]];
    var bb = [obj["name"]];

複製代碼

測試

---

建立類

方式①

使用function來模擬建立類，function充當了構造函數

//測試函數
        function test() {

            var teacher = new Teacher();

        }

		//使用function來模擬類
        function Teacher() {

        }
複製代碼

測試

---

方式②

上面的function來模擬類很容易和函數混淆。

咱們通常這樣作：用一個變量記住一個匿名的function當作是類，function充當了構造函數

function test() {

            var teacher = new Teacher();
            
        }
        var Teacher = function () {


        };

複製代碼

測試

---

方式③

使用JSON語法來建立類，也就是對象直接量定義方法

var obj = {
            age: 20,
            str: "zhongfucheng",
            method:function () {
                alert("aaa");
            }

        };
複製代碼

測試

---

公有屬性和方法

咱們建立公有屬性應該在類中指定，建立公有方法應該使用原型對象prototype

prototype定義的屬性就相似於Java的靜態成員：在原型對象上定義了屬性，擁有這個原型對象的function所建立的對象也擁有定義的屬性！因此，咱們方法中就使用prototype

var obj = function Teacher(name) {
            this.name = name;
            if( typeof obj._init=="undefined") {
                obj.prototype.setName = function (name) {
                    this.name = name;
                };

                obj.prototype.getName = function () {
                    alert(this.name);
                };
            }

            obj._init = true;
        };

複製代碼

建立兩個不一樣的Teacher對象，name屬性是不同的。而它們共享同一份setName()和getName()方法

值得注意的是：prototype定義的屬性只可讀的。若是你想要使用具體對象寫prototype的屬性，實際上並非寫，而是從新爲該類定義了一個同名(和prototype同名)的屬性。在讀取同名屬性的時候，優先讀取對象上的屬性，而不是prototype的。

---

私有屬性

咱們在Java中，定義私有屬性是經過關鍵字private來修飾的。。

在JavaScript中是沒有這樣的關鍵字的，咱們須要這樣作：定義在方法內【也就是function內部，也能夠看做成構造函數】的變量，就是私有變量。

var obj = function Teacher(name) {

            //這是私有屬性，外界不能訪問
            var age = 23;

            //這是公有屬性，外界能夠訪問
            this.name = name;
            
            //想要訪問私有變量age，只能在這裏編寫方法來訪問。其他的地方都不行！

			//咱們一般就是在這裏編寫公有方法來訪問私有屬性

        };

複製代碼

靜態屬性和方法

在JavaScript中定義靜態屬性其實就是經過prototype原型對象來定義的。

定義靜態的時機：

• 當類的某個值與對象無關指望全部位置看到的結果是同樣的時候，就能夠定義爲類靜態屬性。
• 若是類的一個方法作的是和具體對象無關的操做，而是作一些工做操做的時候，就能夠將這個方法定義爲靜態的類方法。

//靜態屬性TYPE
	Book.TYPE = 「IT」;

	Book.print = function(){alert(Book.TYPE);}

複製代碼

---

JavaScript中的for in循環

在學習AJAX的時候，發現JavaScript中for in循環，這種循環對於遍歷JSON是很好用的。因而寫下了這篇博文

for in循環本質上是forEach循環，它主要有兩個做用

• 遍歷數組
• 遍歷JavaScript對象

遍歷數組

當使用for in來遍歷數組的時候，它的循環計數器是數組元素的索引值

var a = ['a', 'b', 'c'];
    for(var index in a) {
        alert(index);
    }


複製代碼

效果：

遍歷JavaScript對象

當使用for in來遍歷對象的時候，它的循環計數器是對象的屬性名

//對象json上，包含了兩個對象a和b屬性
    var json = {a:{num:1},b:{num:2}};

    for(var name in  json){
        alert(name);
    }

複製代碼

效果

---

JS打氣球遊戲

在B站中看見了一個JS大氣球這麼一個教程，才知道原來JS+HTML5+CSS3能那麼有趣。可是視頻中沒並無給出源碼。因而在別人的博客中搜到了對應的源碼以及他本身實現的思路，該博主對其進行了改編。

www.cnblogs.com/morang/p/76…

以上的博文有源碼的下載。下面我就直接貼上源碼了。思路就在博文中。

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
	<head>
		<title>氣球大戰</title>
		<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
		<style> /*CSS3可以將氣球描繪出來，使用到了圓形、旋轉、陰影等技術*/ body{margin:0px;padding:0px;} #ballDiv{position: fixed;top: 0;left: 0;} .balloon{ width:150px; height:150px; position:absolute; left:0px; top:0px; background-color:#f3778d; border-radius:50% 50% 10% 50%; transform:rotate(45deg); box-shadow:1px 1px 20px 20px pink inset; z-index:10; } /*這裏使用到了僞元素，能夠不用到html中定義元素就能夠實現功能了！*/ .balloon:after{ width:20px; height:20px; content:""; display:block; background:transparent; position:absolute; right: -15px; bottom: -15px; border-left:5px solid pink; border-top:5px solid pink; } /*這裏使用到了僞元素，能夠不用到html中定義元素就能夠實現功能了！*/ .balloon:before{ width: 2px; height: 50px; content: ""; display: block; background: #ffc0cb; position: absolute; right: -10px; top: 100%; margin-top: -16px; transform: rotate(-45deg); } </style>
	</head>
	<body>
		<div id="gameinfo" style="transform: translateZ(360px);">
			<p>
				最高連擊：<span id='maxDoubleHit'>0</span>				
			</p>
			<p>
				本次遊戲：<span id='currentDoubleHit'>0</span>				
			</p>
			<p id="gamemsg" style="display:none;">
				<span style="color:red;font-weight:bold;">
					Game Over
				</span>
				<button onclick="javscript:location.reload();">
					從新開始
				</button>
			</p>
		</div>
		<div id="ballDiv">
			
			
		</div>
		<!--<div class="balloon"></div>-->
		<script> var maxDoubleHit=localStorage.getItem('eliminateCount')||0 var currentDoubleHit=0 //當作一個緩存池，優化性能的。 var bnElements=[];//存放全部氣球 var random=Math.random;//隨機函數 var wW=window.innerWidth;//窗口寬度 var wH=window.innerHeight;//窗口高度 var ballW=160;//氣球的寬度 var ballH=300;//氣球的寬度 var minSpeed=3;//最小速度，每次向上移動至少3px var speedNum=5;//速度的定量 var defBnNumber=5;//初始化氣球 var moveTimer; var isEnd=false; var jindex=1; var ballDiv=document.getElementById('ballDiv'); //初始化  init(defBnNumber); //移動 move(); //綁定單擊事件 bindClick(); //遊戲信息 document.getElementById('maxDoubleHit').innerText=maxDoubleHit function record(){ if(isEnd){ clearTimeout(moveTimer); bnElements=[]; document.getElementById('gamemsg').style.display='block'; document.getElementById('gameinfo').style='transform: translateZ(360px);position: fixed;top:0;left:0;z-index:999'; } else{ init(1); document.getElementById('currentDoubleHit').innerText=++currentDoubleHit; if(currentDoubleHit>maxDoubleHit){ document.getElementById('maxDoubleHit').innerText=currentDoubleHit; localStorage.setItem('eliminateCount',currentDoubleHit) } } } //初始化氣球 function init(num){ //建立一個虛擬文檔節點 var docFragment=document.createDocumentFragment(); for(var i=0;i<num;i++){ var bnElement=document.createElement('div'); bnElement.className='balloon'; //速度隨機，限定最小值 var speed=Math.max(minSpeed,~~(random()*speedNum)); bnElement.setAttribute('speed',speed);//~~取整 移動速度 bnElement.setAttribute('id','ball-'+jindex++); //分散排列 var x=(~~(random()*wW))-ballW; x=Math.max(0,x); bnElement.style.left=x+'px'; bnElement.style.top=wH+'px';//露一點出來  //1.先將建立的氣球放入建立的虛擬文檔節點 docFragment.appendChild(bnElement); bnElements.push(bnElement); } //2.將虛擬文檔節點添加到body中 ballDiv.appendChild(docFragment); } //使用定時器來對氣球進行移動。 function move(){ var bl=bnElements.length for(var i=0;i<bl;i++){ var currentElement=bnElements[i] if(currentElement==null){ continue; } var offsetTop=currentElement.offsetTop; if(offsetTop>0){//窗口中 //offset就是針對窗口的位置來進行移動的。 var speed=currentElement.getAttribute('speed'); currentElement.style.top=offsetTop-speed+'px' } else{ //移除dom節點 //ballDiv.removeChild(currentElement); //移除數組中 //bnElements.splice(i,1); //init(1); isEnd=true; record(); } } moveTimer=setTimeout(move,1000/30); } //對全部的氣球進行單擊監聽事件，不要單獨爲每一個氣球來進行監聽，這樣耗費性能！ function bindClick(){ ballDiv.addEventListener('click',clickFunc,false); function clickFunc(e){ if(!isEnd && e.target.className=='balloon'){ bnElements.splice(bnElements.lastIndexOf(e.target),1); //這裏使用call主動調用，在boom方法中咱們就可使用this指針了。 boom.call(e.target,function(){ e.target.parentNode.removeChild(e.target); record(); }); } } } function boom(callback){ //var that=this; //替換了上下文，可是沒有使用this的意義. var speed=this.getAttribute('speed'); this.timer=setInterval(function(){ this.style.opacity=0.1*(speed--) if(speed<1){ callback&&callback(); clearInterval(this.timer); } }.bind(this),30); } </script>
	</body>
</html>
複製代碼

看了視頻也學到了以前一直沒有注意的東西:

• CSS3很厲害啊，能將方形的div轉成是橢圓形的[也就是氣球的形狀]，還有盒子的陰影設置。
• 使用僞元素就能夠不用直接在html中設置標籤了。配合CSS3也可以作出對應的樣式。
• 使用實體邊框配合CSS3也能夠作出不一樣的形狀樣式
• 在生成元素的時候，能夠先將要生成的元素加入到文檔片斷中，再使用文檔片斷來進行一次性添加到body上，這樣性能會好不少!
• 使用~~運算符可以取整數
• 限定氣球的邊界就可使用max和min函數來進行限定。這也是很好用的。
• 移動氣球咱們須要用到定時器。
• 使用call主動調用方法，把目標對象傳遞過去的話，咱們就可使用this指針了。
• 在定時器中使用bind(this),就能夠在定時器中使用this指針的，由於定時器默認是由瀏覽器window來進行調用的，默認是不能使用this的
• 綁定單擊事件的時候，不要使用循環來進行綁定，這樣太耗費性能了，咱們可使用監聽事件來進行一次綁定。
• 在遍歷元素數組的時候，條件是元素數組的長度時，咱們能夠先把該元素數組的長度初始化出來，那麼也能夠提高性能!否則就每次判斷前都要去查詢數據的長度!

for(var i=0,len = array.length; i<len;i++){}
複製代碼

---

若是文章有錯的地方歡迎指正，你們互相交流。習慣在微信看技術文章，想要獲取更多的Java資源的同窗，能夠關注微信公衆號:Java3y