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用到的對象，使用該對象與服務器進行異步交互】

定義函數三種方式

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

值得注意的是：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能那麼有趣。可是視頻中沒並無給出源碼。因而在別人的博客中搜到了對應的源碼以及他本身實現的思路，該博主對其進行了改編。

http://www.cnblogs.com/morang/p/7636148.html

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

<!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