首頁 > web前端 > js教程 > JavaScript高階程式設計介紹

JavaScript高階程式設計介紹

巴扎黑
發布: 2017-07-18 17:06:06
原創
1521 人瀏覽過


前言:

#  大致花了一個星期的時間把這本書認真看了半本,下面是我做的閱讀筆記,希望能讓看這本書的人有個大致的參考。目前可能寫得較亂不夠全面,後續我會整理添加。 (2017-7-17) 

第一章 JavaScript簡介

#第二章 HTML中使用JavaScript

第三章  基本概念

3.1.語法

區分大小寫

#標識符(建議用駝峰大小寫myCar)

註解// /**/

嚴格模式(use strict)

語句 建議var diff-a-b;要用分號,以及 if( test ) {  alert(test);  }一句話也要用{}

3.2 關鍵字和保留字

 

3.3 變數

未初始化undefined    var message = “hi”; message = 100; 型別隨便換

 

Function test(){

Var a = “hi”; 局部

b = “hi”; 全局

}
登入後複製

Test();  alert(a); 錯誤 alert(b); hi

 

3.4 資料類型

typeof

Undefined (定義但未被賦值)

Null(空物件指標)

Boolean(布林值true false 流程控制語句會自動執行對應boolean 轉換)

Number

(八進位0  十進位 十六進位0x  浮點數值數值範圍NaN 數值轉換Number parseInt )

String(字串,單雙引號沒區別,轉義序列,字串特點,toString  String)

Object(對象所有物件的基礎var o = new Object();)

函數在ES是對象,不是一種資料型別。

 

3.5運算子

#一元運算子 ++ -- + -(可用來轉換資料型別)

位元運算子  位元非~num1 位元與& 位元或##| 位元異或^ 左移<< 右移>> 無符號右移>>

 

#布林運算子 &&  ||   乘運算子* / %   加性運算子##+ -   關係運算子< > <= >= 

##相等運算子

==   !=   ===  !==   

條件運算子? :   

賦值運算子

=  *=  /=  %=  +=  -=  <<=  >>=  > >=

 

逗號運算子

 

3.6 

語句

 

# 3.7 

函數 

arguments      

沒有重載## 

#第四章 

 

變數、作用域與記憶體問題

4.1 基本型別與參考型別的值

動態的屬性  (

引用型別能動態地加入屬性

)複製變數值  (

基本型別是不同的空間,參考類型是引用相同的空間

)傳遞參數    (

相同

) #

偵測類型    (typeof  instanceof)

4.2執行環境與作用域

#作用域鏈結 延長作用域鏈結(try-catch  with)  沒有區塊層級作用域(if for 宣告變數查詢識別碼)

 

4.3垃圾收集

策略(標記清除引用計數)  效能問題 管理記憶體 

第五章  #參考類型

5.1 Object類型

 

Var person = {};(適合給函數傳入大量參數)    var parson = new Object();

Person[“name”](使用變數來代表屬性時用)   person.name(推薦)

 

 

#5.2 Array 類型

 

Var colors = new Array();    var colors = Array();  var colors =[*****];

 

Colors[*] = *****;     colors.length

 

偵測陣列:  instanceof   Array.isArray()

 

轉換法:  toString()    valueOf()   toLocaleString()   join()

 

##家字家方法:

##' ##  push()  pop()

 

#佇列方法: shift()  unshift() #重新排序方法: reverse()  sort(

可加入比較函數這個參數

#)  

 

操作方法:

concat()原沒變新增   slice()

原沒變截斷段   

splice()

原變了可刪除可添

 

位置方法: indexOf()  lastIndexOf()  

傳回項目的位置

#迭代方法:every() filter() forEach() map() some()  

每個項目都處理,但原始數組不會改變

並歸方法:

reduce()

順序 

reduceRight()

反序  對兩個項目一直遍歷到最後

 5.3 Date

類型

 New Date() 裡面 parse(“May 25,2004”) UTC(2005,0)       Date.now()

 

#######繼承的方法:###toLocaleString(##toLocaleString(### #########. )  toString()  valueOf()###### #########日期格式化方法:###toDateString() toTimeString() toLocaleDateString() toLocaleTimeString() toUTCString()##### # #########日期###/###時間元件方法:太多具體看書########## #####5.4RegExp###類型### ###### #########字面量### var pattern1 = / [bc]at / i;###### ######### 建構子## # var pattern2 =。 ####沒什麼卵用######### ####

RegExp實例方法:exec() 擷取群組(擷取多組符合項目)   text() 一次看是否符合    

 

