JavaScript函式宣告提升

標籤：ror   pre   調用   原型   為什麼   輸出   class   return   例子   

　　首先，JavaScript中函數有兩種建立方式，即函式宣告、函數運算式兩種。

　　1、函式宣告。　

function boo(){    console.log(123);}boo()

 

　　2、函數運算式。

var boo = function(){    console.log(123)}boo()

 

　　現在來說說函式宣告提升。還是以例子來說明吧。

boo(123)function boo(x){    console.log(x); // 123}

　　運行後可知，在函式宣告中，函數建立前就可以先調用函數。

　　由於函式宣告提升，其實上述語句相當於這樣：

function boo(x){    console.log(x); // 123}boo(123)

 

　　而在函數運算式中，則會是另一番結果。

hoo(456)var hoo = function(y){    console.log(y) // Uncaught TypeError: hoo is not a function}

　　運行後，發現會報錯，為什麼呢？這是因為在函數運算式中，函式宣告並不會提前，它只是變數會提升而已。所以上述語句相當於：

var hoo;hoo(456);hoo = function(y){    console.log(y) // Uncaught TypeError: hoo is not a function}

 

　　講到函式宣告提升與變數聲明提升，這裡來舉另外一個例子。

var foo = function(){    console.log(123)}function foo(){    console.log(456)}foo()  

　　最初我一看到這個，毫不猶豫的就說這個結果是456，然而很遺憾，是錯的。下面來分析一下，雖然兩個函數的函數名是一樣的，但是第一種方法是函數運算式，第二種是函式宣告，鑒於變數聲明提升和函式宣告提升，所以上述語句其實相當於：

var foo;  // 變數聲明提升function foo(){  // 函式宣告提升    console.log(456)}foo = function(){  //  變數賦值依然保留在原來位置    console.log(123)}foo() 

　　所以結果顯而易見，是123嘍。

 

　　最後補一個容易混淆的。

function Foo(){    getName = function(){        console.log(1);    }    return this;}Foo.getName = function(){    console.log(2)}Foo.prototype.getName = function(){    console.log(3)}var getName = function(){    console.log(4)}function getName(){    console.log(5)}Foo.getName();  // 2
getName();  // 4
Foo().getName();  // 1  foo()執行完成後，將全域的getName也就是window.getName給更改後返回this，而在這裡this執行的就是window，所以最後執行的就是window.getName，所以輸出1
getName(); // 1  上面已經更改全域的getName，所以依然是1
new Foo.getName(); // 2 new 操作符在執行個體化構造器的時候，會執行構造器函數，也就是說，foo.getName會執行，輸出2
new Foo().getName(); // 3  先new foo()得到一個執行個體，然後再執行執行個體的getName方法,這個時候，執行個體的構造器裡沒有getName方法，就會執行構造器原型上的getName方法
new new Foo().getName()  // 3        

 

JavaScript函式宣告提升