第25個冬天

我們於之前這篇 有簡單介紹function語法使用 但是那時還來不及詳細解說其中原理 Function運行原理 Function 之定義&調用示例 1 2 3 4 5 6 7 8 9 10 11 //沒有參數的function function myFunc(){ console.log( 'This is no parameter function' ); } myFunc(); //有參數的function function sum(a,b){ var c = a+b; console.log(c); } sum( 3 , 4 ); 每一個function於程式運行中途跑到該區function定義區域時 會自動建立一塊Execution Context之後 於function內部其實還會有兩階段過程運作 【Function 建立階段】 =>Stage1-1.初始化一個空間(Scope Chain) =>Stage1-2.創建三種變數物件 VO (Variable Object) 第一種 function arguments object(參數物件) 第二種 function中的function之指標 object 第三種 function中的變數設值為undifined 1 2 3 4 function 函式名稱 ( 參數物件 ){ 掃描 function中的function - pointer 掃描 function中的variable - 設為 undifined } =>Stage1-3.決定  this variable 的 值 【Function 運行階段】 =>進行逐行運行 ====================================================================== 這邊來一個簡單範例 1 2 3 4 5 6 7 8 9 10 11 function myFunc(i){ var a = 'Hi' ; var b = function innerFunc(){ }; f...

物件(Object) 1.物件屬性成員值之修改/值的獲取 2.物件之宣告 / 值之陳列打印 3.添加Array和Function到Object物件中 4.this關鍵字的意義及用途 物件屬性成員值之修改/值的獲取 用對應關鍵字去mapping 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //---------------物件---------------- var EmployeeObj = { name : 'Sam' , lastName : 'Eric' , age : 28 , job : 'Engineer' } //物件中特定屬性之值修改 //寫法1. 物件名['屬性欄位'] EmployeeObj [ 'name' ] = 'Jimmy' ; console . log ( EmployeeObj [ 'name' ]); //寫法2.物件名.屬性欄位 EmployeeObj . age = 30 ; console . log ( EmployeeObj [ 'age' ]); PS: 物件是使用大括號來包覆，直到最後一個屬性欄位之前都需要用 ',' 隔開 物件之宣告 / 值之陳列打印 1 2 3 4 5 6 7 //動態宣告物件 var jackey = new Object(); jackey . name = 'Jackey' ; jackey . lastName = 'Williams' ; jackey . age = 22 ; console . log ( jackey ); 添加Array和Function到Object物件中 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //---------------物件---------------- var EmployeeObj = ...

Javascript 程式碼背後的運行原理 每一個瀏覽器都會配有一個對應javascript引擎 例如: Google Chrome 採用 V8引擎(來自Google團隊開發) ---->底層是透過 C++進行開發的 https://zh.wikipedia.org/wiki/V8_(JavaScript引擎) https://www.ibm.com/developerworks/cn/opensource/os-cn-v8engine/ Mozilla Firefox 採用 TraceMonkey https://ithelp.ithome.com.tw/articles/10007775 這些我們稱為  javascript engine Javascript Engine  -->  Parser  -->  machine code --> Execute javascript engine 會去藉由 parser(解析器)進行解析 將所有看到的code(人腦看得懂的邏輯狀態) 轉換為  機械碼(001001110) 供給電腦、伺服器  可以去解析這些內容 並將一些網頁和動態程式放上Server端 才能去執行程式碼結果 這也是為何我們在之前文章示範很多變數宣告和撰寫時 可以立即在console中獲取才剛宣告並賦予數值內容的變數 值可立即回傳之原因 ExecutionStack (呼叫堆疊) -->很多地方都會使用的一個程式開發觀念 也有人用 Call Stack 來稱呼 比方我們依序定義好了 first second third 三個function 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 //===========Execution Stack================== //Global Variable(Execution Context) var name = 'Kevin' ; //Execution Context1 funct...

Javascript基礎語法學習介紹1 基本輸出 JS 五種變數型態 javascript變數特徵 if語句_雙等號與三等號之差異!!! if語句範圍表達式 switch 多分枝判斷語句 function 有參數傳入 / 無參數傳入 之陳述式 function 值之回傳 迴圈(for 、while、break/continue) Array 常用操作 文字編輯器使用: Subline Text3 不熟悉可以參考如下文章設置教學分享文 http://coolmandiary.blogspot.tw/2016/02/subline-text-3-part1.html 基本輸出 1 2 //-----------------javascript輸出--------------- console . log ( 'Hello World' ); JS 五種變數型態 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 //-----------------JS 五種變數型態--------------- //String var name = 'Sam' ; console . log ( name ); //int var age = 23 ; console . log ( age ); //Boolean var isMale = false ; console . log ( isMale ); //undefine var undefine ; //Null var nullvar = Null ; javascript變數特徵 1 2 3 4 5 6 7 8 9 10 11 var name = 'Sam' ; var age = 28 ; //字串相加: String+ 數字 console . log ( name + age ); //數值計算 數字+數字 console . log ( age + age ); //Sam...