javascript 一些原理解析01

編譯原理
在傳統編譯語言的流程中,程序中的一段源代碼在執行之前會經歷三個步驟,統稱爲“編譯”。

分詞/詞法分析(Tokenizing/Lexing)

分詞(tokenizing)和詞法分析(Lexing)之間的區別是非常微妙、晦澀的, 主要差異在於詞法單元的識別是通過有狀態還是無狀態的方式進行的。簡 單來說,如果詞法單元生成器在判斷 a 是一個獨立的詞法單元還是其他詞法 單元的一部分時,調用的是有狀態的解析規則,那麼這個過程就被稱爲詞法 分析

例如:

var  a = 12;

這段程序通常會被分解成 爲下面這些詞法單元:var、a、=、12 、;。
解析/語法分析(Parsing)
這個過程是將詞法單元流(數組)轉換成一個由元素逐級嵌套所組成的代表了程序語法 結構的樹。這個樹被稱爲“抽象語法樹” -- 簡稱AST
AST: AST抽象語法樹

代碼生成

將 AST 轉換爲可執行代碼的過程稱被稱爲代碼生成

指的是源代碼語法所對應的樹狀結構。也就是說,對於一種具體編程語言下的源代碼,通過構建語法樹的形式將源代碼中的語句映射到樹中的每一個節點上。

理解編譯原理過程
引擎: 從頭到尾負責整個 JavaScript 程序的編譯及執行過程,
編譯器: 負責語法分析及代碼生成
作用域: 負責收集並維護由所有聲明的標識符(變量)組成的一系列查詢,並實施一套非常嚴格的規則,確定當前執行的代碼對這些標識符的訪問權限。

理解程序的執行過程

var  a = 12;

如果這是面試題,面試官問我解析這個語句的過程。
我會說,爲一個變量 a 分配一個內存,然後將12的值,放到這個變量裏面。顯然沒有毛病,但是面試官可能想聽的並不是這個,假如編譯器是面試官的話,以上的過程就並不完全正確

var一個變量的時候a,編譯器會問作用域,這個變量名稱是否存在於作用域中,如果爲是的話,編譯器會忽略,繼續編譯,但如果爲否的話,編譯器會要求作用域,在當前的作用域中聲明一個變量命名爲a。
賦值過程同樣也是相同的道理 a = 12
引擎運行時會首先詢問作用域,在當前的作用域集合中是否存在一個叫作 a 的 變量。如果是,引擎就會使用這個變量;如果否,引擎會繼續查找該變量
如果引擎最終找到了 a 變量,就會將 12 賦值給它。否則引擎就會舉手示意並拋出一個異常!
---2020年12月 總結--
參考地址:
你不知道的JavaScript
https://segmentfault.com/a/1190000016231512
https://blog.csdn.net/zhixingheyi_tian/article/details/80040003

變量

  • 變量必須以字母開頭
  • 變量也能以 $ 和 _ 符號開頭(不過我們不推薦這麼做)
  • 變量名稱對大小寫敏感(y 和 Y 是不同的變量)

數據類型

值類型(基本類型):字符串(String)、數字(Number)、布爾(Boolean)、對空(Null)、未定義(Undefined)、Symbol。
引用數據類型:對象(Object)、數組(Array)、函數(Function)。

變量作用域

var myData = 'Data'; 
myOtherData = 'Data'; 

function myFunction() { 
 var myData = 'OnData'; 
 return myData; 
} 
function myOtherFunction() { 
 myOtherData = 'local'; 
 return myOtherData ; 
}

 console.log(myData);   //   Data
 console.log(myFunction());  //  OnData

console.log(myData); 輸出 Data 因爲它是一個全局變量
console.log(myFunction()); 輸出 OnData 是因爲在myFunction函數中聲明的本地變量,所以作用域僅在myFunction內

01函數的基礎使用

// 基礎函數
function sayHello() {
   console.log('Hello!');
}  
sayHello() 
// 函數傳參
function outer (hello){
  console.log(hello)
}
outer('hello');

//函數返回值 
function sun (numer1,numer2){
  return numer1+ numer2
}
sun(10,15)

02面向對象編程
JavaScript裏的對象就是普通名值對的集合

方式1:

var obj = new Object(); 

方式2:

var obj = {}; 

可以補充創建一個完整的對象

var obj = {
  name:{
    surname:'Zhang',
    names : 'XiaoLun',
  },
  age: 15;
}

對象是類的實例。一個類定義對象的特徵,我們可以創造多個類來表示數據結構

// 定義一個對象,並未對象添加對應的類 
function Book (title,conter,about){
  this.title = title,
  this.conter = conter,
  this.about = about,
}
// 實例化這個對象 
var  Book = new Book('title','png','isnotop')
// 對對象進行操作 、
console.log(Book.title); // title
Book.title = 'newTitle';
console.log(BooK.title); // newTitle

------- 最新更新 -------

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章