2. 程式人生 > >進擊JavaScript核心 --- （2）函式和預解析機制

進擊JavaScript核心 --- （2）函式和預解析機制

阿新 • • 發佈：2019-05-25

一、函式

每個函式都是 Function型別的例項，也具有屬性和方法。由於函式也是一個物件，因此函式名實際上也是一個指向函式物件的指標，不會與某個函式繫結
1、函式的定義方式 （1）、函式宣告 
function add(a, b) {
  return a + b;
}
函式宣告提升：在執行程式碼之前，會先讀取函式宣告，也就是說，可以把函式宣告放在呼叫它的程式碼之後 
fn();   // 1
function fn() {console.log(1)}
  （2）、函式表示式 
var add = function(a, b) {
  return a + b;
};
  函式表示式看起來像是常規的變數賦值，由於其function關鍵字後面沒有指定函式名，因此是一個匿名函式 函式表示式必須先賦值，不具備函式宣告提升的特性 
fn();   // Uncaught TypeError: fn is not a function
var fn = function(){console.log(1)};
  由於函式宣告提升這一特性，導致在某些情況下會出現意想不到的結果，例如： 
var flag = true;
if(flag) {
  function fn() {
    console.log('flag 為true')
  }
} else{
  function fn() {
    console.log('flag 為false')
  }
}
fn();
// chrome, firefox, ie11  輸出 flag 為true
// ie10及以下 輸出 flag 為false
  本意是想flag為true時輸出 'flag 為true', flag為false時輸出 'flag 為false'，為何結果卻不盡相同呢？究其原因就在於函式宣告提升，執行程式碼時首先讀取函式宣告，而 if...else...程式碼塊同屬於全域性作用域，因此後面的同名函式會覆蓋前面的函式，最終函式fn就只剩下一個 function fn(){console.log('flag 為false')}   由於函式宣告提升導致的這一結果令人大為意外，因此，js引擎會嘗試修正錯誤，將其轉換為合理狀態，但不同瀏覽器版本的做法並不一致 此時，函式表示式就可以解決這個問題 
var flag = true;
var fn;

if(flag) {
  fn = function() {
    console.log('flag 為true');
  }
} else{
  fn = function() {
    console.log('flag 為false');
  }
}
fn()

//chrome, firefox, ie7-11 均輸出 flag 為true
  其實這個也很好理解，js預解析時，fn和flag均被初始化為undefined，然後程式碼從上到下逐行執行，首先給flag賦值為true，進入if語句，為fn賦值為 function fn(){console.log('flag 為true')}
關於函式表示式，還有一種寫法，命名函式表示式 
var add = function f(a, b) {
  console.log(a + b);
}
add(1,2);     // 3
f(1,2);       // Uncaught ReferenceError: f is not defined

var add = function f(a, b) {
  console.log(f);
}
console.log(add);
add(3, 5);


// ƒ f(a, b) {
//   console.log(f);
// }
由此可見，命名函式f也是指向函式的指標，只在函式作用域內部可用
（3）、Function建構函式 
var add = new Function('a', 'b', 'return a + b');
  不推薦這種寫法，因為這種語句會導致解析兩次程式碼，第一次是解析js程式碼，第二次解析傳入建構函式中的字串，從而影響效能   2、沒有過載 在java中，方法具有過載的特性，即一個類中可以定義有相同名字，但引數不同的多個方法，呼叫時，會根據不同的引數選擇不同的方法 
public void add(int a, int b) {
  System.out.println(a + b);
}

public void add(int a, int b, int c) {
  System.out.println(a * b * c);
}

// 呼叫時，會根據傳入引數的不同，而選擇不同的方法，例如傳入兩個引數，就會呼叫第一個add方法
  而js則沒有函式過載的概念 
function add(a, b) {
  console.log(a + b);
}

function add(a, b, c) {
  c = c || 2;
  console.log(a * b * c);
}

