上書房之JavaScript(Part1)

第一章 JavaScript概述

1.1 什么是JavaScript

JavaScript是一種具有面向?qū)ο竽芰Ω鸟谩⒔忉屝偷目蛻舳四_本設(shè)計語言岖常。JavaScript不需要再一個語言環(huán)境下運行,而只需要支持它的瀏覽器即可燎字。它的主要目的是驗證發(fā)往服務(wù)器的數(shù)據(jù)腥椒、增加Web互動、加強用戶體驗候衍。

1.2 JavaScript的特點

松散性
JavaScript語言核心與C笼蛛、C++、Java相似,比如條件判斷符匾、循環(huán)忌卤、運算符等喻括,但它卻是一種松散類型的語言惋戏,也就是說领追,它的變量不必具有一個明確的類型。
對象屬性
JavaScript中的對象把屬性名映射為任意的屬性值响逢,類似于哈希表或關(guān)聯(lián)數(shù)組绒窑。
繼承機制
JavaScript中的面向?qū)ο罄^承機制是基于原型的,這和C++以及Java中的集成大不相同舔亭。

1.3 JavaScript的歷史

1995年些膨,Netscape(網(wǎng)景)公司為解決類似于“向服務(wù)器提交數(shù)據(jù)之前驗證”的問題,與Sun公司聯(lián)手開發(fā)一個名為LiveScript的腳本語言钦铺,后期為了營銷便利订雾,更名為JavaScript。之后隨著互聯(lián)網(wǎng)的普及瀏覽器的發(fā)展矛洞,F(xiàn)irefox洼哎、Google Chrome、Safari等主流的瀏覽器對JavaScript的支持也達到了極致沼本,使得JavaScript得到了飛速的發(fā)展噩峦,如今JavaScript已是各種瀏覽器默認(rèn)支持的腳本語言。

第二章 JavaScript使用

JavaScript 必需嵌入到 HTML 文檔擅威,才能被瀏覽器解釋和執(zhí)行壕探。將 JavaScript 腳本嵌入到 HTML 文檔中有3種標(biāo)準(zhǔn)方法:

2.1 通過 <script> 標(biāo)簽嵌入

通過 <script> 標(biāo)簽嵌入JavaScript代碼時,必需將代碼放在 <script> 和 </script> 標(biāo)記對之間郊丛。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        document.write("這是通過<script>標(biāo)簽嵌入的代碼");
    </script>
    <body>
        
    </body>
</html>

瀏覽器載入HTML文檔時李请,會識別 <script> 標(biāo)簽,執(zhí)行其中的 JavaScript 代碼厉熟,然后將結(jié)果返回并在瀏覽器窗口顯示导盅。

2.2 引入外部腳本

當(dāng)網(wǎng)頁功能比較復(fù)雜,或通用代碼(每個頁面都是用)較多時揍瑟,直接在 <script> 標(biāo)簽中嵌入 JavaScript 代碼會導(dǎo)致網(wǎng)頁雜亂白翻,不易管理。這時候绢片,我們希望能將JavaScript代碼保存在單獨的文件中滤馍,使用時再嵌入到 HTML 文檔。
可以通過 <script> 標(biāo)簽的 src 屬性可引入外部文件底循。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script src="../script/demo.js"></script>
    <body>
        
    </body>
</html>

引入外部腳本巢株,能夠很輕松的讓多個頁面使用相同的 JavaScript 代碼。外部腳本一般會被瀏覽器保存在緩存文件中熙涤,用戶再次訪問網(wǎng)頁時阁苞,無需重新載入困檩,加快了網(wǎng)頁打開速度。

2.3 在 HTML 屬性中直接嵌入

在 HTML 屬性中嵌入 JavaScript 代碼主要是針對 JavaScript 事件那槽。JavaScript 事件是指用戶對網(wǎng)頁進行操作時悼沿,網(wǎng)頁做出相應(yīng)的響應(yīng)。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <button onclick="alert('你點擊了按鈕骚灸!')">點擊我</button>
    </body>
</html>

第三章 語法糟趾、關(guān)鍵保留字及變量

3.1 語法構(gòu)成

區(qū)分大小寫
JavaScript語言是區(qū)分大小寫的,text和Text表示不同的兩個變量逢唤。
標(biāo)識符
標(biāo)識符就是指變量拉讯、屬性的名字涤浇,或者函數(shù)的參數(shù)鳖藕。標(biāo)識符可以是可以格式規(guī)則組合起來的一個或多個字符。

  • 第一個字符必須是一個字母只锭、下劃線或者$符
  • 其他字符可以是字母著恩、下劃線、$符或者數(shù)字
  • 不能把關(guān)鍵字蜻展、保留字喉誊、true、false和null作為標(biāo)識符

