2009年7月15日

          ?HTML中<,>,&等有特殊含義(<,>,用于鏈接簽,&用于轉(zhuǎn)義),不能直接使用。這些符號(hào)是不顯示在我們最終看到的網(wǎng)頁里的,那如果我們希望在網(wǎng)頁中顯示這些符號(hào),該怎么辦呢?

          這就要說到HTML轉(zhuǎn)義字符串(Escape Sequence)了。

          轉(zhuǎn)義字符串 (Escape Sequence)也稱字符實(shí)體(Character Entity)。在HTML中,定義轉(zhuǎn)義字符串的原因有兩個(gè):第一個(gè)原因是像“<”和“>”這類符號(hào)已經(jīng)用來表示HTML標(biāo)簽,因此就不能直接當(dāng)作文本中的符號(hào)來使用。為了在HTML文檔中使用這些符號(hào),就需要定義它的轉(zhuǎn)義字符串。當(dāng)解釋程序遇到這類字符串時(shí)就把它解釋為真實(shí)的字符。在輸入轉(zhuǎn)義字符串時(shí),要嚴(yán)格遵守字母大小寫的規(guī)則。第二個(gè)原因是,有些字符在ASCII字符集中沒有定義,因此需要使用轉(zhuǎn)義字符串來表示。

          轉(zhuǎn)義字符串的組成

          轉(zhuǎn)義字符串(Escape Sequence),即字符實(shí)體(Character Entity)分成三部分:第一部分是一個(gè)&符號(hào),英文叫ampersand;第二部分是實(shí)體(Entity)名字或者是#加上實(shí)體(Entity)編號(hào);第三部分是一個(gè)分號(hào)。

          比如,要顯示小于號(hào)(<),就可以寫 &lt; 或者 &#60; 。

          用實(shí)體(Entity)名字的好處是比較好理解,一看lt,大概就猜出是less than的意思,但是其劣勢在于并不是所有的瀏覽器都支持最新的Entity名字。而實(shí)體(Entity)編號(hào),各種瀏覽器都能處理。

          提示:實(shí)體名稱(Entity)是區(qū)分大小寫的。

          備注:同一個(gè)符號(hào),可以用“實(shí)體名稱”和“實(shí)體編號(hào)”兩種方式引用,“實(shí)體名稱”的優(yōu)勢在于便于記憶,但不能保證所有的瀏覽器都能順利識(shí)別它,而“實(shí)體編號(hào)”則沒有這種擔(dān)憂,但它實(shí)在不方便記憶。

          如何顯示空格?

          通常情況下,HTML會(huì)自動(dòng)截去多余的空格。不管你加多少空格,都被看做一個(gè)空格。比如你在兩個(gè)字之間加了10個(gè)空格,HTML會(huì)截去9個(gè)空格,只保留一個(gè)。為了在網(wǎng)頁中增加空格,你可以使用&nbsp;表示空格。


          HTML特殊轉(zhuǎn)義字符列表

          最常用的字符實(shí)體
          Character Entities

          顯示 說明 實(shí)體名稱 實(shí)體編號(hào)
          半方大的空白 &ensp; &#8194;
          全方大的空白 &emsp; &#8195;
          不斷行的空白格 &nbsp; &#160;
          < 小于 &lt; &#60;
          > 大于 &gt; &#62;
          & &符號(hào) &amp; &#38;
          " 雙引號(hào) &quot; &#34;
          ? 版權(quán) &copy; &#169;
          ? 已注冊(cè)商標(biāo) &reg; &#174;
          ? 商標(biāo)(美國) ? &#8482;
          × 乘號(hào) &times; &#215;
          ÷ 除號(hào) &divide; &#247;

          ISO 8859-1 (Latin-1)字符集

          HTML 4.01 支持 ISO 8859-1 (Latin-1) 字符集。

          備注:為了方便起見,以下表格中,“實(shí)體名稱”簡稱為“名稱”,“實(shí)體編號(hào)”簡稱為“編號(hào)”

          顯示 名稱 編號(hào) 顯示 名稱 編號(hào) 顯示 名稱 編號(hào) 顯示 名稱 編號(hào) 顯示 名稱 編號(hào)
          ? &nbsp; &#160; ? &iexcl; &#161; &cent; &#162; &pound; &#163; ¤ &curren; &#164;
          &yen; &#165; | &brvbar; &#166; § &sect; &#167; ¨ &uml; &#168; ? &copy; &#169;
          a &ordf; &#170; ? &laquo; &#171; ? &not; &#172; - &shy; &#173; ? &reg; &#174;
          ˉ &macr; &#175; ° &deg; &#176; ± &plusmn; &#177; 2 &sup2; &#178; 3 &sup3; &#179;
          &acute; &#180; μ &micro; &#181; ? &para; &#182; · &middot; &#183; ? &cedil; &#184;
          1 &sup1; &#185; o &ordm; &#186; ? &raquo; &#187; ? &frac14; &#188; ? &frac12; &#189;
          ? &frac34; &#190; ? &iquest; &#191; à &Agrave; &#192; á &Aacute; &#193; ? &Acirc; &#194;
          ? &Atilde; &#195; ? &Auml; &#196; ? &Aring; &#197; ? &AElig; &#198; ? &Ccedil; &#199;
          è &Egrave; &#200; é &Eacute; &#201; ê &Ecirc; &#202; ? &Euml; &#203; ì &Igrave; &#204;
          í &Iacute; &#205; ? &Icirc; &#206; ? &Iuml; &#207; D &ETH; &#208; ? &Ntilde; &#209;
          ò &Ograve; &#210; ó &Oacute; &#211; ? &Ocirc; &#212; ? &Otilde; &#213; ? &Ouml; &#214;
          × &times; &#215; ? &Oslash; &#216; ù &Ugrave; &#217; ú &Uacute; &#218; ? &Ucirc; &#219;
          ü &Uuml; &#220; Y &Yacute; &#221; T &THORN; &#222; ? &szlig; &#223; à &agrave; &#224;
          á &aacute; &#225; a &acirc; &#226; ? &atilde; &#227; ? &auml; &#228; ? &aring; &#229;
          ? &aelig; &#230; ? &ccedil; &#231; è &egrave; &#232; é &eacute; &#233; ê &ecirc; &#234;
          ? &euml; &#235; ì &igrave; &#236; í &iacute; &#237; ? &icirc; &#238; ? &iuml; &#239;
          e &eth; &#240; ? &ntilde; &#241; ò &ograve; &#242; ó &oacute; &#243; ? &ocirc; &#244;
          ? &otilde; &#245; ? &ouml; &#246; ÷ &divide; &#247; ? &oslash; &#248; ù &ugrave; &#249;
          ú &uacute; &#250; ? &ucirc; &#251; ü &uuml; &#252; y &yacute; &#253; t &thorn; &#254;
          ? &yuml; &#255;

          數(shù)學(xué)和希臘字母標(biāo)志
          symbols, mathematical symbols, and Greek letters

          顯示 名稱 編號(hào) 顯示 名稱 編號(hào) 顯示 名稱 編號(hào) 顯示 名稱 編號(hào) 顯示 名稱 編號(hào)
          ? &fnof; &#402; Α &Alpha; &#913; Β &Beta; &#914; Γ &Gamma; &#915; Δ &Delta; &#916;
          Ε &Epsilon; &#917; Ζ &Zeta; &#918; Η &Eta; &#919; Θ &Theta; &#920; Ι &Iota; &#921;
          Κ &Kappa; &#922; Λ &Lambda; &#923; Μ &Mu; &#924; Ν &Nu; &#925; Ξ &Xi; &#926;
          Ο &Omicron; &#927; Π &Pi; &#928; Ρ &Rho; &#929; Σ &Sigma; &#931; Τ &Tau; &#932;
          Υ &Upsilon; &#933; Φ &Phi; &#934; Χ &Chi; &#935; Ψ &Psi; &#936; Ω &Omega; &#937;
          α &alpha; &#945; β &beta; &#946; γ &gamma; &#947; δ &delta; &#948; ε &epsilon; &#949;
          ζ &zeta; &#950; η &eta; &#951; θ &theta; &#952; ι &iota; &#953; κ &kappa; &#954;
          λ &lambda; &#955; μ &mu; &#956; ν &nu; &#957; ξ &xi; &#958; ο &omicron; &#959;
          π &pi; &#960; ρ &rho; &#961; ? &sigmaf; &#962; σ &sigma; &#963; τ &tau; &#964;
          υ &upsilon; &#965; φ &phi; &#966; χ &chi; &#967; ψ &psi; &#968; ω &omega; &#969;
          ? &thetasym; &#977; ? &upsih; &#978; ? &piv; &#982; ? &bull; &#8226; &hellip; &#8230;
          &prime; &#8242; &Prime; &#8243; &oline; &#8254; ? &frasl; &#8260; ? &weierp; &#8472;
          ? &image; &#8465; ? &real; &#8476; ? &trade; &#8482; ? &alefsym; &#8501; &larr; &#8592;
          &uarr; &#8593; &rarr; &#8594; &darr; &#8595; ? &harr; &#8596; ? &crarr; &#8629;
          ? &lArr; &#8656; ? &uArr; &#8657; ? &rArr; &#8658; ? &dArr; &#8659; ? &hArr; &#8660;
          ? &forall; &#8704; ? &part; &#8706; ? &exist; &#8707; ? &empty; &#8709; ? &nabla; &#8711;
          &isin; &#8712; ? &notin; &#8713; ? &ni; &#8715; &prod; &#8719; &sum; &#8721;
          ? &minus; &#8722; ? &lowast; &#8727; &radic; &#8730; &prop; &#8733; &infin; &#8734;
          &ang; &#8736; &and; &#8743; &or; &#8744; &cap; &#8745; &cup; &#8746;
          &int; &#8747; &there4; &#8756; &sim; &#8764; &cong; &#8773; &asymp; &#8776;
          &ne; &#8800; &equiv; &#8801; &le; &#8804; &ge; &#8805; ? &sub; &#8834;
          ? &sup; &#8835; ? &nsub; &#8836; ? &sube; &#8838; ? &supe; &#8839; &oplus; &#8853;
          ? &otimes; &#8855; &perp; &#8869; ? &sdot; &#8901; ? &lceil; &#8968; ? &rceil; &#8969;
          ? &lfloor; &#8970; ? &rfloor; &#8971; ? &lang; &#9001; ? &rang; &#9002; ? &loz; &#9674;
          ? &spades; &#9824; ? &clubs; &#9827; ? &hearts; &#9829; ? &diams; &#9830;

          重要的國際標(biāo)記
          markup-significant and internationalization characters

          顯示 名稱 編號(hào) 顯示 名稱 編號(hào) 顯示 名稱 編號(hào) 顯示 名稱 編號(hào) 顯示 名稱 編號(hào)
          " &quot; &#34; & &amp; &#38; < &lt; &#60; > &gt; &#62; ? &OElig; &#338;
          ? &oelig; &#339; ? &Scaron; &#352; ? &scaron; &#353; ? &Yuml; &#376; ? &circ; &#710;
          ? &tilde; &#732; ? &ensp; &#8194; ? &emsp; &#8195; ? &thinsp; &#8201; ? &zwnj; &#8204;
          ? &zwj; &#8205; ? &lrm; &#8206; ? &rlm; &#8207; &ndash; &#8211; &mdash; &#8212;
          &lsquo; &#8216; &rsquo; &#8217; ? &sbquo; &#8218; &ldquo; &#8220; &rdquo; &#8221;
          ? &bdquo; &#8222; ? &dagger; &#8224; ? &Dagger; &#8225; &permil; &#8240; ? &lsaquo; &#8249;
          ? &rsaquo; &#8250; &euro; &#8364;

          JavaScript轉(zhuǎn)義符

          轉(zhuǎn)義序列 字符
          \b 退格
          \f 走紙換頁
          \n 換行
          \r 回車
          \t 橫向跳格 (Ctrl-I)
          \' 單引號(hào)
          \" 雙引號(hào)
          \\ 反斜杠

          編程的時(shí)候要注意特殊字符的問題,很多運(yùn)行時(shí)出現(xiàn)的問題都是因?yàn)樘厥庾址某霈F(xiàn)而引起的。

          注意,由于反斜杠本身用作轉(zhuǎn)義符,因此不能直接在腳本中鍵入一個(gè)反斜杠。如果要產(chǎn)生一個(gè)反斜杠,必須一起鍵入兩個(gè)反斜杠 (\\)。


          編碼轉(zhuǎn)換(to Unicode)

          (程序代碼來源于網(wǎng)絡(luò))

          Js版

          <script>
          ???? test = "你好abc"
          ???? str = ""
          ???? for( i=0;??? i<test.length; i++ )
          ???? {
          ????  temp = test.charCodeAt(i).toString(16);
          ????  str??? += "\\u"+ new Array(5-String(temp).length).join("0") +temp;
          ???? }
          ???? document.write (str)
          </script>


          vbs版


          Function Unicode(str1)
          ???? Dim str,temp
          ???? str = ""
          ???? For i=1??? to len(str1)
          ????  temp = Hex(AscW(Mid(str1,i,1)))
          ????  If len(temp) < 5 Then??? temp = right("0000" & temp, 4)
          ????  str = str & "\u" & temp
          ???? Next
          ???? Unicode = str
          End Function


          Function htmlentities(str)
          ???? For i = 1 to Len(str)
          ???????? char = mid(str, i, 1)
          ???????? If Ascw(char) > 128 then
          ???????????? htmlentities = htmlentities & "&#" & Ascw(char) & ";"
          ???????? Else
          ???????????? htmlentities = htmlentities & char
          ???????? End if
          ???? Next
          End Function

          coldfusion

          function nochaoscode(str)
          {
          ???? var new_str = “”;
          ???? for(i=1; i lte len(str);i=i+1){
          ???????? if(asc(mid(str,i,1)) lt 128){
          ???????????? new_str = new_str & mid(str,i,1);
          ???????? }else{
          ???????????? new_str = new_str & “&##” & asc(mid(str,i,1));
          ???????? }
          ???? }
          ???? return new_str;
          }


          附:

          在php中我們可以用mbstring的mb_convert_encoding函數(shù)實(shí)現(xiàn)這個(gè)正向及反向的轉(zhuǎn)化。 如:


          mb_convert_encoding ("你好", "HTML-ENTITIES", "gb2312"); //輸出:&#20320;&#22909;

          mb_convert_encoding ("&#20320;&#22909;", "gb2312", "HTML-ENTITIES"); //輸出:你好

          如果需要對(duì)整個(gè)頁面轉(zhuǎn)化,則只需要在php文件的頭部加上這三行代碼:

          mb_internal_encoding("gb2312"); // 這里的gb2312是你網(wǎng)站原來的編碼

          mb_http_output("HTML-ENTITIES");

          ob_start('mb_output_handler');

          posted @ 2009-08-05 15:32 zhuyongjp 閱讀(1859) | 評(píng)論 (0)編輯 收藏
           

          keycode??? 8 = BackSpace BackSpace
          keycode??? 9 = Tab Tab
          keycode?? 12 = Clear
          keycode?? 13 = Enter
          keycode?? 16 = Shift_L
          keycode?? 17 = Control_L
          keycode?? 18 = Alt_L
          keycode?? 19 = Pause
          keycode?? 20 = Caps_Lock
          keycode?? 27 = Escape Escape
          keycode?? 32 = space space
          keycode?? 33 = Prior
          keycode?? 34 = Next
          keycode?? 35 = End
          keycode?? 36 = Home
          keycode?? 37 = Left
          keycode?? 38 = Up
          keycode?? 39 = Right
          keycode?? 40 = Down
          keycode?? 41 = Select
          keycode?? 42 = Print
          keycode?? 43 = Execute
          keycode?? 45 = Insert
          keycode?? 46 = Delete
          keycode?? 47 = Help
          keycode?? 48 = 0 equal braceright
          keycode?? 49 = 1 exclam onesuperior
          keycode?? 50 = 2 quotedbl twosuperior
          keycode?? 51 = 3 section threesuperior
          keycode?? 52 = 4 dollar
          keycode?? 53 = 5 percent
          keycode?? 54 = 6 ampersand
          keycode?? 55 = 7 slash braceleft
          keycode?? 56 = 8 parenleft bracketleft
          keycode?? 57 = 9 parenright bracketright
          keycode?? 65 = a A
          keycode?? 66 = b B
          keycode?? 67 = c C
          keycode?? 68 = d D
          keycode?? 69 = e E EuroSign
          keycode?? 70 = f F
          keycode?? 71 = g G
          keycode?? 72 = h H
          keycode?? 73 = i I
          keycode?? 74 = j J
          keycode?? 75 = k K
          keycode?? 76 = l L
          keycode?? 77 = m M mu
          keycode?? 78 = n N
          keycode?? 79 = o O
          keycode?? 80 = p P
          keycode?? 81 = q Q at
          keycode?? 82 = r R
          keycode?? 83 = s S
          keycode?? 84 = t T
          keycode?? 85 = u U
          keycode?? 86 = v V
          keycode?? 87 = w W
          keycode?? 88 = x X
          keycode?? 89 = y Y
          keycode?? 90 = z Z
          keycode?? 96 = KP_0 KP_0
          keycode?? 97 = KP_1 KP_1
          keycode?? 98 = KP_2 KP_2
          keycode?? 99 = KP_3 KP_3
          keycode 100 = KP_4 KP_4
          keycode 101 = KP_5 KP_5
          keycode 102 = KP_6 KP_6
          keycode 103 = KP_7 KP_7
          keycode 104 = KP_8 KP_8
          keycode 105 = KP_9 KP_9
          keycode 106 = KP_Multiply KP_Multiply
          keycode 107 = KP_Add KP_Add
          keycode 108 = KP_Separator KP_Separator
          keycode 109 = KP_Subtract KP_Subtract
          keycode 110 = KP_Decimal KP_Decimal
          keycode 111 = KP_Divide KP_Divide
          keycode 112 = F1
          keycode 113 = F2
          keycode 114 = F3
          keycode 115 = F4
          keycode 116 = F5
          keycode 117 = F6
          keycode 118 = F7
          keycode 119 = F8
          keycode 120 = F9
          keycode 121 = F10
          keycode 122 = F11
          keycode 123 = F12
          keycode 124 = F13
          keycode 125 = F14
          keycode 126 = F15
          keycode 127 = F16
          keycode 128 = F17
          keycode 129 = F18
          keycode 130 = F19
          keycode 131 = F20
          keycode 132 = F21
          keycode 133 = F22
          keycode 134 = F23
          keycode 135 = F24
          keycode 136 = Num_Lock
          keycode 137 = Scroll_Lock
          keycode 187 = acute grave
          keycode 188 = comma semicolon
          keycode 189 = minus underscore
          keycode 190 = period colon
          keycode 192 = numbersign apostrophe
          keycode 210 = plusminus hyphen macron
          keycode 211 =
          keycode 212 = copyright registered
          keycode 213 = guillemotleft guillemotright
          keycode 214 = masculine ordfeminine
          keycode 215 = ae AE
          keycode 216 = cent yen
          keycode 217 = questiondown exclamdown
          keycode 218 = onequarter onehalf threequarters
          keycode 220 = less greater bar
          keycode 221 = plus asterisk asciitilde
          keycode 227 = multiply division
          keycode 228 = acircumflex Acircumflex
          keycode 229 = ecircumflex Ecircumflex
          keycode 230 = icircumflex Icircumflex
          keycode 231 = ocircumflex Ocircumflex
          keycode 232 = ucircumflex Ucircumflex
          keycode 233 = ntilde Ntilde
          keycode 234 = yacute Yacute
          keycode 235 = oslash Ooblique
          keycode 236 = aring Aring
          keycode 237 = ccedilla Ccedilla
          keycode 238 = thorn THORN
          keycode 239 = eth ETH
          keycode 240 = diaeresis cedilla currency
          keycode 241 = agrave Agrave atilde Atilde
          keycode 242 = egrave Egrave
          keycode 243 = igrave Igrave
          keycode 244 = ograve Ograve otilde Otilde
          keycode 245 = ugrave Ugrave
          keycode 246 = adiaeresis Adiaeresis
          keycode 247 = ediaeresis Ediaeresis
          keycode 248 = idiaeresis Idiaeresis
          keycode 249 = odiaeresis Odiaeresis
          keycode 250 = udiaeresis Udiaeresis
          keycode 251 = ssharp question backslash
          keycode 252 = asciicircum degree
          keycode 253 = 3 sterling
          keycode 254 = Mode_switch

          字母和數(shù)字鍵的鍵碼值(keyCode)
          按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼
            A
          ?65 J 74 S 83 1 49
          B 66 K 75 T 84 2 50
          C 67 L 76 U 85 3 51
          D 68 M 77 V 86 4 52
          E 69 N 78 W 87 5 53
          F 70 O 79 X 88 6 54
          G 71 P 80 Y 89 7 55
          H 72 Q 81 Z 90 8 56
          I 73 R 82 0 48 9 57
          數(shù)字鍵盤上的鍵的鍵碼值(keyCode) 功能鍵鍵碼值(keyCode)
          按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼
            0
          ?96 8 104 F1 112 F7 118
          1 97 9 105 F2 113 F8 119
          2 98 * 106 F3 114 F9 120
          3 99 + 107 F4 115 F10 121
          4 100 Enter 108 F5 116 F11 122
          5 101 - 109 F6 117 F12 123
          6 102   .
          ?110????????
          7   103
          ?/ 111????????
          控制鍵鍵碼值(keyCode)
          按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼
          BackSpace 8 Esc 27 Right Arrow 39 -_ 189
          Tab 9 Spacebar 32 Down Arrow 40 .> 190
          Clear 12 Page Up 33 Insert 45 /? 191
          Enter 13 Page Down 34 Delete 46 `~ 192
          Shift 16 End 35 Num Lock 144 [{ 219
          Control 17 Home 36 ;: 186 \| 220
          Alt 18 Left Arrow 37 =+ 187 ]} 221
          Cape Lock 20 Up Arrow 38 ,< 188 '" 222

          posted @ 2009-07-23 17:57 zhuyongjp 閱讀(2090) | 評(píng)論 (0)編輯 收藏
           
          javascript 如何創(chuàng)建一個(gè) DOM 節(jié)點(diǎn)?





          key
          -------------------------------------------
          1、a.創(chuàng)建一個(gè)Element???????????? var newDiv = document.createElement("div");
          ?? b.設(shè)置它的屬性??????????????? newDiv.id = "divNew";
          ?? ??? c.如果需要,創(chuàng)建子節(jié)點(diǎn)????? var newTable = document.createElement("table");
          ?? ??? d.設(shè)置子節(jié)點(diǎn)屬性?????????? newTable.setAttribute("id","tableNew");
          ?? ??? e.重復(fù)步驟c和d,直到完成整個(gè)目錄樹
          ?? ??? f.創(chuàng)建Text節(jié)點(diǎn)??????????? var newText = document.createTextNode("string");
          ? g.從葉子節(jié)點(diǎn)往上appendChild ??? newDiv.appendChild(newTable);
          ??? ?? ?? ?? ?? ?? ?? ?? ?? ??? document.body.appendChild(newDiv);

          另一種方式
          ??? a.創(chuàng)建一個(gè)Element??????????? var newDiv = document.createElement("div");
          ??? b.用 innerHTML ?????????????????????? ??? ??? newDiv.innerHTML="<table><tr><th>type</th><th>value</th></tr></table>";
          posted @ 2009-07-22 15:27 zhuyongjp 閱讀(1349) | 評(píng)論 (1)編輯 收藏
           

          領(lǐng)悟 JavaScript 中的面向?qū)ο?/p>


          JavaScript 是面向?qū)ο蟮?。但是不少人?duì)這一點(diǎn)理解得并不全面。

          在 JavaScript 中,對(duì)象分為兩種。一種可以稱為“普通對(duì)象”,就是我們所普遍理解的那些:數(shù)字、日期、用戶自定義的對(duì)象(如:{})等等。

          還有一種,稱為“方法對(duì)象”,就是我們通常定義的 function。你可能覺得奇怪:方法就是方法,怎么成了對(duì)象了?但是在 JavaScript 中,方法的確是被當(dāng)成對(duì)象來處理的。下面是一個(gè)簡單的例子:

          Js代碼
          1. function ?func()?{alert( 'Hello!' );} ??
          2. alert(func.toString());??

          在這個(gè)例子中,func 雖然是作為一個(gè)方法定義的,但它自身卻包含一個(gè) toString 方法,說明 func 在這里是被當(dāng)成一個(gè)對(duì)象來處理的。更準(zhǔn)確的說,func 是一個(gè)“方法對(duì)象”。下面是例子的繼續(xù):

          Js代碼
          1. func.name?=?“I?am?func.”; ??
          2. alert(func.name);??

          我們可以任意的為 func 設(shè)置屬性,這更加證明了 func 就是一個(gè)對(duì)象。那么方法對(duì)象和普通對(duì)象的區(qū)別在哪里呢?首先方法對(duì)象當(dāng)然是可以執(zhí)行的,在它后面加上一對(duì)括號(hào),就是執(zhí)行這個(gè)方法對(duì)象了。

          Js代碼
          1. func();??

          所以,方法對(duì)象具有二重性。一方面它可以被執(zhí)行,另一方面它完全可以被當(dāng)成一個(gè)普通對(duì)象來使用。這意味著什么呢?這意味著方法對(duì)象是可以完全獨(dú)立于其他對(duì)象存在的。這一點(diǎn)我們可以同 Java 比較一下。在 Java 中,方法必須在某一個(gè)類中定義,而不能單獨(dú)存在。而 JavaScript 中就不需要。

          方法對(duì)象獨(dú)立于其他方法,就意味著它能夠被任意的引用和傳遞。下面是一個(gè)例子:

          Js代碼
          1. function?invoke(f)?{ ??
          2. ????f(); ??
          3. } ??
          4. invoke(func);??

          將一個(gè)方法對(duì)象 func 傳遞給另一個(gè)方法對(duì)象 invoke,讓后者在適當(dāng)?shù)臅r(shí)候執(zhí)行 func。這就是所謂的“回調(diào)”了。另外,方法對(duì)象的這種特殊性,也使得 this 關(guān)鍵字不容易把握。這方面相關(guān)文章不少,這里不贅述了。

          除了可以被執(zhí)行以外,方法對(duì)象還有一個(gè)特殊的功用,就是它可以通過 new 關(guān)鍵字來創(chuàng)建普通對(duì)象。

          話說每一個(gè)方法對(duì)象被創(chuàng)建時(shí),都會(huì)自動(dòng)的擁有一個(gè)叫 prototype 的屬性。這個(gè)屬性并無什么特別之處,它和其他的屬性一樣可以訪問,可以賦值。不過當(dāng)我們用 new 關(guān)鍵字來創(chuàng)建一個(gè)對(duì)象的時(shí)候,prototype 就起作用了:它的值(也是一個(gè)對(duì)象)所包含的所有屬性,都會(huì)被復(fù)制到新創(chuàng)建的那個(gè)對(duì)象上去。下面是一個(gè)例子:

          Js代碼
          1. func.prototype.name=”prototype?of?func”; ??
          2. var?f?=?new?func(); ??
          3. alert(f.name);??

          執(zhí)行的過程中會(huì)彈出兩個(gè)對(duì)話框,后一個(gè)對(duì)話框表示 f 這個(gè)新建的對(duì)象從 func.prototype 那里拷貝了 name 屬性。而前一個(gè)對(duì)話框則表示 func 被作為方法執(zhí)行了一遍。你可能會(huì)問了,為什么這個(gè)時(shí)候要還把 func 執(zhí)行一遍呢?其實(shí)這個(gè)時(shí)候執(zhí)行 func,就是起“構(gòu)造函數(shù)”的作用。為了形象的說明,我們重新來一遍:

          Js代碼
          1. function?func()?{ ??
          2. ????this.name=”name?has?been?changed.” ??
          3. } ??
          4. func.prototype.name=”prototype?of?func”; ??
          5. var?f?=?new?func(); ??
          6. alert(f.name);??

          你就會(huì)發(fā)現(xiàn) f 的 name 屬性不再是"prototype of func",而是被替換成了"name has been changed"。這就是 func 這個(gè)對(duì)象方法所起到的“構(gòu)造函數(shù)”的作用。所以,在 JavaScript 中,用 new 關(guān)鍵字創(chuàng)建對(duì)象是執(zhí)行了下面三個(gè)步驟的:
          1. 創(chuàng)建一個(gè)新的普通對(duì)象;
          2. 將方法對(duì)象的 prototype 屬性的所有屬性復(fù)制到新的普通對(duì)象中去。
          3. 以新的普通對(duì)象作為上下文來執(zhí)行方法對(duì)象。

          對(duì)于“new func()”這樣的語句,可以描述為“從 func 創(chuàng)建一個(gè)新對(duì)象”??傊琾rototype 這個(gè)屬性的唯一特殊之處,就是在創(chuàng)建新對(duì)象的時(shí)候了。


          那么我們就可以利用這一點(diǎn)。比如有兩個(gè)方法對(duì)象 A 和 B,既然從 A 創(chuàng)建的新對(duì)象包含了所有 A.prototype 的屬性,那么我將它賦給 B.prototype,那么從 B 創(chuàng)建的新對(duì)象不也有同樣的屬性了?寫成代碼就是這樣:

          ?

          Js代碼
          1. A.prototype.hello?=?function(){alert('Hello!');} ??
          2. B.prototype?=?new?A(); ??
          3. new?B().hello();??

          這就是 JavaScript 的所謂“繼承”了,其實(shí)質(zhì)就是屬性的拷貝,這里利用了 prototype 來實(shí)現(xiàn)。如果不用 prototype,那就用循環(huán)了,效果是一樣的。所謂“多重繼承”,自然就是到處拷貝了。

          JavaScript 中面向?qū)ο蟮脑恚褪巧厦孢@些了。自始至終我都沒提到“類”的概念,因?yàn)?JavaScript 本來就沒有“類”這個(gè)東西。面向?qū)ο罂梢詻]有類嗎?當(dāng)然可以。先有類,然后再有對(duì)象,這本來就不合理,因?yàn)轭惐緛硎菑膶?duì)象中歸納出來的,先有對(duì)象再有類,這才合理。像下面這樣的:

          Js代碼
          1. var?o?=?{};?//?我發(fā)現(xiàn)了一個(gè)東西。 ??
          2. o.eat?=?function(){return?"I?am?eating."}??//?我發(fā)現(xiàn)它會(huì)吃; ??
          3. o.sleep?=?function(){return?"ZZZzzz..."}??//?我發(fā)現(xiàn)它會(huì)睡; ??
          4. o.talk?=?function(){return?"Hi!"}?//?我發(fā)現(xiàn)它會(huì)說話; ??
          5. o.think?=?function(){return?"Hmmm..."}?//?我發(fā)現(xiàn)它還會(huì)思考。 ??
          6. ??
          7. var?Human?=?new?Function();?//?我決定給它起名叫“人”。 ??
          8. Human.prototype?=?o;?//?這個(gè)東西就代表了所有“人”的概念。 ??
          9. ??
          10. var?h?=?new?Human();?//?當(dāng)我發(fā)現(xiàn)其他同它一樣的東西, ??
          11. alert(h.talk())?//?我就知道它也是“人”了!??

          ?

           

          JavaScript中的Function對(duì)象是函數(shù),函數(shù)的用途分為3類:

          1. 作為普通邏輯代碼容器;
          2. 作為對(duì)象方法;
          3. 作為構(gòu)造函數(shù)。

          1.作為普通邏輯代碼容器

          function multiply(x, y){
          return x*y;
          }

          函數(shù)multiply封裝了兩位數(shù)的乘法運(yùn)算公式:

          var product = multiply(128,128); // product = 16384

          創(chuàng)建函數(shù)實(shí)例的方式有3種。第一種是聲明式,即像聲明變量一樣,將通過function(){}標(biāo)識(shí)符創(chuàng)建的匿名函數(shù)直接賦值給變量,以該變量作為調(diào)用時(shí)的函數(shù)名稱:

          var multiply = function(x, y){
          return x*y;
          }

          第二種是定義式,即以function關(guān)鍵字后跟函數(shù)名稱及(){}來直接定義命名函數(shù),前面第一個(gè)multiply函數(shù)就是通過定義式創(chuàng)建的。

          第三種是構(gòu)造函數(shù)式,即通過new運(yùn)算符調(diào)用構(gòu)造函數(shù)Function來創(chuàng)建函數(shù)。這種方式極不常用,因此就不作介紹了。

          在創(chuàng)建函數(shù)的3種方式中,聲明式和定義式還存在細(xì)微的差別。比如下列代碼中的函數(shù)采用聲明式:

          var example = function(){
          return 1;
          }
          example();
          var example = function(){
          return 2;
          }
          example();

          執(zhí)行結(jié)果如下:

          1
          2

          而如果采用定義式,即:

          function example(){
          return 1;
          }
          example();
          function example(){
          return 2;
          }
          example();

          那么會(huì)得到另一種結(jié)果:

          2
          2

          即,在采用定義式創(chuàng)建同名函數(shù)時(shí),后創(chuàng)建的函數(shù)會(huì)覆蓋先創(chuàng)建的函數(shù)。這種差別是由于JavaScript解釋引擎的工作機(jī)制所導(dǎo)致的。JavaScript解釋引擎在執(zhí)行任何函數(shù)調(diào)用之前,首先會(huì)在全局作用域中注冊(cè)以定義式創(chuàng)建的函數(shù),然后再依次執(zhí)行函數(shù)調(diào)用。由于注冊(cè)函數(shù)時(shí),后定義的函數(shù)重寫了先定義的函數(shù),因此無論調(diào)用語句位于何處,執(zhí)行的都是后定義的函數(shù)。相反,對(duì)于聲明式創(chuàng)建的函數(shù),JavaScript解釋引擎會(huì)像對(duì)待任何聲明的變量一樣,等到執(zhí)行調(diào)用該變量的代碼時(shí)才會(huì)對(duì)變量求值。由于JavaScript代碼是從上到下順序執(zhí)行的,因此當(dāng)執(zhí)行第一個(gè)example()調(diào)用時(shí),example函數(shù)的代碼就是首先定義代碼;而當(dāng)執(zhí)行第二個(gè)example()調(diào)用時(shí),example函數(shù)的代碼又變成了后來定義的代碼。

          2.作為對(duì)象方法

          JavaScript在解析代碼時(shí),會(huì)為聲明或定義的函數(shù)指定調(diào)用對(duì)象。所謂調(diào)用對(duì)象,就是函數(shù)的執(zhí)行環(huán)境。如果函數(shù)體內(nèi)有以關(guān)鍵字this聲明的變量,則this引用的就是調(diào)用對(duì)象。

          事實(shí)上,在普通的函數(shù)中,也存在調(diào)用對(duì)象,只不過這個(gè)調(diào)用對(duì)象是默認(rèn)的全局window對(duì)象而已。例如:

          var product = window.multiply(128,128); // product = 16384

          這說明,默認(rèn)情況下,在全局作用域中定義或聲明的函數(shù)的調(diào)用對(duì)象就是window。

          在面向?qū)ο缶幊讨?,通常將作為?duì)象成員的函數(shù)稱為方法。例如:

          var dog = {};
          dog.name = “heibao”;
          dog.age = “3 months”;
          dog.shout = function(){
          return “Hello, My name is “+ this.name + ” and I am ” + this.age + ” old!”;
          }
          dog.shout(); // “Hello, My name is heibao and I am 3 months old!”

          有意思的是,對(duì)象也可以借用其他對(duì)象的方法:

          var cat = {};
          cat.name = “xiaohua”;
          cat.age = “2 years”;
          cat.greet = dog.shout;
          cat.greet(); // “Hello, My name is xiaohua and I am 2 years old!”

          另外,使用函數(shù)對(duì)象的call和apply方法,還可以動(dòng)態(tài)指定函數(shù)或方法的調(diào)用對(duì)象:

          dog.shout.call(cat); // “Hello, My name is xiaohua and I am 2 years old!”

          或者

          dog.shout.apply(cat); // “Hello, My name is xiaohua and I am 2 years old!”

          3.作為構(gòu)造函數(shù)

          JavaScript是通過構(gòu)造函數(shù)來模擬面向?qū)ο笳Z言中的類的。例如:

          function Animal(sort, character){
          this.sort = sort;
          this.character = character;
          }

          以Animal作為構(gòu)造函數(shù),就可以像下面這樣創(chuàng)建一個(gè)新對(duì)象:

          var dog = new Animal(”mammal”,”four legs”);

          創(chuàng)建dog的對(duì)象的過程如下:首先,new運(yùn)算符創(chuàng)建一個(gè)空對(duì)象({}),然后以這個(gè)空對(duì)象為調(diào)用對(duì)象調(diào)用函數(shù)Animal,為這個(gè)空對(duì)象添加兩個(gè)屬性sort和character,接著,再將這個(gè)空對(duì)象的默認(rèn)constructor屬性修改為構(gòu)造函數(shù)的名稱(即Animal;空對(duì)象創(chuàng)建時(shí)默認(rèn)的constructor屬性值是Object),并且將空對(duì)象的__proto__屬性設(shè)置為指向Animal.prototype——這就是所謂的對(duì)象初始化。最后,返回初始化完畢的對(duì)象。這里將返回的新對(duì)象賦值給了變量dog。

          dog.sort; // mammal
          dog.character; // four legs
          dog.constructor; // Animal

          聰明的讀者結(jié)合前面介紹的內(nèi)容,可能會(huì)認(rèn)為使用new運(yùn)算符調(diào)用構(gòu)造函數(shù)創(chuàng)建對(duì)象的過程也可以像下面這樣來實(shí)現(xiàn):

          var dog = {};
          Animal.call(dog, “mammal”,”four legs”);

          表面上看,這兩行代碼與var dog = new Animal(”mammal”,”four legs”);是等價(jià)的,其實(shí)卻不是。雖然通過指定函數(shù)的執(zhí)行環(huán)境能夠部分達(dá)到初始化對(duì)象的目的,例如空對(duì)象dog確實(shí)獲得了sort和character這兩個(gè)屬性:

          dog.sort; // mammal
          dog.character; // four legs
          dog.constructor; // Object —— 注意,沒有修改dog對(duì)象默認(rèn)的constructor屬性

          但是,最關(guān)鍵的是新創(chuàng)建的dog對(duì)象失去了通過Animal.prototype屬性繼承其他對(duì)象的能力。只要與前面采用new運(yùn)算符調(diào)用構(gòu)造函數(shù)創(chuàng)建對(duì)象的過程對(duì)比一下,就會(huì)發(fā)現(xiàn),new運(yùn)算符在初始化新對(duì)象期間,除了為新對(duì)象添加顯式聲明的屬性外,還會(huì)對(duì)新對(duì)象進(jìn)行了一番“暗箱操作”——即將新對(duì)象的constructor屬性重寫為Animal,將新對(duì)象的__proto__屬性設(shè)置為指向Animal.prototype。雖然手工“初始化對(duì)象”也可以將dog.constructor重寫為Animal,但根據(jù)ECMA262規(guī)范,對(duì)象的__proto__屬性對(duì)開發(fā)人員是只讀的,對(duì)它的設(shè)置只能在通過new運(yùn)算符創(chuàng)建對(duì)象時(shí)由JavaScript解釋引擎替我們完成。
          JavaScript是基于原型繼承的,如果不能正確設(shè)置對(duì)象的__proto__屬性,那么就意味著默認(rèn)的繼承機(jī)制會(huì)失效:

          Animal.prototype.greet = “Hi, good lucky!”;
          dog.greet; // undefined

          事實(shí)上,在Firefox中,__proto__屬性也是可寫的:

          Animal.prototype.greet = “Hi, good lucky!”;
          dog.__proto__ = Animal.prototype;
          dog.greet; // Hi, good lucky!

          但這樣做只能在Firefox中行得通??紤]到在兼容多瀏覽器,必須依賴于new運(yùn)算符,才能實(shí)現(xiàn)基于原型的繼承。

          posted @ 2009-07-15 11:31 zhuyongjp 閱讀(672) | 評(píng)論 (0)編輯 收藏
           
          主站蜘蛛池模板: 玉溪市| 霸州市| 容城县| 淳化县| 安多县| 涿鹿县| 米脂县| 肃南| 泸水县| 玉门市| 阿荣旗| 临安市| 建德市| 阳信县| 信宜市| 万盛区| 湘潭县| 界首市| 宁德市| 达尔| 台湾省| 崇州市| 云和县| 临夏县| 尼勒克县| 象山县| 景宁| 兰考县| 景洪市| 郸城县| 科技| 涪陵区| 嘉义县| 郴州市| 镇雄县| 辽阳市| 黄山市| 贞丰县| 两当县| 江川县| 陕西省|