JavaScript基礎語法

JavaScript

簡介

JavaScript 是一種具有面向物件能力的、解釋型的程式設計語言。更具體一點，它是基於物件和事件驅動並具有相對安全性的客戶端指令碼語言。它的主要目的是，驗證發往伺服器端的資料、增加 Web 互動、加強使用者體驗度等。

JavaScript 的組成

ECMAScript定義的只是這門語言的基礎，與Web瀏覽器沒有依賴關係，而在基礎語法上可以構建更完善的指令碼語言。JavaScript的執行需要一定的環境，脫離了環境JavaScript程式碼是不能執行的，JavaScript只能夠寄生在某個具體的環境中才能夠工作。JavaScript執行環境一般都由宿主環境和執行期環境共同構成，其中宿主環境是由外殼程式生成的，如Web瀏覽器就是一個外殼程式，它提供了一個可控制瀏覽器視窗的宿主環境。執行期環境則由嵌入到外殼程式中的JavaScript引擎（或稱為JavaScript直譯器）生成，在這個環境中 JavaScript能夠生成內建靜態物件，初始化執行環境等。

Web瀏覽器自定義的DOM元件，以面向物件方式描述的文件模型。DOM定義了表示和修改

文件

所需的物件、這些物件的行為和屬性以及這些物件之間的關係。DOM物件，是我們用傳統的方法（javascript）獲得的物件。DOM屬於瀏覽器，而不是JavaScript語言規範裡的規定的核心內容。

前面的DOM是為了操作瀏覽器中的文件，而為了控制瀏覽器的行為和操作，瀏覽器還提供了BOM（瀏覽器物件模型）。

ECMAScript(基礎語法)

JavaScript的核心語法ECMAScript描述了該語言的語法和基本物件

DOM(文件物件模型)

文件物件模型（DOM）—— 描述了處理網頁內容的方法和介面

BOM(瀏覽器物件模型)

瀏覽器物件模型（BOM）—— 描述了與瀏覽器進行互動的方法和介面

開發工具

瀏覽器：Chrome

開發工具：Hbuilder X

進入瀏覽器控制檯 Console：F12控制檯的作用： console物件代表瀏覽器的JavaScript控制檯，用來執行JavaScript命令，常常用來顯示網頁執行時候的錯誤資訊。Elements用來除錯網頁的html和css程式碼。

基本用法

JS需要和HTML一起使用才有效果，我們可以透過直接或間接的方式將JS程式碼嵌入在HTML頁面中。

行內JS ：寫在標籤內部的js程式碼

內部JS ：定義在script標籤內部的js程式碼

外部JS ：單獨的js檔案，在HTML中透過script標籤引入

我們可以將JavaScript程式碼放在html檔案中任何位置，但是我們一般放在網頁的head或者body部分。由於頁面的載入方式是從上往下依次載入的，而這個對我們放置的js程式碼執行是有影響的。

放在

部分，最常用的方式是在頁面中head部分放置

外部 JS 檔案：

hello。js

alert（‘this is a outter js document’）；

hello。html

<！—— 在需要使用js的html頁面中引入 ——>

JavaScript基礎語法

語句和註釋

JavaScript程式的執行單位為行（line），也就是一行一行地執行。一般情況下，每一行就是一個語句。

語句（statement）是為了完成某種任務而進行的操作，語句以分號結尾，一個分號即表示一個語句結束。多個語句可以寫在一行內（不建議這麼寫程式碼），但是一行寫多條語句時，語句必須以分號結尾。

表示式不需要分號結尾。一旦在表示式後面新增分號，則JavaScript引擎就將表示式視為語句，這樣會產生一些沒有任何意義的語句。

單行註釋：用//起頭；多行註釋：放在/* 和 */之間。相容html註釋方式：<！—— ——>

識別符號和關鍵字

識別符號

就是一個名字，用來給變數和函式進行命名，有特定規則和規範

規則：

由Unicode字母、_、$、數字組成、中文組成（1）不能以數字開頭（2）不能是關鍵字和保留字（3）嚴格區分大小寫