add(1, 2);   // 4  （直接呼叫最後一個同名的函式，並沒有過載）
  由於函式名可以理解成一個指向函式物件的指標，因此當出現同名函式時，指標就會指向最後一個出現的同名函式，就不存在過載了（如下圖所示） 3、呼叫匿名函式 對於函式宣告和函式表示式，呼叫函式的方式就是在函式名（或變數名）後加一對圓括號 
function fn() {
  console.log('hello')
}
fn()

// hello

 

既然fn是一個函式指標，指代函式的程式碼段，那能否直接在程式碼段後面加一對圓括號呢？

function fn() {
  console.log('hello')
}()

// Uncaught SyntaxError: Unexpected token )

var fn = function() {
  console.log('hello')
}()

// hello

 

分別對函式宣告和函式表示式執行這一假設，結果出人意料。另外，前面也提到函式宣告存在函式宣告提升，函式表示式不存在，如果在函式宣告前加一個合法的JS識別符號呢？ 
console.log(fn);   // ƒ fn() {console.log('hello');}
function fn() {
  console.log('hello');
}

// 在function關鍵字前面加一個合法的字元，結果就把fn當做一個未定義的變量了
console.log(fn);   // Uncaught ReferenceError: fn is not defined
+function fn() {
  console.log('hello');
}

 

基於此可以大膽猜測，只要是function關鍵字開頭的程式碼段，js引擎就會將其宣告提前，所以函式聲明後加一對圓括號會認為是語法錯誤。結合函式表示式後面直接加圓括號呼叫函式成功的情況，做出如下嘗試： 
+function() {
  console.log('hello')
}()

-function() {
  console.log('hello')
}()

*function() {
  console.log('hello')
}()

/function() {
  console.log('hello')
}()

%function() {
  console.log('hello')
}()

// hello
// hello
// hello
// hello
// hello

 

竟然全部成功了，只是這些一元運算子在此處並無實際意義，看起來令人費解。換成空格吧，又會被js引擎給直接跳過，達不到目的，因此可以用括號包裹起來 
(function() {
  console.log('hello');
})();

(function() {
  console.log('hello');
}());

// hello
// hello
無論怎麼包，都可以成功呼叫匿名函數了，我們也不用再困惑呼叫匿名函式時，圓括號該怎麼加了   4、遞迴呼叫 遞迴函式是在一個函式通過名字呼叫自身的情況下構成的   一個經典的例子就是計算階乘 
// 3! = 3*2*1
// 4! = 4*3*2*1 = 4*3!

function factorial(num) {
  if(num <= 1) {
    return 1
  }
  return num * factorial(num - 1)
}

console.log(factorial(5))   // 120
console.log(factorial(4))   // 24
  如果現在把函式名factorial換成了jieCheng，執行jieCheng(5) 就會報錯了，外面改了，裡面也得改，如果是遞迴的層次較深就比較麻煩。事實上，這樣的程式碼也是不夠健壯的
這裡有兩種解決方案：   （1）、使用 arguments.callee arguments.callee 是一個指向正在執行的函式的指標，函式名也是指向函式的指標，因此，可以在函式內部用 arguments.callee 來替代函式名 
function fn() {
  console.log(arguments.callee)
}
fn()

// ƒ fn() {
//   console.log(arguments.callee)
// }

function factorial(num) {
  if(num <= 1) {
    return 1
  }
  return num * arguments.callee(num - 1)
}

console.log(factorial(5))   // 120

 

但在嚴格模式下，不能通過指令碼訪問 arguments.callee，訪問這個屬性會導致錯誤 
'use strict'

function factorial(num) {
  if(num <= 1) {
    return 1
  }
  return num * arguments.callee(num - 1)
}

console.log(factorial(5))   
// Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

 

（2）、命名函式表示式 
var factorial = function jieCheng(num) {
  if(num <= 1) {
    return 1
  }
  return num * jieCheng(num - 1)
};
console.log(factorial(5))  // 120

var result = factorial;
console.log(result(4));    // 24

 