注釋
JavaScript使用C語言的注釋風(fēng)格纵顾,分為單行注釋和多行注釋伍茄。
單行注釋以 // 開頭
多行注釋以 /* 開始,以 */ 結(jié)尾
字面量
所謂字面量施逾,就是指程序中直接顯示出來的數(shù)據(jù)值敷矫。例如:
100 //數(shù)據(jù)字面量
“張強” //字符串字面量
false //布爾值字面量
null //對象字面量
{x:1, y:2} //對象字面量表達式
[1,2,3,4,5] //數(shù)組字面量表達式

3.2 關(guān)鍵字保留字

JavaScript描述了一組具有特定用途的關(guān)鍵字和保留字,一般用于控制語句的開始或結(jié)束汉额,或用于執(zhí)行特定的操作等曹仗,這些關(guān)鍵字和保留字不能用作標(biāo)識符。

關(guān)鍵字保留字

3.3 變量

JavaScript變量是松散型的蠕搜,所謂松散類型就是用來保存任何數(shù)據(jù)的類型怎茫。定義變量時要使用var操作符(var是關(guān)鍵字),后面跟一個變量名(變量名是標(biāo)識符)妓灌。
var name;
alert(name); //undefined
var name = “Johnny”;
alert(name); //Johnny
變量是一個可以改變的標(biāo)識符轨蛤,聲明并賦值后,可以改變它的值虫埂。

第四章 數(shù)據(jù)類型

JavaScript有5種簡單的數(shù)據(jù)類型:Undefined祥山、Null、Boolean告丢、Number枪蘑、String损谦。還有一種復(fù)雜數(shù)據(jù)類型——object。JavaScript不支持任何創(chuàng)建自定義類型的機制岳颇。所有值都是以上6種數(shù)據(jù)類型之一照捡。

4.1 Typeof操作符

typeof操作符是用來檢測變量的數(shù)據(jù)類型,對于值或者變量使用typeof操作符會返回如下字符串:

變量定義 typeof操作符 返回值
var x; typeof(x); undefined
var x = 1; typeof(x); number
var x = true; typeof(x); boolean
var x = “johnny”; typeof(x); string
var x = new object(); typeof(x); object

4.2 Undefined類型

Undefined是一種特殊的數(shù)據(jù)類型话侧,指的已聲明但沒有賦值的變量對應(yīng)的類型栗精。Undefined類型主要目的是為了作比較,引入Undefined類型是為了區(qū)分空對象與未初始化的變量瞻鹏,所以悲立,未初始化的變量與根據(jù)不存在的變量是不一樣的。
實例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var sex;
        document.write(sex);
        document.write(college);
    </script>
    <body>
        
    </body>
</html>

PS: 在實際項目中新博,聲明一個變量的時候薪夕,就必須初始化。

    <script>
        var customerName = "";  //字符串變量的初始值一般為空
        var total = 0;  //數(shù)字類型的初始值一般為0
        var success = false;    //布爾值類型的初始值一般的false
        var car = null; //對象類型的初始值一般為null赫悄;
    </script>

4.3 Null類型

Null類型是一個只有一個值的數(shù)據(jù)類型原献,即特殊值null,他表示一個空對象引用埂淮。當(dāng)時用typeof檢測null時姑隅,返回值為object。
如果定義的變量將來準(zhǔn)備用于保存對象倔撞,那么最好在定義變量的時候?qū)⑵涑跏蓟癁閚ull讲仰。這樣,當(dāng)檢查null值就知道變量是否已經(jīng)分配了對象引用了痪蝇。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var car = null;
        if(car != null){
            document.write("對象已賦值");
        }else{
            document.write("對象尚未初始化");
        }
    </script>
    <body>
        
    </body>
</html>

4.4 Boolean類型

Boolean類型有兩個值:true和false鄙陡。它用于條件判斷時使用。
實例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var success = true;
        if(success){
            document.write("submit success.");
        }else{
            document.write("submit failed.");
        }
        
        var x = 3;
        var y = 3;
        if(x === y){
            document.write("x is equal to y.");
        }else{
            document.write("x is not equal to y.");
        }
    </script>
    <body>
        
    </body>
</html>

4.5 Number類型

Number類型包含兩中數(shù)值霹俺,整數(shù)和浮點數(shù)柔吼。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var total = 100;
        var score = 90.5;
         document.write(typeof(total));
         document.write(typeof(score));
    </script>
    <body>
        
    </body>
</html>

判斷是否為數(shù)字類型——isNaN
精確到小數(shù)點后幾位——toFixed()
轉(zhuǎn)為字符串類型——toString()

4.6 String類型

String類型用于表示由零或多個字符組成的字符序列,即字符串丙唧。字符串可以由雙引號("")或單引號('')表示愈魏。
var customerName = "Johnny";
var customerName = 'Johnny';
String類型包含了一些特殊的字符字面量,也叫轉(zhuǎn)義字符想际。

