1. 程式人生 > >第10天 javascript 高階學習

第10天 javascript 高階學習

1.javascript 的組成

     1.1ECMASCRIPT語法

     1.2.DOM

     1.3.BOM

2.JS基本資料型別:boolean ,undefine, string,number,null複雜型別Object;

3.建立物件方式

      3.1建立物件的三種方式
//            字面量建立:
            var per1={
                name:"張三",
                age:"10",
                eat:function(){
                    console.log("吃");
                },
                sleep:function(){
                    console.log("睡覺");
                }
            };
            
//            通過建構函式建立
            
            function Person(){}
                
            var per2=new Object();
            per2.name="張三";
            per2.eat=function(){
                console.log("吃麵包");
            }
            per2.sleep=function(){
                console.log("誰");
            }
            console.log(per1 instanceof Person);
            
//            自定義建構函式,可以找到物件的具體型別
            function Person(name,age){
                this.name=name;
                this.age=age;
                this.eat=function(){
                    console.log("吃");
                }
            }
            var per3=new Person("Man",10);
      3.2 工廠模式建立物件   (不常用)   

4. 面向物件與面向過程兩種方法對比切換 div 顏色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div{
                background-color: yellow;
                width: 100px;
                height: 100px;
            }
        </style>
        
    
        
    </head>
    <body>
        
            <!--<script>
//        window.onload=function(){
            document.getElementById("but").onclick=function(){
                document.getElementById("div").style.backgroundColor="red";
            };
//        }
            
        </script>-->
        <input type="button" name="button" id="but" value="顯示效果" />
        <div id="div"></div>
        
        
        
        <script>
           function ChangeStyle(but,div,color){
                   this.but=document.getElementById(but);
                   this.div=document.getElementById(div);
                   this.color=color;
                   
           }
           ChangeStyle.prototype.changeColor=function(){
                   var that=this;
                   this.but.onclick=function(){
                       that.div.style.backgroundColor=that.color;
                   };
           };
           var ts=new ChangeStyle("but","div","red");
           ts.changeColor();
        </script>
    </body>
</html>

5.原型的簡單寫法

5.1 錯誤版:function Person(age,name){
                this.name=name;
                this.age=age;
            };
//            字面量方式
            Person.prototype={  
                height:"180",
                eat:function(){
                    console.log("xjbskdv");
                }
            };
            var s=new  Person("10","Maik");
            s.eat();
//            輸出記憶體地址
            console.dir(Person);
            console.dir(s);

            在Person ,s 的記憶體地址當中沒有constructor建構函式

          因此在原型中手動修改構造器的指向。
              Person.prototype={  
//                手動修改構造器的指向
                constructor:Person,
                height:"180",
                eat:function(){
                    console.log("xjbskdv");
                }
            };

s._proto_==Person.prototype  (true) 例項物件中的原型指向的是建構函式中的原型。

6.原型鏈

 6.1 例項物件中的屬性  若沒有,則會在例項物件的_protype_所指向的原型物件(建構函式中的原型物件)中查詢。

6.2 “一次性函式” ()();      (funtion(){

                                                   }());

自呼叫函式 宣告的時候直接呼叫

(function(){
                console.log("once");
            })();

   等價於:

function F(){

            console.log("once");

}

F();

可解決函式外命名衝突的問題,將函式內變數和函式外變數隔開。

 

js是動態型別語言,在將實參賦給形參的過程中,物件之間的傳遞,傳遞的是地址值。

如何把區域性變數變為全域性變數? 將區域性變數的值賦給window的屬性即可。

功能:生成一個隨機數物件,在頁面中呼叫。(通過自定義函式,將區域性隨機數物件轉換為全域性物件),在頁面中呼叫產生隨機數。隨機產生食物。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #map{
                width: 800px;
                height: 800px;
                background-color: black;
                position: relative;
                
            }
            #energy{
                width:20px;
                height: 20px;
                background-color: green;
                position: absolute;
                top:780px;
                left: 30px;
            }
        </style>
        
        
    </head>
    <body>
        <div id="map">
            <div id="energy">
            
            </div>
        </div>
    
    <script src="common.js"></script>
    <script>
            //生成隨機數物件,全域性使用
            (function(win){
                
                function CreatRandom(){
                    
                }
                
                CreatRandom.prototype.randomNum=function(){
                    return Math.floor(Math.random()*780);
                }
                win.random=new CreatRandom();
            })(window);
            console.log(random.randomNum());
            function ChangeForm(map,energy,json){
                this.map=map;
                this.energy=energy;
                this.json=json;
            }
            ChangeForm.prototype.init=function(){
                for(var i in this.json){
                    this.energy.style[i]=this.json[i];
                }
                    
            }
            var json={"top":random.randomNum()+"px","left":random.randomNum()+"px"};
            var myJson=JSON.stringify(json, null, 2);
            console.log(myJson);
            var form=new ChangeForm(my$("map"),my$("energy"),json);
            form.init();
        </script>
    </body>
</html>