規範：

（1）見名知意（2）駝峰命名或下劃線規則

關鍵字

也稱保留字，是被JavaScript徵用來有特殊含義的單詞

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield、Infinity、NaN、undefined

變數

變數即一個帶名字的用來儲存資料的記憶體空間，資料可以儲存到變數中，也可以從變數中取出資料。

變數的宣告

JavaScript是一種弱型別語言，在宣告變數時不需要指明資料型別，直接用

var

修飾符進行宣告。

變數宣告和賦值：

// 先宣告再賦值var a ； a = 10；// 宣告同時賦值var b = 20；

變數的注意點

（1）若只宣告而沒有賦值，則該變數的值為undefined。

var box；console。log（box）；

（2）變數要有定義才能使用，若變數未宣告就使用，JavaScript會報錯，告訴你變數未定義。

console。log（box2）；

（3）可以在同一條var命令中宣告多個變數。

var a， b， c = 10；console。log（a，b，c）；

（4）若使用var重新宣告一個已經存在的變數，是無效的。

var box = 10var box；

（5）若使用var重新宣告一個已經存在的變數且賦值，則會覆蓋掉前面的值

var box = 10；var box = 25；

（6）JavaScript是一種動態型別、弱型別語言，也就是說，變數的型別沒有限制，可以賦予各種型別的值。

var box = ‘hello world’；box = 10；

變數提升

JavaScript 引擎的工作方式是，先解析程式碼，獲取所有被宣告的變數，然後再一行一行地執行。這造成的結果，就是所有的變數的宣告語句，都會被提升到程式碼的頭部，這就叫做變數提升。

console。log（msg）；var msg = “so easy”；// 變數提升，相當於下面的程式碼var msg；console。log（msg）；msg = “so easy”；// 說明：最後的結果是顯示undefined，表示變數msg已宣告，但還未賦值。

注意：變數提升只對 var 命令宣告的變數有效，如果變數不是用 var 命令宣告的，就不會發生變數提升。

console。log（msg）；msg = “error”；

資料型別

雖說JS是弱型別語言，變數沒有型別，但資料本身是有型別的。針對不同的型別，我們可以進行不同的操作。

JavaScript 中有6 種資料型別，其中有五種簡單的資料型別：

Undefined

、

Null

、

布林

、

數值

和

字串

。一種複雜資料型別

Object

。

數值（Number）：整數和小數（比如 1 和 3。14）字串（String）：字元組成的文字（比如“Hello World”）布林值（Boolean）：true（真）和 false（假）兩個特定值Undefined：表示“未定義”或不存在，即此處目前沒有任何值Null：表示空缺，即此處應該有一個值，但目前為空物件（object）（引用）：各種值組成的集合 1）、物件（object）{name：”zhangsan”，age：”18”} 2）、陣列（array）［1，2，3］ 3）、函式（function）function test（） {}

undefined

undefined型別的值是undefined。

undefined 是一個表示“無”的原始值，表示值不存在。

出現undefined的常見情況：

（1）當聲明瞭一個變數而沒有初始化時，這個變數的值就是undefined

var box；console。log（box）； //undefined

（2）呼叫函式時，該函式有形參，但未提供實參，則該引數為undefined。