字面量 含義
\n 換行
\t 制表
\b 空格
\r 回車
\f 進紙
\ 斜杠
' 單引號
" 雙引號

JavaScript中的字符串是不可改變的培漏,字符串一旦被創(chuàng)建,它的值就不能在被修改胡本。如果要修改一個字符串變量的值牌柄,首先要銷毀原來的字符串,然后再新創(chuàng)建一個字符串來填充該變量侧甫。
使用toString()方法可將數(shù)字類型的值轉(zhuǎn)為字符串類型珊佣。

4.7 Object類型

JavaScript中的對象其實就是一組數(shù)據(jù)和功能的集合蹋宦。對象可以通過執(zhí)行new操作符后跟要創(chuàng)建的對象類型的名稱來創(chuàng)建。在第八章中咒锻,我們會用專門的章節(jié)來介紹JavaScript的對象類型冷冗。

第五章 運算符

5.1 什么是表達式

表達式是JavaScript中的一個“短語”,解釋器會通過計算把它轉(zhuǎn)換成一個值惑艇。表達式分為簡單表達式和復(fù)雜表達式蒿辙,簡單表達式就是字面量或者變量名;復(fù)雜表達式是通過合并簡單的表達式來創(chuàng)建的一種表達式滨巴。

簡單表達式 說明
5.96 數(shù)值字面量
'Lee' 字符串字面量
True 布爾值字面量
null 空值字面量
{x:1, y:2} 對象字面量思灌、對象表達式
[1,2,3] 數(shù)組字面量、數(shù)組表達式
function(n) {return x+y;} 函數(shù)字面量恭取、函數(shù)表達式
box 變量
復(fù)雜表達式 說明
box + 5.96 加法運算的表達式
typeof(box) 查看數(shù)據(jù)類型的表達式
box > 8 邏輯運算表達式

通過上面的敘述泰偿,我們得知,單一的字面量和組合字面量的運算符都可稱為表達式秽荤。

5.2 一元運算符

只能操作一個值的運算符叫做一元運算符甜奄。
遞增++和遞減--
var count = 10;
count++; //相當(dāng)于count = count + 1;
count--; //相當(dāng)于count = count - 1;
前置和后置的區(qū)別
var count = 10;
++count; //相當(dāng)于count = count + 1;
--count; //相當(dāng)于count = count - 1;
var result1 = count++; //先賦值,后自增
var result2 = ++count; //先自增窃款,后賦值
前置和后置的區(qū)別
var count = 10;

5.3 算術(shù)運算符

JavaScript定義了5個算術(shù)運算符,加牍氛、減晨继、乘、除搬俊、求模(取余)紊扬。如果在算術(shù)運算的值不是數(shù)值,那么后臺會先使用Number()轉(zhuǎn)型函數(shù)將其轉(zhuǎn)換為數(shù)值(隱式轉(zhuǎn)換)唉擂。
(1) 加法
var x= 1 + 2;
(2) 減法
var x = 2 - 1;
(3) 乘法
var x = 2 * 1;
(4) 除法
var x = 6 / 3;
(5) 求模
var x = 6 % 3;

5.4 關(guān)系運算符

用于進行比較的運算符稱作為關(guān)系運算符餐屎,JavaScript中有8中關(guān)系運算符:小于(<)、大于(>)玩祟、小于等于(<=)腹缩、大于等于(>=)、相等(==)空扎、不等(!=)藏鹊、 恒等(===)、不恒等(!==)转锈。
和其他運算符一樣盘寡,當(dāng)關(guān)系運算符操作非數(shù)值時要遵循一下規(guī)則:

  • 兩個操作數(shù)都是數(shù)值,則數(shù)值比較
  • 兩個操作數(shù)都是字符串撮慨,則比較兩個字符串對應(yīng)的字符編碼值
  • 兩個操作數(shù)有一個是數(shù)值竿痰,則將另一個轉(zhuǎn)換為數(shù)值脆粥,再進行數(shù)值比較
  • 兩個操作數(shù)有一個是對象,則先調(diào)用valueOf()方法或toString()方法影涉,再用結(jié)果比較

相等(==)和恒等(===)的區(qū)別:
相等(==):值相等即可
恒等(===):值和類型必須都相同
不等(!=):值不相同即可
不恒等(!==):值或類型不相等

5.5 邏輯運算符

邏輯運算符通常用于布爾值的操作冠绢,一般和關(guān)系運算符配合使用,有三個邏輯運算符:邏輯與(&&)常潮、邏輯或(||)弟胀、邏輯非(!)。
(1) 邏輯與(&&)
var result = (5 > 4) && (4 > 3); //true喊式,兩邊都為true孵户,返回true