5、間接呼叫 apply()和 call()。這兩個方法的用途都是在特定的作用域中呼叫函式，實際上等於設定函式體內 this 物件的值。   首先，apply()方法接收兩個引數：一個是在其中執行函式的作用域，另一個是引數陣列。其中，第二個引數可以是 Array 的例項，也可以是arguments 物件。 
function add(a, b) {
  console.log(a + b);
}

function sum1(a, b) {
  add.apply(window, [a, b]);
}

function sum2(a, b) {
  add.apply(this, arguments)
}

sum1(1, 2);    // 3
sum2(3, 5);    // 8

 

call()方法與 apply()方法的作用相同，它們的區別僅在於接收引數的方式不同。對於 call()方法而言，第一個引數是 this 值沒有變化，變化的是其餘引數都直接傳遞給函式。換句話說，在使用call()方法時，傳遞給函式的引數必須逐個列舉出來 
var color = 'red';
var obj = {
  color: 'blue'
};

function getColor() {
  console.log(this.color)
}

getColor.call(this)    // red
getColor.call(obj)     // blue

 

二、預解析機制

第一步：js執行時，會找所有的var和function關鍵字 　　--、把所有var關鍵字宣告的變數提升到各自作用域的頂部並賦初始值為undefined，簡單說就是 “宣告提前，賦值留在原地” 　　--、函式宣告提升   第二步：從上至下逐行解析程式碼   
var color = 'red';
var size = 31;

function fn() {
  console.log(color);
  var color = 'blue';
  var size = 29;
}

fn();    // undefined

 

// 第一步：在全域性作用域內查詢所有使用var和function關鍵字宣告的變數，把 color、size、fn 提升到全域性作用域頂端併為其賦初始值；同理，在fn函式作用域內執行此操作 // 第二步：從上至下依次執行程式碼，呼叫fn函式時，按序執行程式碼，函式作用域內的輸出語句中color此時僅賦初始值undefined 注意： （1）、如果函式是通過 “函式宣告” 的方式定義的，遇到與函式名相同的變數時，不論函式與變數的位置順序如何，預解析時函式宣告會覆蓋掉var宣告的變數 
console.log(fn)    // ƒ fn() {}

function fn() {}

var fn = 32

 

（2）、如果函式是通過 “函式表示式” 的方式定義的，遇到與函式名相同的變數時，會視同兩個var宣告的變數，後者會覆蓋前者 
console.log(fn);         // undefined
var fn = function() {};
var fn = 32;
console.log(fn)          // 32

 

（3）、兩個通過 “函式宣告” 的方式定義的同名函式，後者會覆蓋前者 
console.log(fn);     // ƒ fn() {console.log('你好 世界')}

function fn() {console.log('hello world')}

function fn() {console.log('你好 世界')}

 

預解析練習一：

var fn = 32

function fn() {
  alert('eeee')
}

console.log(fn)          // 32
fn()                     // Uncaught TypeError: fn is not a function
console.log(typeof fn)   // number

// 按照上面的預解析規則，預解析第一步時，fn會被賦值為 function fn() {alert('eeee')}；第二步從上到下逐步執行時，由於函式fn宣告提前，優於var宣告的fn執行了，
// 所以fn會被覆蓋為一個Number型別的基本資料型別變數，而不是一個函式，其值為32

 

預解析練習二：

console.log(a);        // function a() {console.log(4);}

var a = 1;

console.log(a);       // 1

function a() {
  console.log(2);
}

console.log(a);       // 1

var a = 3;

console.log(a);       // 3

function a() {
  console.log(4);
}

console.log(a);       // 3

a();                  // 報錯：不是一個函式
  預解析步驟： （1）、找出當前相同作用域下所有使用var和function關鍵字宣告的變數，由於所有變數都是同名變數，按照規則，權值最高的是最後一個宣告的同名的function，所以第一行輸出 function a() {console.log(4);} （2）、從上至下逐步執行程式碼，在第二行為變數a 賦值為1，因此輸出了一個1 （3）、執行到第一個函式a，由於沒有呼叫，直接跳過不會輸出裡面的2，執行到下一行輸出1 （4）、繼續執行，為a重新賦值為3，因此輸出了一個3 （5）、執行到第二個函式a，還是沒有呼叫，直接跳過不會輸出裡面的4，執行到下一行輸出3 （6）、最後一行呼叫函式a，但由於預解析時率先把a賦值為一個函式程式碼段，後面依次為a賦值為1和3，因此，a是一個Number型別的基本變數，而不是一個函數了

 