function noData（str） { // js函式形參只需要變數名即可 console。log（str）； // undefined}noData（）； // 呼叫方法時，未傳遞引數

（3）函式沒有返回值時，預設返回 undefined。

// 方法沒有返回值function noData（） { console。log（“Hello”）； }var re = noData（）；// 定義變數接收無返回值的方法console。log（re）；

null

null型別是隻有一個值的資料型別，即特殊的值null。它表示空值，即該處的值現在為空，它表示一個空物件引用。

使用Null型別值時注意以下幾點：

1）使用typeof運算子測試null返回object字串。

2）undefined派生自null，所以等值比較返回值是true。未初始化的變數和賦值為null的變數相等。

console。log（undefined == null）；var box = null； // 賦值為null的變數var a； // 未初始化的變數console。log（a == box）； // 兩個的值相等

布林型別

布林型別有兩個值：true、false。常用來做判斷和迴圈的條件

數值型

數值型包含兩種數值：整型和浮點型。

1）所有數字（整型和浮點型）都是以 64 位浮點數形式儲存。所以，JS中1 與 1。0 相等，而且 1 加上 1。0 得到的還是一個整數。浮點數最高精度是17位小數，由於浮點數運算時可能不精確，儘量不要使用浮點數做判斷。

2）在儲存數值型資料時自動將可以轉換為整型的浮點數值轉為整型。

console。log（1 == 1。0）； // trueconsole。log（1 + 1。0）； // 2var num = 8。0； // 自動將可以轉換為整型的浮點數轉為整型console。log（num）； // 8

字串

使用 ‘ ’ 或 “ ”引起來，如：‘hello’，“good”。

使用加號 ‘+’ 進行字串的拼接，如：console。log（‘hello’ + ‘ everybody’）；

物件

物件是一組資料和功能的集合。

說明：

{}：表示使用物件字面量方式定義的物件。空的大括號表示定義包含預設屬性和方法的物件。

型別轉換

自動型別轉換

函式轉換（String to Number）

JS 提供了

parseInt()

和

parseFloat()

兩個全域性轉換函式。前者把值轉換成整數，後者把值轉換成浮點數。只有對 String 型別呼叫這些方法，這兩個函式才能正確執行；對其他型別返回的都是 NaN（Not a Number）。

parseInt()

在轉換之前，首先會分析該字串，判斷位置為0處的字元，判斷它是否是個有效數字，如果不是，則直接返回NaN，不再繼續，如果是則繼續，直到找到非字元

parseInt（“1234blue”）； // returns 1234 parseInt（“22。5”）； // returns 22 parseInt（“blue”）； // returns NaN

parseFloat()

該方法與 parseInt（）方法的處理方式相似，從位置 0 開始檢視每個字元，直到找到第一個非有效的字元為止，然後把該字符之前的字串轉換成數字。不過，對於這個方法來說，第一個出現的小數點是有效字元。如果有兩個小數點，第二個小數點將被看作無效的，parseFloat（）方法會把這個小數點之前的字串轉換成數字。

parseFloat（“1234blue”）； // returns 1234。0parseFloat（“22。5”）； // returns 22。5parseFloat（“22。34。5”）； // returns 22。34parseFloat（“blue”）； //returns NaN

顯示轉換

幾乎每個數物件都提供了

toString()

函式將內容轉換為字串形式，其中Number提供的

toString

（）函式可以將數字轉換為字串。

Number還提供了

toFixed()

函式將根據小數點後指定位數將數字轉為字串，四捨五入

// 將內容轉換為字串形式var data = 10console。log（data。toString（））// 根據小數點後指定位數將數字轉為字串，四捨五入data = 1。4；console。log（data。toFixed（0））；data = 1。49；console。log（data。toFixed（1））； // 不能對null和undefined使用data = nullconsole。log（data。toString（））data = undefinedconsole。log（data。toString（））

JS 為 Number、Boolean、String 物件提供了構造方法，用於強制轉換其他型別的資料。此時操作的是整個資料，而不是部分。

Number（false） 0Number（true） 1Number（undefined） NaNNumber（null） 0Number（ “5。5 ”） 5。5Number（ “56 ”） 56Number（ “5。6。7 ”） NaNNumber（new Object（）） NaNNumber（100） 100Boolean（“”）； // false – empty stringBoolean（“hi”）； // true – non-empty stringBoolean（100）； // true – non-zero numberBoolean（null）； // false - nullBoolean（0）； // false - zeroBoolean（new Object（））； // true – object

最後一種強制型別轉換方法 String（）是最簡單的，因為它可把任何值轉換成字串。要執行這種強制型別轉換，只需要呼叫作為引數傳遞進來的值的 toString（）方法，即把 1 轉換成“1 ”，把 true轉換成 “true ”，把 false 轉換成 “false ”，依此類推。強制轉換成字串和呼叫 toString（）方法的唯一不同之處在於，對 null 或 undefined 值強制型別轉換可以生成字串而不引發錯誤：

var s1 = String（null）； // “null”var oNull = null；var s2 = oNull。toString（）； // won’t work， causes anerror

最為簡單的一種轉換為字串的方式，直接在任意資料後面 + “” 即可。

運算子

運算子用於執行程式程式碼運算，會針對一個及其以上運算元來進行運算。

算數運算子

運算子描述例子結果

+加x=y+2x=7

-減x=y-2x=3

*乘x=y*2x=10

/除x=y/2x=2。5

%求餘數x=y%2x=1

++自增（前導加、後導加）x=++yx=6

——自減（前導減、後導減）x=——yx=4

賦值和擴充套件運算子

運算子例子等價於結果

=x=yx=5

+=x+=yx=x+yx=15

-=x-=yx=x-yx=5

*=x*=yx=x*yx=50

/=x/=yx=x/yx=2

%=x%=yx=x%yx=0

比較運算子

運算子描述例子

==等於x==8 為 false

===全等（值和型別）x===5 為 true；x===“5” 為 false

！=不等於x！=8 為 true

>大於x>8 為 false

<小於x<8 為 true

>=大於或等於x>=8 為 false

<=小於或等於x<=8 為 true

邏輯運算子

運算子描述例子

&&and（x < 10 && y > 1）為 true

||or（x==5 || y==5）為 false

！not！（x==y）為 true

三目運算子

運算子描述例子

？：如果…否則…3>5？3：5

控制語句

我們寫的 JavaScript 程式碼都是按照從上到下依次執行，很多時候我們希望程式碼按照我們的意願去執行，比如有選擇性地執行某些程式碼，或者重複地執行某些程式碼，這就需要使用到流程控制語句。

流程控制語句一共有三種：

1。流程執行：從上到下，從左到右

2。選擇執行：分支選擇

3。迴圈執行：重複執行

選擇

單選擇

if （條件）{ 語句體；}

首先執行條件

如果結果為true，則執行語句體；

如果結果為false，則結束if語句。

注意：若語句體只有一條語句，可以省略大括號，但不建議省略

雙選擇

if （條件）{ 語句體1；}else { 語句體2；}

首先執行條件

如果結果為true，則執行語句體1；

如果結果為false，則執行語句體2。

多選擇

if（比較表示式1） { 語句體1；}else if（比較表示式2）{ 語句體2；}else if（比較表示式3）{ 語句體3；} 。。。［else { 語句體n+1；}］

switch結構

多個 if 。。。else 且值為定值時（即=== 在比較執行結果時，採用的是嚴格相等運算子（===），而不是相等運算子（==），這意味著比較時不會發生型別轉換。），可以使用 switch 替換：

switch（表示式） { case 值1：語句體1； break； case 值2：語句體2； break；。。。 default：語句體n+1；［break；］}

break 防止穿透，如果沒有 break，則繼續執行後面的程式碼，直到遇到 break 或全部執行完畢，但是有些時候會利用穿透。

迴圈

迴圈結構用於重複執行某個操作簡單理解就是重複執行同型別的程式碼，它有多種形式。

while

先判斷後執行

基本格式 while（判斷條件語句） { 迴圈體語句； } 擴充套件格式：初始化語句； while（判斷條件語句）{ 迴圈體語句；控制條件語句； // 少了它很容易形成死迴圈 }

do...while

先執行後判斷，至少執行一次

基本格式 do { 迴圈體語句； }while（判斷條件語句）；擴充套件格式：初始化語句； do { 迴圈體語句；控制條件語句； } while（判斷條件語句）；

for

for（初始化語句；判斷條件語句；控制條件語句）{ 迴圈體語句；}

死迴圈

條件永遠成立，永遠為 true，則會產生死迴圈，下面是最簡單的死迴圈

while（true）{}for（；；）{}

break 與 continue

break：停止本層迴圈

continue：暫停本次迴圈，繼續下一次

陣列

陣列是按次序排列的一組資料，每個值的位置都有編號（從0開始），整個陣列用方括號表示。

陣列定義

JS 中定義陣列的三種方式如下（也可先宣告再賦值）：

var arr = ［值1，值2，值3］； // 隱式建立var arr = new Array（值1，值2，值3）； // 直接例項化var arr = new Array（size）； // 建立陣列並指定長度

基本操作

陣列的長度可以透過length屬性來獲取，並可以任意更改

陣列名。length陣列名。length = 新長度

陣列中的每一個元素都可以被訪問和修改，甚至是不存在的元素，無所謂越界

陣列名［下標］陣列名［下標］ = 新值

陣列遍歷

陣列的遍歷即依次訪問陣列的每一個元素，JS提供三種遍歷陣列的方式：

普通的for迴圈遍歷

for（var i=0； i<=陣列。length-1； i++）{ }如：for（var idx=0；idx

for ... in

for（var 下標（名稱任意） in 陣列名）{ 陣列名［下標］是獲取元素} // 下標（名稱任意）如：for（var idx in arr）{ console。log（arr［idx］）；}

forEach

陣列名。forEach（function（element，index）{ // element（名稱任意）：元素，index（名稱任意）：下標}）如：arr。forEach（function（elem，idx）{ console。log（idx + “——>” + elem）；}）；

瞭解

陣列在使用的時候建議大家規矩來用。在存放資料時，從下標0開始順序的存放陣列元素。如果下標： 1。為非負整數（包括整數字符串）：自動從0開始，不存在新增 undefined 2。為負數、小數、非數字符串：這些內容不計算在長度內，當成“屬性”處理，相當於自定義屬性。陣列非常靈活，使用陣列元素 1。下標：非負整數（包括整數字符串）：陣列。下標陣列［下標］ 2。下標：負數、小數、非數字字串：陣列［屬性］* for ——> 不遍歷屬性* foreach ——>不遍歷屬性和索引中的undefined* for in ——>不遍歷索引中的undefined

陣列提供的操作方法

Array物件為我們提供了一些方法，可以很方便地運算元組

push 新增元素到最後 unshift 新增元素到最前 pop 刪除最後一項 shift 刪除第一項 reverse 陣列翻轉 join 陣列轉成字串 indexOf 陣列元素索引 slice 擷取（切片）陣列，原陣列不發生變化 splice 剪接陣列，原陣列變化，可以實現前後刪除效果 concat 數組合並

var arr = ［‘1’，‘a’，5，‘3’］；console。log（arr）；arr。push（10）；console。log（arr）；arr。unshift（‘b’）；console。log（arr）；arr。pop（）；console。log（arr）；arr。shift（）；console。log（arr）；arr。reverse（）；console。log（arr）；console。log（arr。join（‘\’‘））；console。log（arr）；console。log（arr。indexOf（’a‘））；console。log（arr。slice（2，5））；console。log（arr）；arr。splice（1，1，’一‘，’二‘）；console。log（arr）；var arr1 = ［0，’100‘］；console。log（arr。concat（arr1））；console。log（arr）；console。log（arr1）；console。log（arr1。（arr））；

函式

函式，即方法。就是一段預先設定的功能程式碼塊，可以反覆呼叫，根據輸入引數的不同，返回不同的值。函式也是物件。

函式的定義

有三種函式定義的方式：函式宣告語句、函式定義表示式、Function建構函式

函式宣告語句

function 函式名（［引數列表］）{ }例如：function foo（）{ console。log（1）；} foo（）；

該種方式定義的函式具有宣告提升的效果

foo（）； function foo（）{ console。log（1）；} // 變數宣告提升console。log（ a ）； var a = 2；

函式定義表示式

以表示式方式定義的函式，函式的名稱是可以不需要的

var 變數名 = function （［引數列表］） { }變數名（）；例如：var fun = function（）{ console。log（“Hello”）；}fun（）；

這種寫法將一個匿名函式賦值給變數。這時，這個匿名函式又稱函式表示式，因為賦值語句的等號右側只能放表示式。

Function建構函式

Function建構函式接收任意數量的引數，但最後一個引數始終都被看成是函式體，而前面的引數則列舉出了新函式的引數。

var add = new Function（’x‘，’y‘，’return （x + y）‘）；// 等同於function add（x， y） { return （x + y）；}add（）；

注意：

js中的函式沒有過載，同名的函式，會被後面的函式覆蓋。

js中允許有不定數目的引數，後面介紹arguments物件

函式的引數、呼叫和return語句

引數

函式執行的時候，有時需要提供外部資料，不同的外部資料會得到不同的結果，這種外部資料就叫引數，定義時的引數稱為形參，呼叫時的引數稱為實參

實參可以省略，那麼對應形參為undefined

若函式形參同名（一般不會這麼幹）：在使用時以最後一個值為準。

可以給引數預設值：當引數為特殊值時，可以賦予預設值。

引數為值傳遞，傳遞副本；引用傳遞時傳遞地址，操作的是同一個物件。

// 呼叫函式時，實參可以省略，則對應形參為undefinedfunction add（a ， b） { console。log（a + “+” + b + “=” + （a + b））；}add（3，4，5）//3+4=7add（1）；//1+undefined=NaNadd（）；//undefined+undefined=NaN// 若函式形參同名（一般不會這麼幹）：在使用時以最後一個值為準function add2（a ， a） { console。log（a）；}add2（1，2）；// 給引數預設值function defaultValue（a）{ a = a || “a”； return a；}console。log（defaultValue（））；function f（a）{ //若引數a不為undefined或null，則取本身的值，否則給一個預設值（a ！== undefined && a ！== null）？ a = a ： a = 1； return a；}console。log（f（））；// 值傳遞var num = 12；function change（n） { n = 30；}change（num）；console。log（num）；// 引用傳遞var obj = {name： “tom”}；function paramter（o） { o。name = 2；}paramter（obj）；console。log（obj。name）；// 給形參o賦予了新的陣列var obj2 = ［1， 2， 3］；function paramter2（o）{ o = ［2， 3， 4］； o［1］ = 3；}paramter2 （obj2）；console。log（obj2）

函式的呼叫

1. 常用呼叫方式

函式名（［實參］）；

存在返回值可以變數接收，若接收無返回值函式則為undefined。

2. 函式呼叫模式

function add（a，b）{ return a+b；} var sum = add（1，2） console。log（sum）；

3. 方法呼叫模式

var o = { m： function（）{ console。log（1）； } }；o。m（）；

return

函式的執行可能會有返回值，需要使用return語句將結果返回。return 語句不是必需的，如果沒有的話，該函式就不返回任何值，或者說返回 undefined。

作用：

1。在沒有返回值的方法中，用來結束方法。

2。有返回值的方法中，一個是用來結束方法，一個是將值帶給呼叫者。

函式的作用域

函式作用域：全域性（global variable）和區域性（local variable）

1. 全域性變數與區域性變數同名問題

var box =1； // 全域性變數function display（box）{ var box = 3； // 此處box與全域性變數box沒有關係，這裡的box為傳遞的引數，相當於新宣告的區域性變數 var b = 2； // 區域性變數 console。log（“box——>” + box）；}display（）；// b 不能訪問console。log（“b——>” + b）；

2. 在函式中定義變數時，若沒有加var關鍵字，使用之後自動變為全域性變數

function fun（）{ a = 100；}fun（）；alert（a）；

內建物件

Arguments 只在函式內部定義，儲存了函式的實參 Array 陣列物件 Date 日期物件，用來建立和獲取日期 Math 數學物件 String 字串物件，提供對字串的一系列操作

String

◦ charAt（idx）返回指定位置處的字元◦ indexOf（Chr）返回指定子字串的位置，從左到右。找不到返回-1◦ substr（m，n）返回給定字串中從m位置開始，取n個字元，如果引數n省略，則意味著取到字串末尾。◦ substring（m，n）返回給定字串中從m位置開始，到n位置結束，如果引數n省略，則意味著取到字串末尾。◦ toLowerCase（）將字串中的字元全部轉化成小寫。◦ toUpperCase（）將字串中的字元全部轉化成大寫。◦ length 屬性，不是方法，返回字串的長度。

Math

◦ Math。random（）隨機數◦ Math。ceil（）向上取整，大於最大整數◦ Math。floor（）向小取整，小於最小整數String

Date

// 獲取日期◦ getFullYear（）年◦ getMonth（）月◦ getDate（）日◦ getHours（）時◦ getMinutes（）分◦ getSeconds（）秒// 設定日期◦ setYear（）◦ setMonth（）◦ setDate（）◦ setHours（）◦ setMinutes（）◦ setSeconds（）◦ toLoacaleString（）轉換成本地時間字串

說明：

getMonth（）：得到的值：0~11（1月~12月）

setMonth（）：設定值時0~11

toLocaleString（）：可根據本地時間把 Date 物件轉換為字串，並返回結果。

物件

物件（object）是 JavaScript 的核心概念，也是最重要的資料型別。JavaScript 的所有資料都可以被視為物件。JavaScript 提供多個內建物件，比如 String、Date、Array 等等。物件是帶有屬性和方法的特殊資料型別。

簡單說，所謂物件，就是一種無序的資料集合，由若干個“鍵值對”（key-value）構成。透過JavaScript我們可以建立自己的物件。 JavaScript物件滿足的這種”鍵值對”的格式我們稱為JSON格式，以後會見得非常多，即偉大的JSON物件。

{鍵：值，鍵2：值2，。。。}

物件的建立

JS 建立自定義物件，主要透過三種方式：字面量形式建立物件、透過new Object物件建立、透過Object物件的create方法建立物件。

字面量形式建立

var 物件名 = {}；//建立一個空的物件var 物件名 = {鍵：值，鍵2：值2，。。。} var obj = { ’name‘ ： ’hello‘， age ： 12， sayHello ： function （） { console。log（“我是物件中的方法”）； }， courses ： { javase ： 4， javascript ： 3 }， isLike ： true， members ：［ {name ： “小紅”，age ： 20}， {name ： “小綠”，age ： 22}， {name ： “小藍”，age ： 27}， {name ： “小黃”} ］}；

透過new Object建立

var 物件名 = new Object（）； // 建立一個空的物件var obj = new Object（）；obj。name = ’zs‘；obj。age = 18；console。log（obj）；

透過Object物件的create方法建立

var 物件名 = Object。create（null）； var obj = Object。create（null）；obj。name = ’ls‘；obj。gender = trueconsole。log（obj）； var objn = Object。create（obj）；objn。age = 18；console。log（objn）；console。log（objn。gender）

物件的序列化和反序列化

序列化即將JS物件序列化為字串，反序列化即將字串反序列化為JS物件。JS中透過呼叫JSON方法，可以將物件序列化成字串，也可以將字串反序列化成物件。

// 序列化物件，將物件轉為字串JSON。stringify（object）；

// 反序列化，將一個Json字串轉換為物件。JSON。parse（jsonStr）；

this

this是JavaScript語言的一個關鍵字。

它代表函式執行時，自動生成的一個內部物件，只能在函式內部使用。

隨著函式使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this指的是，呼叫函式的那個物件。

在函式中使用this

在函式中使用this屬於全域性性呼叫，代表全域性物件，透過window物件來訪問。

function test （） { this。x = 1； console。log（this。x）；}test（）；console。log（x）； // 相當於定義在全域性物件上的屬性 var x = 10；console。log（x） // 10function test （）{ console。log（this。x） // 10 this。x = 1； console。log（this。x） // 1 console。log（this）}test（）；console。log（x）； // 1console。log（this）；

在物件中使用this

在物件中的函式使用this，代表當前的上級物件。

var obj = { name ： ’張三‘， age ： 20， sayHello ： function （） { console。log（this。name） console。log（this） }}obj。sayHello（）；