第一個操作數(shù) 第二個操作數(shù) 結(jié)果
true true true
true false false
false true false
false false false
(2) 邏輯與
var box = (9 > 7) (7 > 8); //true,兩邊只要有一邊是true岔留,返回true
第一個操作數(shù) 第二個操作數(shù) 結(jié)果
----------- ----------- ----
true true true
true false true
false true true
false false false

(3) 邏輯非(!)
邏輯非運算符可以用于任何值夏哭。無論這個值是什么數(shù)據(jù)類型,這個運算符都會返回一個布爾值献联。它的流程是:先將這個值轉(zhuǎn)換成布爾值竖配,然后取反,規(guī)則如下:

  • 操作數(shù)是一個對象里逆,返回false进胯;
  • 操作數(shù)是一個空字符串,返回true原押;
  • 操作數(shù)是一個非空字符串胁镐,返回false;
  • 操作數(shù)是數(shù)值0诸衔,返回true盯漂;
  • 操作數(shù)是任意非0數(shù)值(包括Infinity),false笨农;
  • 操作數(shù)是null就缆,返回true;
  • 操作數(shù)是NaN谒亦,返回true竭宰;
  • 操作數(shù)是undefined,返回true诊霹;

5.6 賦值運算符

賦值運算符用等于號(=)表示羞延,就是把右邊的值賦給左邊的變量。

var box = 100;  //把100賦值給box變量

復(fù)合賦值運算符通過x=的形式表示脾还,x表示算術(shù)運算符伴箩。

var box = 100;
box = box +100;  //200,自己本身再加100

這種情況可以改寫為:

var box = 100;
box += 100;  //200鄙漏,+=代替box+100

除了這種+=加/賦運算符嗤谚,還有其他的幾種如下:

  • 乘/賦(*=)
  • 除/賦(/=)
  • 模/賦(%=)
  • 加/賦(+=)
  • 減/賦(-=)

5.7 其他運算符

(1) 字符串運算符
字符串運算符只有一個棺蛛,即:"+"。它的作用是將兩個字符串相加巩步。
規(guī)則:至少一個操作數(shù)是字符串即可旁赊。

var x = '100' + '100';  //100100
var y = '100' + 100;        //100100
var z = 100 + 100;      //200

(2) 三元運算符
三元條件運算符其實就是后面將要學(xué)到的if語句的簡寫形式。

var x = 5 > 4 ? 'Y' : 'N';

第六章 流程控制

6.1 if語句

if 語句即條件判斷語句椅野,一共有三種格式:
(1) if (條件表達式) 語句;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var age = 18;
        if(age >= 18){
            alert("成年人终畅。");
        }
    </script>
    <body>
        
    </body>
</html>