預解析練習三： 
var a = 1;
function fn(a) {
  console.log(a);     // 999
  a = 2;
  console.log(a)      // 2
}

fn(999);
console.log(a);       // 1
  預解析步驟： （1）、全域性作用域內，為a賦值為undefined，把函式fn提升到最前面；fn函式作用域內，函式引數在預解析時也視同區域性變數，為其賦初始值 undefined （2）、執行fn函式，傳入實參999，為區域性變數a賦值為999並輸出；重新為a賦值為2，輸出2 （3）、由於全域性作用域下的a被賦值為1，而函式作用域內部的a是訪問不到的，因此直接輸出1 預解析練習四： 
var a = 1;
function fn() {
  console.log(a);
  var a = 2;
}

fn();            // undefined
console.log(a);  // 1
var a = 1;
function fn() {
  console.log(a);
  a = 2;
}

fn();            // 1
console.log(a);  // 2
  對比兩段程式碼，唯一的區別就是fn函式內的變數a的作用域問題，前者屬於函式作用域，後者屬於全域性作用域，所以導致輸出結果完全不同  

相關推薦

進擊JavaScript核心 --- （2）函式和預解析機制

一、函式 每個函式都是 Function型別的例項，也具有屬性和方法。由於函式也是一個物件，因此函式名實際上也是一個指向函式物件的指標，不會與某個函式繫結 1、函式的定義方式 （1）、函式宣告 function add(a, b) { return a + b; }

林大媽的JavaScript基礎知識（三）：JavaScript程式設計（2）函式

　　JavaScript是一門函式式的面向物件程式語言。瞭解函式將會是瞭解物件建立和操作、原型及原型方法、模組化程式設計等的重要基礎。函式包含一組語句，它的主要功能是程式碼複用、隱藏資訊和組合呼叫。我們程式設計就是把一個需求拆分成若干函式和資料結構的組合實現，其中演算法又是實現正確函式的方法論。我們先介紹基礎

JavaScript（2）字串和函式

字串 <body> <script type="text/javascript"> //字串的使用 var s1=new String("h"); var s2="h"; //

深入理解JavaScript系列（2）：揭祕命名函式表示式 命名函式表示式 函式表示式 函式宣告

還有一種函式表示式不太常見，就是被括號括住的(function foo(){})，他是表示式的原因是因為括號 ()是一個分組操作符，它的內部只能包含表示式，我們來看幾個例子： 函式宣告只能出現在程式或函式體內。 如果function foo(){}是作為賦值表示式的一部分的

深入理解JavaScript系列（2）：揭祕命名函式表示式

