1. 程式人生 > 實用技巧 >前端進階筆記(一)---JS語言通識

前端進階筆記(一)---JS語言通識

一、語言按照語法分類

1、非形式語言:中文 英文

2、形式語言:喬姆斯基譜系(四種文法 上下文包含文法)

  • 0型 無限制文法
  • 1型 上下文相關文法
  • 2型 上下文無關文法
  • 正則文法

二 產生式(BNF)

巴科斯諾爾正規化:即巴科斯正規化(英語:Backus Normal Form,縮寫為 BNF)是一種用於表示上下文無關文法(2型)的語言,上下文無關文法描述了一類形式語言。它是由約翰·巴科斯(John Backus)和彼得·諾爾(Peter Naur)首先引入的用來描述計算機語言語法的符號集。
產生式: 在計算機中指 Tiger 編譯器將源程式經過詞法分析(Lexical Analysis)和語法分析(Syntax Analysis)後得到的一系列符合文法規則(Backus-Naur Form,BNF)的語句

  • 用尖括號括起來的名稱來表示語法結構名

  • 語法結構分成基礎機構和需要用其他語法結構定義的複合結構

    • 基礎結構終結符
    • 複合結構非終結符
  • 引號和中間的字元表示終結符
  • 可以有括號

  • *表示重複多次

  • | 表示或

  • +表示至少一次

終結符:

  • Number
  • + - * /

非終結符

  • MultiplicativeExpression
  • AdditiveExpression

BNF 表示的四則運算 加減 乘除

定義一個數字

<Number> = "0" | "1" | "2" .....| "9"

定義一個十進位制數
<DecimalNumber> = "0" | (("1" | "2" .....| "9") <Number>* )

加法

<AdditiveExpression> ::= <DecimalNumber> + <DecimalNumber>

<MultiplicativeExpression> :: = <DecimalNumber> | <MultiplicativeExpression> "*" <DecimalNumber> | <MultiplicativeExpression> / <DecimalNumber>

<AdditiveExpression> ::= <MultiplicativeExpression> | <AdditiveExpression> "+" <MultiplicativeExpression> |<AdditiveExpression> "/" <MultiplicativeExpression>

BNF 帶括號的四則運算

括號
<PrimaryExpression> = <DecimalNumber> | "(" <LogicalExpress> ")"

+ -
<AdditiveExpression> = <PrimaryExpression> | <AdditiveExpression> "+" <PrimaryExpression> | <AdditiveExpression> "-" <PrimaryExpression>

* /
<MultiplicativeExpression> = <DecimalNumber> | <MultiplicativeExpression> "*" <DecimalNumber> |<MultiplicativeExpression> "/" <DecimalNumber>

四則表示式
<LogicalExpress> = <DecimalNumber> | <LogicalExpress> "||" <AdditiveExpression> | <LogicalExpress> "&&" <AdditiveExpression>

產生式: 在計算機中指 Tiger 編譯器將源程式經過詞法分析(Lexical Analysis)和語法分析(Syntax Analysis)後得到的一系列符合文法規則(Backus-Naur Form,BNF)的語句

通過產生式理解喬姆斯基譜系

  • 0型無限制文法

    • ?:: =? <a> <b> ::= "c" <d>
  • 1型上下文相關法 VB JavaScript Python
    • ?<A> ?::=? <B> ? <a> <b> <c> ::= <a> "c" <b> 只有中間那個可以變

"'''四則運算\n" <LogicalExpress> "'''" = "'''四則運算" ( <LogicalExpress> = <DecimalNumber> | <LogicalExpress> "||" <AdditiveExpression> | <LogicalExpress> "&&" <AdditiveExpression>) "'''"

  • 2型上下文無關法

    • <A>::=?
  • 3型正則文法(表示式)
    • <A>::=<A>?
    • <A>::=?<A> 不正確

JavaScript 總體上屬於上下文無關文法 表示式大部分屬於正則文法,有兩個特例 **(乘方) 是右結合 不屬於正則 屬於2型

{
get a{ return1},
get:1
}
屬於1型文法

三、現代語言的特例

  • C++中,*可能表示乘號或者指標,具體是哪個,取決星號前面的標示符是否被宣告為型別
  • VB中,<可能是小於號,也可能是XML直接量的開始,取決於當前位置是否可以接受XML直接量
  • Python中,行首的Tab符和空格會根據上一行的行首空白以一定的規則被處理成虛擬終結符indent或者dedent
  • JavaScript中,/可能是除號,也可能是正則表示式的開頭,除理方式類似於VB,字串模板中也需要特殊處理},還有自動插入分號

四、程式語言的分類

  • 形式語言-用途

    • 資料描述語言JSON 、HTML、XAML、SQL、CSS
    • 程式語言:C++、C、Java、C#、Python、Ruby、Perl、Lisp、T-SQL、Clojure、Haskel、JavaScript
  • 形式語言-表達方式
  1. 宣告式語言 JSON 、HTML、XAML、SQL、CSS、Lisp、Clojure、Haskel
  2. 命令型語言:C++、C、Java、C#、Python、Ruby、Perl、T-SQL、JavaScript

五、程式語言的性質

圖靈完備性

    • 命令式 -圖靈機

      • goto
      • if和while
    • 宣告式 -lambda
    • 遞迴

動態與靜態

    • 動態:

      • 在使用者的裝置/線上上伺服器上
      • 產品執行時
      • Runtime
    • 靜態

      • 在程式設計師的裝置上
      • 產品開發時
      • Compiletime

型別系統

    • 動態型別系統與靜態型別系統

      • 動態型別系統(JavaScript)
      • 靜態型別系統 C++
    • 強型別與弱型別
      • String + Number
      • String == Boolean
    • 複合型別
      • 結構體{ a:t1,b:t2}
      • 函式簽名 引數型別(列表)和返回值型別 (T1,T2)=>T3
    • 子型別
  • 泛型 逆變與協變

      • 凡是能用Array<Parent> 的地方都能用Array<Child> (協變)
      • 凡是能用Funtion<Child> 的地方都能用Funtion<Parent> (逆變)

一般指令式程式設計語言的設計方式

Atom(原子級) 最小的組成單位 通常包含關鍵字 直接量 變數名一些基本的單位稱為原子

  • Indetifier 變數名
  • Literal 直接量 數字直接量和字串直接量

Expression(表示式) 原子級的結構通過運運算元相連線,加上一些輔助的符號,構成表示式,通常是一個可以級聯的結構

  • Atom 原子
  • Operator 運運算元 (javascript為例)
    • 算數運運算元 + - * / % ++ --
    • 賦值運運算元 = += -+ *= /= %=
    • 比較運運算元 == === != !== > < >= <= ?
    • 邏輯運運算元 && || !
    • 型別運運算元 typeof(返回變數的型別) instanceof(返回 true,如果物件是物件型別的例項。)
    • 位運運算元 & | ~(非) ^(異或) <<(零填充左位移) >>(有符號右位移) >>> (零填充右位移)
  • Punctuator 特定的符號

Statement語句 if while for 語句

  • Expression
  • Keyworld
  • Punctuator

Structure結構化

  • Function
  • Class
  • Process 執行緒
  • Namespace (c++)

Program工程 npm

  • Promgram
  • Module
  • Package
  • Library