(2) if (條件表達式) {語句;} else {語句;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var age = 18;
        if(age >= 18){
            alert("成年人。");
        }else{
            alert("未成年人竟闪。");
        }
    </script>
    <body>
        
    </body>
</html>

(3) if (條件表達式) {語句;} else if (條件表達式) {語句;} ... else {語句;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var score = 90;
        if(score >= 85){
            alert("優(yōu)秀");
        }else if(score >= 75){
            alert("良好");
        }else if(score >= 60){
            alert("及格");
        }else{
            alert("不及格");
        }
    </script>
    <body>
        
    </body>
</html>

6.2 switch語句

switch語句是多重條件判斷离福,用于多個值相等的比較。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var day = new Date().getDay();
        switch(day){
            case 0:
                alert("Today is Sunday");
                break;
            case 1:
                alert("Today is Monday");
                break;
            case 2:
                alert("Today is Tuesday");
                break;
            case 3:
                alert("Today is Wednesday");
                break;
            case 4:
                alert("Today is Thursday");
                break;
            case 5:
                alert("Today is Friday");
                break;
            case 6:
                alert("Today is Saturday");
                break;  
            default:
                alert("error");
                break;
        }
    </script>
    <body>
        
    </body>
</html>

6.3 do...while語句

do...while語句是一種先運行炼蛤,后判斷的循環(huán)語句妖爷。也就是說,不管條件是否滿足理朋,至少先運行一次循環(huán)體絮识。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var x = 10;
        do{
            alert(x);
            x++;
        }while(x <= 5)
    </script>
    <body>
        
    </body>
</html>

6.4 while語句

while語句是一種先判斷,后運行的循環(huán)語句嗽上。也就是說次舌,必須滿足條件了之后,方可運行循環(huán)體炸裆。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var x = 10;
        while(x <= 5){
            alert("x");
            x++;
        }
    </script>
    <body>
        
    </body>
</html>

6.5 for語句

for語句也是一種先判斷垃它,后運行的循環(huán)語句。但它具有在執(zhí)行循環(huán)之前初始變量和定義循環(huán)后要執(zhí)行代碼的能力烹看。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        for(var i=0; i<5; i++){
            alert(i);
        }
    </script>
    <body>
        
    </body>
</html>

6.6 for...in語句

for...in語句是一種精準(zhǔn)的迭代語句,可以用來枚舉對象的屬性洛史。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        var car = {
            "名稱": "奔馳",
            "型號": "GLC300",
            "顏色": "白色"
        };
        for(var p in car){
            alert(p);
        }
    </script>
    <body>
        
    </body>
</html>

6.7 break和continue語句

break和continue語句用于在循環(huán)中精確地控制代碼的執(zhí)行惯殊。其中,break語句會立即退出循環(huán)也殖,強制繼續(xù)執(zhí)行循環(huán)體后面的語句土思。而continue語句退出當(dāng)前循環(huán),繼續(xù)后面的循環(huán)忆嗜。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        for(var i=0; i<10; i++){
            document.write(i+"<br>");
            if(i === 5){
                document.write("退出循環(huán)"+"<br>");
                break;
            }
        }
        document.write("循環(huán)執(zhí)行完成");
    </script>
    <body>
        
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        for(var i=0; i<10; i++){
            if(i === 5){
                document.write("跳過本次循環(huán)"+"<br>");
                continue;
            }
            document.write(i+"<br>");
        }
        document.write("循環(huán)執(zhí)行完成");
    </script>
    <body>
        
    </body>
</html>

第七章 函數(shù)

函數(shù)是定義一次但卻可以調(diào)用或執(zhí)行任意多次的一段JS代碼己儒。函數(shù)有時會有參數(shù),即函數(shù)被調(diào)用時指定了值的局部變量捆毫。函數(shù)常常使用這些參數(shù)來計算一個返回值闪湾,這個值也成為函數(shù)調(diào)用表達式的值。

7.1 函數(shù)聲明

函數(shù)對任何語言來說都是一個核心的概念绩卤。通過函數(shù)可以封裝任意多條語句途样,而且可以在任何地方江醇、任何時候調(diào)用執(zhí)行。JavaScript中的函數(shù)使用function關(guān)鍵字來聲明何暇,后跟一組參數(shù)以及函數(shù)體陶夜。

    <script>
        function showMessage(){
            alert("shwo message function be called.");
        }
        showMessage();
    </script>
    <script>
        function showMessage(name, age){
            alert("Your name:" + name + ", age:" + age);
        }
        showMessage("Johnny",30);
    </script>

7.2 return返回值

帶參數(shù)和不帶參數(shù)的函數(shù),都沒有定義返回值裆站,而是調(diào)用后直接執(zhí)行的条辟。實際上,任何函數(shù)都可以通過return語句跟后面的要返回的值來實現(xiàn)返回值宏胯。

    <script>
        function getMessage(){
            return "shwo message function be called.";
        }
        
        var msg = getMessage();
        alert(msg);
    </script>
    <script>
        function getMessage(name, age){
            return "Your name:" + name + ", age:" + age;
        }
        
        var msg = getMessage("Johnny",30);
        alert(msg);
    </script>

return語句還有一個功能就是退出當(dāng)前函數(shù)羽嫡,注意和break的區(qū)別(break用在循環(huán)和switch分支語句里)。

    <script>
        function getMessage(name, age){
            if(name === "馬云"){
                return "哇塞胳嘲,阿里巴巴創(chuàng)始人厂僧,首富啊了牛!"+ "年齡:" + age;
            }
            return "你的名字: " + name + ", 年齡: " + age;
        }
        
        var msg = getMessage("馬云",50);
        alert(msg);
    </script>

7.3 arguments對象

JavaScript函數(shù)可以不定義參數(shù)颜屠,可以在函數(shù)體內(nèi)可以通過arguments對象來接收傳遞進來的參數(shù)(不常用)。

    <script>
        function getMessage(){
            if(arguments[0] === "馬云"){
                return "哇塞鹰祸,阿里巴巴創(chuàng)始人甫窟,首富啊蛙婴!"+ "年齡:" + arguments[1];
            }
            return "你的名字: " + arguments[0] + ", 年齡: " + arguments[1];
        }
        
        var msg = getMessage("張強",30);
        alert(msg);
    </script>

第八章 對象和數(shù)組

JavaScript對象粗井,其實就是一種類型,即引用類型街图。而對象的值就是引用類型的實例浇衬。在JavaScript中引用類型是一種數(shù)據(jù)結(jié)構(gòu),用于將數(shù)據(jù)和功能組織在一起餐济。它也常被稱為類耘擂,但JavaScript中卻沒有這種東西。雖然JavaScript是一門面向?qū)ο蟮恼Z言絮姆,卻不具備傳統(tǒng)面向?qū)ο笳Z言所支持的類和接口等基本結(jié)構(gòu)醉冤。
JavaScript中所有的類型都是對象。

8.1 Object對象

