深入瞭解JavaScript

在我們的項目中,尤其是我們的web項目,無論你是用何種語言編寫,java、C#…..JavaScript這種前臺頁面的腳本語言都占居著舉足輕重的地位,下面帶大傢深入走進JavaScript,探索其中的奧秘,一起學習,共同進步!!
    1、 要深入理解JavaScript,你得首先放下對象和類的概念,回到數據和代碼的本原。前面說過,編程世界隻有數據和代碼兩種基本元素,而這兩種元素又有著糾纏不清的關系。JavaScript就是把數據和代碼都簡化到最原始的程度。
     2、 JavaScript中的數據很簡潔的。簡單數據隻有 undefined, null, boolean, number和string這五種,而復雜數據隻有一種,即object。JavaScript中的代碼隻體現為一種形式,就是function。   註意:以上單詞都是小寫的,不要和Number, String, Object, Function等JavaScript內置函數混淆瞭。要知道,JavaScript語言是區分大小寫的呀!
      3、任何一個JavaScript的標識、常量、變量和參數都隻是unfined, null, bool, number, string, object 和 function類型中的一種,也就typeof返回值表明的類型。除此之外沒有其他類型瞭。
      eg:var a=123,typeof(a)—->number;var b="123",typeof(b)—–>string;var c=null,typeof(c)—->object;var d=true
              typeof(d)—>bool;var e=undefined,typeof(e)—->undefined;var f=function(){alert(1)}; typeof(f)—–>function
       4、JavaScript中沒有類的概念,隻有函數,並且函數統一由function定義,JavaScript函數就是對象的本質。函數的定義方式:
  <script type="text/javascript">
     //常用的定義方式
     function test(){
     alert("hello");
  }
 //變量式定義 
  var test=function(){
     alert("world");
  }
  </script>
      事實證明:JavaScript中的函數也是一種變量。
       5、JavaScript執行引擎並非一行一行地分析和執行程序,而是一段一段地分析執行的。而且,在同一段程序的分析執行中,定義式的函數語句會被提取出來優先執行。函數定義執行完之後,才會按順序執行其他語句代碼。
  <script type="text/javascript">
     function test(){
    alert(1);
  }
  test();
  function test(){
    alert(2);
  }
  test(); 
  </script>
上面這段代碼中,返回的值都是2,而沒有1的輸出,正是因為它是一段一段執行的。
        6、   任何一個函數都可以為其動態地添加或去除屬性,這些屬性可以是簡單類型,可以是對象,也可以是其他函數。
  <script type="text/javascript">
     function test(){
    with(arguments.callee){//遍歷屬性元素
       alert(attr1+":"+attr2);
    }
  }
  test.attr1="測試屬性1";
  test.attr2="測試屬性2";
  test();
  </script>
       7、JavaScript中,對象和函數可以象數組一樣,用屬性名或方法名作為下標來訪問並處理。

       
     JavaScript裡的函數和對象既有對象的特征也有數組的特征。這裡的數組被稱為“字典”,一種可以任意伸縮的名稱值對兒的集合。其實, object和function的內部實現就是一個字典結構,但這種字典結構卻通過嚴謹而精巧的語法表現出瞭豐富的外觀。正如量子力學在一些地方用粒子來解釋和處理問題,而在另一些地方卻用波來解釋和處理問題。你也可以在需要的時候,自由選擇用對象還是數組來解釋和處理問題。隻要善於把握 JavaScript的這些奇妙特性,就可以編寫出很多簡潔而強大的代碼來。
        8、JavaScript中也有this,但這個this卻與C++、C#或Java等語言的this不同。一般編程語言的this就是對象自己,而 JavaScript的this卻並不一定。

    從上面的代碼可以看出,同一個函數可以從不同的角度來調用,this並不一定是函數本身所屬的對象。this隻是在任意對象和function元素結合時的一個概念,是種結合比起一般對象語言的默認結合更加靈活,顯得更加超然和灑脫。
       9、JavaScript中對象的創建
       1)通過json形式創建:
  <script type="text/javascript">
     var person={};//創建一個沒有任何屬性和方法的對象
  var person={name:"jack",age:25,married:false};//創建包含屬性的對象
  var person={name:"jack",age:25,say:function(alert("hello"))};//創建包含屬性和方法的對象
  //創建一個嵌套對象和對象數組的對象
  var person={
                name:"jack",
       birthday:{year:1965,month:6,day:23},
       friends:[{name:"mary",age:21},{name:"jhon",age:22}]
             };
  </script> www.aiwalls.com
JSON就是JavaScript對象最好的序列化形式,它比XML更簡潔也更省空間。對象可以作為一個JSON形式的字符串,在網絡間自由傳遞和交換信息。而當需要將這個JSON字符串變成一個JavaScript對象時,隻需要使用eval函數這個強大的數碼轉換引擎,就立即能得到一個 JavaScript內存對象。正是由於JSON的這種簡單樸素的天生麗質,才使得她在AJAX舞臺上成為璀璨奪目的明星。
      2)通過new關鍵字構造創建對象:
        function test(){alert("hello");}  var obj=new test();//使用new操作符,借助MyFun函數,就創建瞭一個對象。
        等價於 function test(){};   var obj={};//創建一個空的對象 test.call(obj);//將obj對象作為this指針調用test函數
  理解:JavaScript先用new操作符創建瞭一個對象,緊接著就將這個對象作為this參數調用瞭後面的函數。其實,JavaScript內部就是這麼做的,而且任何函數都可以被這樣調用!但從 “anObj = new MyFunc()” 這種形式,我們又看到一個熟悉的身影,C++和C#不就是這樣創建對象的嗎?原來,條條大路通靈山,殊途同歸啊!
       我們還可以用js創建構造函數
  <script type="text/javascript">
     function say(){//先定義一份say函數代碼
    alert("hello world:"+this.name);
  }

     function person(name){//帶參數的構造函數
    this.name=name;//將參數值賦給給this對象的屬性
    this.say=say;//給this對象say方法賦值為前面那份say代碼
  }

  var jack=new person("jack");//創建jack對象
  jack.say();//輸出:hello world:jack
  var mary=new person("mary");//創建mary對象
  mary.say();//輸出:hello world:mary
  alert(jack.say==mary.say);//輸出true
       alert(jack.say()==mary.say());//輸出true
  alert(jack.constructor==person);//輸出true
  </script>
函數不但可以當作構造函數,而且還可以帶參數,還可以為對象添加成員和方法。
jack.say()==mary.say());輸出結果表明兩個對象確實共享瞭一個函數對象,這段程序達到瞭共享瞭一份方法代碼的目的,但卻不怎麼優雅。因為,定義 say方法時反映不出其與person類的關系。JavaScript早想到瞭這一問題,她的設計者們為此提供瞭一個有趣的prototype概念。
        10、js中的delete表示刪除一個對象    
       我們可以這樣刪除一個屬性:    var obj={attr:1};  delete obj.attr;  alert(obj.attr);輸出undefined
      但是不能這樣刪除:var obj=1;    delete obj; alert(obj);輸出1
     也不能這樣刪除:    var obj={say:function(){alert("test")}};  obj.say();  delete obj.say(); obj.say();//報錯
     當一個屬性不能被刪除時,delete隻返回false。為什麼呢?自己查查哦!
      11、閉包函數傳參,靈活運用
  <script type="text/javascript">
     function test(a){
     alert(a);
  (function(b){
     alert(b);
  })(3);
  }
  test(1);
  </script>

發佈留言