還有一種函式表示式不太常見，就是被括號括住的(function foo(){})，他是表示式的原因是因為括號 ()是一個分組操作符，它的內部只能包含表示式，我們來看幾個例子： 函式宣告只能出現在程式或函式體內。 如果function foo(

[C++] 過載運算子與型別轉換（2）——函式呼叫運算子和型別轉換運算子

1、這兩個應該是C++中比較高階的用法了。 一、函式呼叫運算子   1、過載函式呼叫運算子()，必須是成員函式，一個類可以定義多個不同版本的呼叫運算子，相互之間應該在引數數量或者型別上有所區別。   2、定義了呼叫運算子的類的物件稱作 函式物件；函式

JavaScript學習筆記（2）——函式

定義函式 函式的定義方式有兩種 function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述函式定義為 function指出這是一個函式定義； abs是函式名稱

多線程簡單實例（2）生產者和消費者

interrupt block eas zed rgs .get () oid nal 這是一個生產者和消費者的例子。消費者從倉庫取物品，生產者向倉庫增加商品。 當商品說達到最大時，不能繼續增加商品，應該通知其他線程去取商品。 同樣，當倉庫商品為空時，無法取商品，而是通知其

javascript學習（2）循環

src .cn tin asc for循環 循環 分享 ava bre 一、for循環 1、for(i=1;i<6;i++)循環 2、for(x in arrayA)循環 二、while循環 1、while循環 2、do。。while循環 三、continue

自興人工智能------------python入門基礎（2）列表和元祖

div 最小值 最大值 布爾 str 列操作 一段 ext .so 一.通用序列操作： 列表中所有序列都可以進行特定的操作，包括索引（indexing）.分片（slicing）.序列相加（adding）.乘法，成員資格，長度，最小值，最大值，下面會一一介紹這些操作法。 1.

oracle 11g ocp 筆記（2）-- 安裝和創建數據庫

apu 數據庫管理工具 OS 靜默 software app %s 變量 多個 1.了解 數據庫管理工具 1.2 OUI(Oracle Universal Installer) ·OUI產品清單(inventory)位置 Windows:

Python入門筆記——（2）列表和元組

typeerror 和集 true perl 參數 集合 list函數 方法的參數 運算 一、序列 python包含6種內建的序列：列表、元組、字符串、Unicode字符串、buffer對象和xrange對象。序列中每個元素被分配一個序號即索引，第一個索引為0，

jQuery（2）動畫和事件

基本動畫 元素.show([speed],[callback]) 元素.hide([speed],[callback]) 元素.toggle([speed],[callback]) 元素.slideDown([speed],[callback]) 元素.slideUp([speed],[callba

Python資料型別（2）列表和元組

列表和元組 列表和元組都屬於序列型別（sequence）。序列物件中的元素都是有序存放的，可以通過編號訪問其元素。兩者最大的區別在於列表是一種可變序列支援修改其元素，而元組是一種不可變序列，不能修改其元素。 列表 列表（list)是一種可變序列。列表用方括號定義，元素間用逗號隔開。列

Python學習（2）——函式

1、函式的引數 （1）要注意定義可變引數和關鍵字引數的語法： *args是可變引數，args接收的是一個tuple； **kw是關鍵字引數，kw接收的是一個dict。 （2）呼叫函式時如何傳入可變引數和關鍵字引數的語法： 可變引數既可以直接傳入：func(1, 2, 3)，又

混亂不清的概念（2）——URI和URL（轉載）

參考來源：關於URL跟URI的區別，個人見解 url和uri的概念和區別，網上查了一大通，發現各種回答眼花繚亂，說了等於沒說，本來就是一個很抽象的概念，還用很抽象的的方式來答覆，這不是讓人虐心嗎？經過參考來源作者潛心研究了一番，把他們的區別分享給大家，老鳥勿噴！ 1.

java網路程式設計（2）URLDecoder和URLEncoder

一下為程式碼示例，具體的講解穿插在程式碼中 import java.net.URLDecoder; import java.net.URLEncoder; public class URLDecoderTest { public static void mai

小白mysql入門操作（2）庫和表的檢視、增加、刪除

首先 檢視資料庫：show databases;（注意：語句後面有分號“;”，如果沒有分號伺服器不會有任何響應，因為mysql中的語句是以分號結尾的） 例如： 我們可以看見現有的幾個資料庫，其中information_schema,mysql,performance

從零開始的畢設--JavaScript-Ajax（2）-GET

DOM處理XML XML在伺服器記錄的內容，在用GET方法傳回客戶端時，DOM可以把XML當成節點樹處理。 我們的blog.xml檔案是這樣的： <?xml version="1.0" encoding="utf-8"?> <blog>

FrameWork（2）結構和程式碼學習

整體結構: Android7.0的根目錄結構說明如下表所示： |– Makefile （全域性Makefile檔案，用來定義編譯規則） |– abi （應用程式二進位制介面） |– art （ART執行環境） |– bionic （bionic C庫） |– bootab