到目前為止篙悯,我們使用的引用類型最多的可能就是Object類型了蚁阳。雖然Object的實例不具備多少功能,但對于在應(yīng)用程序中的存儲和傳輸數(shù)據(jù)而言鸽照,它確實是非常理想的選擇螺捐。JavaScript 中的所有事物都是對象:字符串、數(shù)值、數(shù)組归粉、函數(shù)等等椿疗,此外,JavaScript 允許自定義對象糠悼。

8.1.1 創(chuàng)建Object

創(chuàng)建Object類型有三種方式届榄。
(1) 使用new運算符創(chuàng)建Object

<script>
  var car = new Object();       //使用new方式創(chuàng)建對象
  car.name = "Mercedes Benz";   //創(chuàng)建屬性字段
  car.model = "GLC 300";        //創(chuàng)建屬性字段
  car.color = "White";      //創(chuàng)建屬性字段
</script>

(2) 使用字面量方式創(chuàng)建Object

<script>
  var car = {
    name: "Mercedes Benz",
    model: "GLC 300",
    color: "White"
  };
</script>
<script>
  var car = {
    "name": "Mercedes Benz", //屬性字段也可以使用字符串形式
    "model": "GLC 300",
    "color": "White"
  };
</script>
<script>
  var car = {}; //使用字面量及傳統(tǒng)賦值方式,字面量聲明為空對象
  car.name = "Mercedes Benz";
  car.model = "GLC 300";
  car.color = "White";
</script>

(3) 使用構(gòu)造函數(shù)方式

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
  }
</script>

8.1.2 定義Object屬性

JavaScript可以為對象定義三種類型的屬性:私有屬性倔喂、實例屬性和類屬性铝条。
(1) 私有屬性的定義
私有屬性只能在構(gòu)造函數(shù)內(nèi)部定義與使用。

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
    
    var msg = "品牌:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color;
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
  alert(car.showMsg()); //undefined
</script>

(2) 實例屬性的定義
實例屬性定義席噩,也存在兩種方式:prototype方式(原型方式)和this方式班缰。實例屬性必須通過對象的實例進行引用
prototype方式(原型方式):functionName.prototype.propertyName=value;

<script>
  function car(name, model, color){
    car.prototype.name = name;
    car.prototype.model = model;
    car.prototype.color = color;
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
</script>

this方式:this.propertyName=value;

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
</script>

(3) 類屬性的定義
類屬性可以直接通過類名進行引用。

<script>
  function car(){};
  car.name = "Mercedes Benz";
  car.model = "GLC 300";
  car.color = "White";
  alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
</script>

8.1.3 取得Object的屬性

取得Object屬性值也有兩種方式:
(1) 使用.運算符(常用)

<script>
  var car = {}; //使用字面量及傳統(tǒng)賦值方式悼枢,字面量聲明為空對象
  car.name = "Mercedes Benz";
  car.model = "GLC 300";
  car.color = "White";
  alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
</script>

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert("您的愛車:" + car.name + "\n型號:" + car.model + "\n顏色:" + car.color);
</script>

(2) 使用[ ]運算符

<script>
  var car = {}; //使用字面量及傳統(tǒng)賦值方式埠忘,字面量聲明為空對象
  car.name = "Mercedes Benz";
  car.model = "GLC 300";
  car.color = "White";

  alert("您的愛車:" + car["name"] + "\n型號:" + car["model"] + "\n顏色:" + car["color"]);
</script>

8.1.4 創(chuàng)建Object的方法

JS中可以為對象定義三種類型的方法:私有方法、實例方法和類方法馒索,與Java類似:
? 私有方法只能在對象內(nèi)部使用
? 實例方法必須在對象實例化后才能使用
? 類方法可以直接通過類名去使用
(1) 私有方法
私有方法必須在構(gòu)造函數(shù)體內(nèi)定義莹妒,而且只能在構(gòu)造函數(shù)體內(nèi)使用。

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
    
    function getCar(){
      return "品牌:" + name + "\n型號:" + model + "\n顏色:" + color;
    }
    this.carInfo = getCar();
  }
  
  var carObj = new car("Mercedes Benz", "GLC 300", "White");
  alert(carObj.carInfo);
</script>

(2) 實例方法
實例方法必須在對象實例化后才能使用绰上。定義實例方法有兩種方式:prototype方式(原型方式)和this方式旨怠。
prototype方式(原型方式)

