JavaScript概論(4)

JavaScript_img-4

JavaScript 概論延續探討

JavaScript判斷式、變數、方法範疇,學習心得整理

Switch case

           範例:

                                var a = ‘1’;

var b = 1;

switch(a){

                                 case 1:

                                      console.log(‘A’);

                                    break;

}

switch(b){

  case 1:

    console.log(‘B’);

    break;

}

說明:上範例中執行結果會只有輸出’B’字串,前面有提過javascript的運算會自動做型態轉換,但是Switch內的判斷是不會做型態轉換的,相當於===的判斷。

           例舉的使用:

                     var o = {x:’a’,y:’b’,z:’c’};

var a = [], i = 0;

for(a[i++] in o)console.log(a[i-1]);                           //xyz

for(i in a )console.log(i);                                   //012

說明:以上兩種方式可以取得例舉的引述值,for(a[i++] in o)的方法可以取得物件內的參數的名稱,而for(i in a )雖然也是可以取得物件內的每一個參數,但是索引為數字(也就是物件內的第N個參數)

           Try catch

                     範例:

try{
var n = new Number(prompt(“Please enter a positive integer”,””));
var f= Fac(n);                                  //n!
alert(n+”!=”+f);
}
catch(ex){
alert(ex);
}
function Fac(x){
if(x<0)throw new Error(“x<0”);
for(f=1;x>1;f*=x,x–);
}

說明:以上為Try catch的用法,try內若有錯誤狀況程式會跳到catch的地方將錯誤的回傳給ex參數,回傳錯誤的參數如Fac方法內的throw new Error(),在括號內放入要回傳的參數就可以把此參數回傳給catchex參數了。

           With用法

                     範例:

                                with(document.form[0]){

                                          name.value = “”;

                                          address.value = “”;

                                          email.value = “”;

}

                     說明:with大多用於設定某個物件的各個參數值,可以少輸入前面的物件名稱,不過個人認為沒有很方便。

           strict mode

說明:
strict mode
是較嚴緊的js撰寫模式

使用方式:
“use strict”                            //
在文件上加上此行可以切換為strict mode
strict mode
和非strict mode主要的差異:
1.strict mode
不能使用with()
2.strict mode
 所有變數都必須要宣告
3.strict mode
調用的函式的this值是undefind而不是全域物件
*strict mode
中用call() or apply()調用函數時this值會是callapply第一個引述
4.strict mode
不能重複定義
5.
不允許8

     繼承

           範例:

                function inherit(p){

                     if(p===null)throw TypeError();

                     if(Object.create)                                                            

                           return Object.create(p);

                     var t = typeof p;

                     if(t !== “object” && t!==”function”) throw TypeError();                        

                     function f(){};

                     f.prototype = p;                                                              

                     return new f();                                                                 

}

var o = {};

o.x = 1;

var p = inherit(o);

p.y = 2;

var q = inherit(p);     //{x:1,y:2}

q.x+q.y                         //3:1+2

說明:先解釋繼承方法的部分,inherit(p)方法會先將傳入的參數p做檢查,第一個if部分,用來檢查傳入的父親物件是不是空的(此處使用===是避免[]、{}、0等等轉型時變成null的狀況),接下來檢查Object.create方法是不是沒有被其他定義過,若有被定義過,就直接使用Object.create()方法產生p物件,若沒有定義,先確認傳進來的是物件或是方法,在定義個方法,把此方法繼承p物件,然後回傳f方法的實作。下面的code就很簡單用p物件繼承o物件然後用q繼承p物件。

     hasOwnProperty和PropertyIsEnumerable方法

           範例:

var o = {x:1};

o.hasOwnProperty(“x”)                   //true

o.hasOwnProperty(“y”)                   //false

o.hasOwnProperty(“toString”)            //false

o.propertyIsEnumerable(“x”)             //true

o.propertyIsEnumerable(“y”)             //false

o.propertyIsEnumerable(“toString”)      //false

說明:hasOwnProperty和PropertyIsEnumerable兩個方法都是測式此屬性是否能被for in例舉,我測不出不一樣的地方,有看到資料有說PropertyIsEnumerable可以辨識出存在但是被設定為undefind的參數,但是經過我測試的結果,兩者都可以測出,不過我在某測試網站上測試的結果發現hasOwnProperty方法的效率會比propertyIsEnumerable好,如下圖所示每秒鐘hasOwnProperty方法可以跑大概84萬次propertyIsEnumerable方法大概只有70萬次。

javascript

 

     keys和getOwnPropertyNames方法

           範例:

           var o = {};

Object.defineProperties(o, {

                one: {enumerable: true, value: ‘x’},

                two: {enumerable: false, value: ‘y’},

});

console.log(Object.keys(o));

console.log(Object.getOwnPropertyNames(o));

說明:keys和getOwnPropertyNames方法都是將物件內的參數轉成陣列列出,兩個方法的差異在於enumerable是否為true也就是若物件內的參數是無法被例舉的keys方法不會將此列出,而getOwnPropertyNames方法會將所有物件內的參數列出,所以上面的範例Object.keys(o)的回傳結果為[“x”]而Object.getOwnPropertyNames(o)回傳的結果為[“x”,”y”]。

     defineProperty和getOwnPropertyDescriptor方法

           範例:

                var o = {};

Object.defineProperty(o,”x”,{value:1,writable:true,enumerable:false,configurable:true});

Object.getOwnPropertyDescriptor(o,’x’);

說明:defineProperty用於指定物件參數的特性,如上範例所示o物件加入一個參數x,設定特性為可寫、不可列舉、可配置,getOwnPropertyDescriptor用於查看物件參數的特性,如上範例所示,getOwnPropertyDescriptor方法會回傳{ value: 1,writable: true,enumerable: false,configurable: true }物件。

結語:這次介紹的大多數是javascript的物件函數以及繼承方式等,這些其實算javascript比較細節的部份,我平常寫簡訊系統的前端頁面時,也很少會使用到這些方法,不過一開始提到的Switch case的狀況,相信很多剛開始寫javascript的朋友都碰過因為Switch case是完全等於的比對而導致選擇錯誤的狀況,像是用getElementById取得value沒有轉成int型態case用的又是純數字就會發生找不到case的狀況導致得到的結果錯誤,不過這種狀況的bug要發現並不困難只又將switch比較的變數console.log()出來就會發現,變數值得輸出是字串而不是數值了,另外像是物件的參數是否會被列舉的問題,一般的新增參數給物件的方法預設都會被列舉,所以比較不會注意到這方面的問題。

參考:JavaScript大全(ISBN:9789862764411)


發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料