RegExp建構子屬性:有點多,用來看最近一次符合的相關訊息

 

模式的限制:缺少某些語言(Perl)所支援的高階正規表示式特性,但是絕大多數情況夠用

 

5.5 Function類型    函數是物件(也是#Function#的實例),函數名稱是指標。

 

function sum(num1,num2) {  }

 

Var sum = function(num1,num2){  };

 

沒有重載:函數是對象,函數名稱是指標。

 

函數宣告與函數表達式:function ******* 函數宣告提升   var sum = ** ***** 不會提升

 

函數內部屬性:arguments物件# (屬性callee指向函數)   this物件( #指向函數執行的環境物件)      屬性caller (指向呼叫目前函數的函數,如果是全域作用域的函數則值為null)

 

函數屬性與方法:

屬性(length宣告參數個數 prototype繼承)  

 

非繼承方法: call( )    apply()   bind()

 

a.apply( b, c);  a.call( b, d );      

'

##Ch

盤'>

##' ##在環境物件

b

裡運行函數

a ,順便給a傳入參數c( argument

或陣列

)  /  d(

每項寫入

出來

)  Var a = b.bind(c);

 

a 是在c

在環境物件裡運行的函數

 

5.6基本包裝類型:Boolean

類型:

################################################################################ var booleanObject = new Boolean(true);  #######建議永遠不要使用######Boolean######物件。 ######### ###### ###### #######Number###類型:######var numberObject = new Number(10);  toFixed( )  toExponential()  toPrecision()######### #########也建議不要直接實例化###Number###類型。 ######### ###### ######String ###類型:######var stringObject = new String(###“hello world”);  length# ##屬性 ######### ###

1.字元方法:charAt()string[]   傳回對應字元    #charCodeAt()   傳回對應字元編碼

 

2.字串操作方法:

 

##concat()

+運算子和陣列的concat()#看起來一樣 

 

Slice()  substring()  substr()  

截斷字串,三個很靈活

 

3.

字串位置方法:indexOf( )   lastIndexOf()

 

4.trim()

方法 刪除前置及後綴的所有空格    trimLeft()  trimRight()

 

5.字串大小寫轉換方法

 

#toLowerCase()  toUpperCase()

經典方法

toLocaleLowerCase()  toLocaleUpperCase()

特定地區  這種更穩健

 

#6.字串的模式比對方法

match()

RegExpexec()本質一樣傳回符合到字串的陣列

 

search()

傳回第一個符合項目的索引否則回傳-1

 

replase()

符合且取代字串

 

#split()

符合分隔符號產生陣列

 

7.localeCompare()   

比較兩個字串

 

8.fromCharCode()   

靜態方法   將多個字元編碼變成字串

 

9.HTML

方法   例如big()     string

#凱希;

5.7

單體內建物件

 

1.Global

物件

 

URL

編碼方法: encodeURI() 整個    

encodeURIComponent()

某一段   編碼 decodeURI() 整個    

某一段   # eval()方法 非常強大且非常危險

ECMAScript

解析器

 #Global 物件的屬性    undefined

Array.........

##都是屬性

 Web瀏覽器是將全域物件作為window

物件的

一部分加以實作的

 

2.Math

物件

 

Math

物件的屬性   一些特殊值例如π

 

min() max()

方法

 

#捨去方法:小數值變整數

   ####### # ##

Math.ceil(25) 進一   Math.floor(25) 退一   #Math.round(25) 四捨五入

 

#random()方法  [0,1) 之間的隨機數字

 

其它方法  太多看書

 

第六章 #物件導向的程式設計

 

#6.1理解物件

 

# 6.1.1屬性類型:

 

#資料屬性:4個特性 

## 

存取器屬性:不包含資料值 4個特性透過Object.defineProperty()##定義 

6.1.2

定義多個屬性:

Object.defineProperties()  可以是資料屬性,也可以是存取器屬性。  

6.1.3

讀取屬性的特性:

Object.getOwnPropertyDescriptor()## 

 

6.2

建立物件

 

6.2.1

工廠模式

(

# #看書

)

 

6.2.2建構子模式(看書 

new  constructor  )

 

#6.2.3原型模式: 

#1.瞭解原型對象

 

2.

原型與

in

運算子( in  for-in )

## 

3.

更簡單的原型語法

(

物件字面量來存取物件

)

 

4.

原型的動態性

(

原型可以換成另一個對象,但對已經建立的實例無效了

)

 

5.原生物件的原型( 就是用原型模式,可以定義新方法在裡面,但不推薦#)6.原型物件的問題:沒有屬於實例自己的屬性 

6.2.4

組合使用建構子模式和原型模式#### ##### ######最常見的模式,實例有自己的屬性和方法,也有共享的。 ###### ######6.2.5###動態原型模式########## ######在上面的模式再加一個判斷語句,來動態在原型中加入方法。 ###### ######6.2.6###寄生建構函數模式########## #########和工廠模式的差異就一個### new###,還有它有多個######return#######。傳回的物件和建構函式沒有關係,導致不能用######instanceof######運算子來決定物件的型別。不太建議使用。 ######### ###

6.2.7穩健建構函數模式

 

#跟寄生建構子模式有類似處,但不用thisnewinstanceof也偵測不出

 

 

6.3繼承

6.3.1

原型鏈  原型搜尋機制

 

1.

別忘了預設的原型:所有函數的默認原型都是

Object

的實例。

 

2.

確定原型與實例的關係:

instanceof    isPrototypeOf()

 3.謹慎地定義方法:必須在實例替換原型之後才能定義新的方法。  4.原型鏈的問題: 原型外的屬性也給了繼承

 

#在創造子類型的實例時,不能傳遞參數給超類型的建構子。

 

很少是單獨使用。  

6.3.2

借用建構子利用

call

apply

來繼承和傳遞參數 但是只能使用建構函數模式。

 也很少單獨使用。

 

6.3.3

組合繼承

原型鏈實作 原型屬性和方法的繼承 

借用建構子實作

對實例屬性的繼承## 

最常用的繼承方式

 

##6.3.4原型式繼承(看書)  

 

沒有用到建構子 保持型別可以用,但是會跟原型模式一樣共用參考型別的屬性。  

6.3.5

寄生式繼承

#(看書#) 

不考慮建構子

可以用上

 

但是無法做到函數重複使用

 

#6.3.6

寄生組合式繼承

(閱讀)## 

組合繼承有問題:呼叫了兩次超類型的建構函數,導致實例和原型中重複了屬性。

 

寄生組合式繼承解決了這個問題,成為了最理想的繼承範式。

  

#第七章

函數表達式

############### ####定義函數方式:###### #########函數宣告###( ###函數宣告提升有#####name)   ############################################################# ### #########函數表達式###( name###為空白匿名函數######/######命名一般函數表達式都是匿名函數# #####)######### ###

7.1遞迴

 

嚴格模式不能用 arguments.callee  可以用命名函數表達式。

 

 

7.2閉包:有權存取另一個函數作用域中的變數的函數

自我總結:閉包是函數,一般用匿名函數

 

#1.閉包可以存取傳回外部函數中的變數。

 

2.另一個函數的活動物件會被保存,直到閉包的作用域連結被銷毀。

 

7.2.1閉包與變數 

 

##副作用:關閉包的作用域鏈上保存的是整個變數對象,所以返回的變數是保存的最後一個值。

 

例如在for迴圈中,則會出現不如意的情況。

 

7.2.2

關於this物件

 

##。

#閉包中的

this

對象,閉包可能在某些特殊情況被放到全局對像上,從而

this

變卻不自知。

 

7.2.3記憶體洩漏

使用閉包,確保正常回收記憶體 

 

7.3

模仿區塊層級作用域

 

用匿名自執行函數來模仿。  

自我總結作用:

 #1.內部執行完就會被摧毀。

 

2.匿名自執行函數可以減少污染全域方法和屬性。  閉包就有一個記憶體的問題,用這個結合很舒適。  

 

7.4私有變數 物件上的都是公有的    

函數裡面的都是私有的

 

透過閉包來建立函數的公有方法

(

特權方法

)    ---------

用來取得私有變數

在建構子中建立                         -------- 建構子

this   

#this.****** = function(){ **** }; 

但是每個實例化都會重新建構一組方法,浪費。

 ###### ######7.4.1###靜態私有變數                  #### 個實例沒有自己的私有屬性######### #########靜態就用###  ###私有作用域###   ###透過閉包在全域的構造函數的原型裡面來創造特權方法。 ######### ###

增進了程式碼的重複使用性,但是每個實例沒有自己的私有變數。 (因為這個叫靜態私有變數)

 

使用實例變數,還是靜態私有變數,看特定需求。

 

 

7.4.2模組模式                   字面量   一個實例物件 

#為單一範例建立私有變數與特權方法

(

單例:只有一個執行個體的物件

) 在匿名函數內部定義私有變數和方法,然後將一個物件字面量作為函數的回傳值。

 

 

7.4.3

增強的模組模式

 必須是某種類型的實例,同時也必須加入某些屬性或方法。

 

以上是JavaScript高階程式設計介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板