<script>
  function car(name, model, color){
    car.prototype.name = name;
    car.prototype.model = model;
    car.prototype.color = color;
    
    car.prototype.getCarInfo = function(){
      return "品牌:" + name + "\n型號:" + model + "\n顏色:" + color;
    }
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert(car.getCarInfo());
</script>

this方式

<script>
  function car(name, model, color){
    this.name = name;
    this.model = model;
    this.color = color;
    
    this.getCarInfo = function(){
      return "品牌:" + name + "\n型號:" + model + "\n顏色:" + color;
    }
  }
  var car = new car("Mercedes Benz", "GLC 300", "White");
  alert(car.getCarInfo());
</script>

(3) 類方法
類方法需要在構(gòu)造函數(shù)外面定義,可以直接通過構(gòu)造函數(shù)名對其進行引用蜈块。

<script>
  function car(){};
  car.getCarInfo = function(name, model, color){
    return "品牌:" + name + "\n型號:" + model + "\n顏色:" + color;
  }
  
  alert(car.getCarInfo("Mercedes Benz", "GLC 300", "White"));
</script>

8.2 Array數(shù)組

除了Object類型之外鉴腻,Array類型是JavaScript最常用的類型。而且JavaScript中的Array類型和其他語言中的數(shù)組有著很大的區(qū)別百揭。雖然數(shù)組都是有序排列爽哎,但JavaScript中的數(shù)組每個元素可以保存任何類型。JavaScript中數(shù)組的大小也是可以調(diào)整的器一。

8.2.1 創(chuàng)建數(shù)組

創(chuàng)建Array類型有兩種方式:第一種是new運算符倦青,第二種是字面量。
(1) 使用new關(guān)鍵字創(chuàng)建數(shù)組

<script>
  var car = new Array();    //創(chuàng)建了一個數(shù)組
  var car = new Array(10);  //創(chuàng)建一個包含10個元素的數(shù)組
  var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");   //創(chuàng)建一個數(shù)組并分配好了元素
</script>

(2) 使用字面量創(chuàng)建數(shù)組

<script>
  var car = []; //創(chuàng)建了一個數(shù)組
  var car = ["Mercedes Benz","BMW","LAND ROVER","Audi"];    //創(chuàng)建一個數(shù)組并分配好了元素
</script>

8.2.2 讀取數(shù)組

讀取數(shù)組可使用索引下標(biāo)來讀取數(shù)組的值盹舞。

<script>
  var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
  for(var i=0; i<car.length; i++){
    document.write(car[i]+"<br/>");
  }
</script>

8.2.3 數(shù)組中的方法

如上面所說,數(shù)組也是一種對象隘庄,所以也具有很多內(nèi)置的方法踢步。
(1) 棧方法
JavaScript數(shù)組提供了一種讓數(shù)組的行為類似于其他數(shù)據(jù)結(jié)構(gòu)的方法。也就是說丑掺,可以讓數(shù)組像棧一樣获印,可以限制插入和刪除項的數(shù)據(jù)結(jié)構(gòu)。棧是一種數(shù)據(jù)結(jié)構(gòu)(后進先出)街州,也就是說最新添加的元素最早被移除兼丰。而棧中元素的插入(或叫推入)和移除(或叫彈出)玻孟,只發(fā)生在一個位置——棧的頂部。JavaScript為數(shù)組專門提供了push()pop()方法鳍征。

數(shù)組

push()方法可以接收任意數(shù)量的參數(shù)黍翎,把它們逐個添加到數(shù)組的末尾,并返回修改后數(shù)組的長度艳丛。而pop()方法則從數(shù)組末尾移除最后一個元素匣掸,減少數(shù)組的length值,然后返回移除的元素氮双。

<script>
  var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
  car.push("Ford");
  alert(car.join('|'));
  car.pop();
  alert(car.join('|'));
</script>

(2) 隊列方法
棧方法是后進先出碰酝,而隊列方法是先進先出。隊列在數(shù)組的末端添加元素戴差,從數(shù)組的前端移除元素送爸。通過push()向數(shù)組末端添加一個元素,然后通過shift()方法從數(shù)組前端移除一個元素暖释。

<script>
  var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
  car.push("Ford");
  alert(car.join('|'));
  car.shift();
  alert(car.join('|'));
</script>

JavaScript還為數(shù)組提供了一個unshift()方法袭厂,它和shift()方法的功能完全相反。unshift()方法為數(shù)組的前端添加一個元素饭入。

<script>
  var car = new Array("Mercedes Benz","BMW","LAND ROVER","Audi");
  car.unshift("Ford");
  alert(car.join('|'));
  car.shift();
</script>

注意:IE瀏覽器對unshift()方法總是返回undefined而不是數(shù)組的新長度
(3) 排序方法

<script>
  var car = new Array(2,4,5,1,3,10);
  alert(car.sort(function(a,b){
    return a-b; //升序
  }));
  
  alert(car.sort(function(a,b){
    return b-a; //降序
  }));
</script>

第九章 Function類型

在JavaScript中嵌器,F(xiàn)unction(函數(shù))類型實際上是對象。每個函數(shù)都是Function類型的實例谐丢,而且都與其他引用類型一樣具有屬性和方法爽航。由于函數(shù)是對象,因此函數(shù)名實際上也是一個指向函數(shù)對象的指針乾忱。

9.1 函數(shù)的聲明

(1) 普通函數(shù)的聲明

<script>
  function sum(num1, num2){
    return num1 + num2;
  }
</script>

(2) 使用變量初始化函數(shù)

<script>
  var sum = function(num1, num2){
    return num1 + num2;
  }
</script>

9.2 作為值的函數(shù)

JavaScript中的函數(shù)名本身就是變量讥珍,所以函數(shù)也可以作為值來使用。也就是說窄瘟,不僅可以像傳遞參數(shù)一樣把一個函數(shù)傳遞給另一個函數(shù)衷佃,而且可以將一個函數(shù)作為另一個函數(shù)的結(jié)果返回。

<script>
  function getResult(sum, num){
    return sum(num);
  }
  
  function sum(num){
    return num + 10;
  }
  
  var result = getResult(sum, 10); //將sum函數(shù)作為參數(shù)傳遞給getResult函數(shù)
  alert(result);
</script>

9.3 函數(shù)內(nèi)部屬性

在函數(shù)內(nèi)部蹄葱,有兩個特殊的對象:arguments和this氏义。arguments是一個類數(shù)組對象,包含著傳入函數(shù)中的所有參數(shù)图云,主要用途是保存函數(shù)參數(shù)惯悠。但這個對象還有一個名叫callee的屬性,該屬性是一個指針竣况,指向擁有這個arguments對象的函數(shù)克婶。

<script>
  function recursion(num) {
    if (num <= 1) {
      return 1;
    } else {
      return num * recursion(num-1); //一個簡單的遞歸
    }
  }
  
  var result = recursion(5);
  alert(result);
</script>
<script>
  function recursion(num) {
    if (num <= 1) {
      return 1;
    } else {
      return num * arguments.callee(num-1);
    }
  }
  
  var result = recursion(5);
  alert(result);
</script>

function sum(num1, num2, num3){
  alert(arguments.length);
  return num1 + num2 + num3;
}

函數(shù)內(nèi)部另一個特殊對象是this,其行為與Java和C#中的this大致相似。換句話說情萤,this引用的是函數(shù)據(jù)以執(zhí)行操作的對象鸭蛙,或者說函數(shù)調(diào)用語句所處的那個作用域。PS:當(dāng)在全局作用域中調(diào)用函數(shù)時筋岛,this對象引用的就是window娶视。

<script>
  window.color = "red";
  var car = {
    brand: "Mercedes Benz",
    color: "white",
    drive: function(){
      alert(this.brand + " " + this.color + " is driving."); //這里的color引用的是具備的color
    }
  };
  
  car.drive();
  alert(this.color); //這個color屬性引用的是全局的color
</script>

<script>
  window.color = "red";
  window.brand = "BMW";
  var car = {
    brand: "Mercedes Benz",
    color: "white"
  };
  
  function drive () {
    alert(this.brand + " " + this.color + " is driving.");
  }
  drive(); //這里的color和brand屬性引用的是全局的color和brand
  car.drive = drive;
  car.drive(); //這里的color和brand屬性引用的是局部的color和brand
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市泉蝌,隨后出現(xiàn)的幾起案子歇万,更是在濱河造成了極大的恐慌,老刑警劉巖勋陪,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件贪磺,死亡現(xiàn)場離奇詭異,居然都是意外死亡诅愚,警方通過查閱死者的電腦和手機寒锚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來违孝,“玉大人刹前,你說我怎么就攤上這事〈粕#” “怎么了喇喉?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長校坑。 經(jīng)常有香客問我拣技,道長,這世上最難降的妖魔是什么耍目? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任膏斤,我火速辦了婚禮,結(jié)果婚禮上邪驮,老公的妹妹穿的比我還像新娘莫辨。我一直安慰自己,他們只是感情好毅访,可當(dāng)我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布沮榜。 她就那樣靜靜地躺著,像睡著了一般喻粹。 火紅的嫁衣襯著肌膚如雪敞映。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天磷斧,我揣著相機與錄音,去河邊找鬼。 笑死弛饭,一個胖子當(dāng)著我的面吹牛冕末,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播侣颂,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼档桃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了憔晒?” 一聲冷哼從身側(cè)響起藻肄,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎拒担,沒想到半個月后嘹屯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡从撼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年州弟,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片低零。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡婆翔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出掏婶,到底是詐尸還是另有隱情啃奴,我是刑警寧澤,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布雄妥,位于F島的核電站最蕾,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏茎芭。R本人自食惡果不足惜揖膜,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望梅桩。 院中可真熱鬧壹粟,春花似錦、人聲如沸宿百。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽垦页。三九已至雀费,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間痊焊,已是汗流浹背盏袄。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工忿峻, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人辕羽。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓逛尚,卻偏偏與公主長得像,于是被迫代替她去往敵國和親刁愿。 傳聞我的和親對象是個殘疾皇子绰寞,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容