一道超經典js面試題Foo.getName()的故事

2022-03-23 13:01:29

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(); 
getName(); 
Foo().getName(); 
getName(); 
new Foo.getName();
new Foo().getName();
new new Foo().getName();

輸出一下結果

Foo.getName(); //2
getName(); //4
Foo().getName(); //1
getName(); //1
new Foo.getName(); //2
new Foo().getName(); //3
new new Foo().getName(); //3

一、解析：

1.Foo.getName()

我們先看此題的上半部分做了什麼，首先定義了一個叫Foo的函數，之後為Foo建立了一個叫getName的靜態屬性儲存了一個匿名函數，之後為Foo的原型物件新建立了一個叫getName的匿名函數。之後又通過函數變數表示式建立了一個getName的函數，最後再宣告一個叫getName函數。

第一問的 Foo.getName 自然是存取Foo函數上儲存的靜態屬性，自然是2

二、解析：

2.getName()

為何輸出是4，這裡考的是變數提升與函數宣告提升。我們知道使用var宣告變數會存在變數提升的情況，比如下面的例子中，即使在宣告前使用變數a也不會報錯，舉例：

console.log(a)// undefined
var a = 1;
console.log(a)// 1

因為宣告提前會讓宣告提升到程式碼的最上層，而賦值操作停留在原地，所以上面程式碼等同於：

var a
console.log(a)// undefined
a = 1;
console.log(a)// 1

而函數宣告（注意是函數宣告，不是函數表示式或者建構函式建立函數）也會存在宣告提前的情況，即我們可以在函數宣告前呼叫函數：

fn() // 1
function fn() {
    console.log(1);
};
fn() // 1

//因為函數宣告提前，導致函數宣告也會被提到程式碼頂端，所以等同於
function fn() {
    console.log(1);
};
fn() // 1
fn() // 1

那這樣就存在一個問題了，變數宣告會提升，函數宣告也會提升，誰提升的更高呢？在你不知道的JavaScript中明確指出，函數宣告會被優先提升，也就是說都是提升，但是函數比變數提升更高，所以題目中的兩個函數順序可以改寫成：

function getName() {
    console.log(5);
};

var getName;

getName = function () {
    console.log(4);
};

這樣就解釋了為什麼是輸出4。

三、解析：

3.Foo().getName()

其實可以看出來，我們在執行Foo()函數的時候getName這個變數提升到外部的全域性作用域中了，因為在js中，如果對於一個變數沒用用var 或者 let等宣告的話，他就預設是全域性屬性,就是window物件的一個屬性。所以在這裡我們的全域性的getName又被改了

因為我們Foo()執行的時候返回了this而這裡的this就是window物件我們需要知道的是在瀏覽器中所有全域性的宣告都是window物件的屬性和方法，所以這裡我們呼叫this.getName()就會返回1了。

四、解析：

4.getName()

這裡輸出1已經毫無懸念，上一分析中，getName的值在Foo執行時被修改了，所以再呼叫getName一樣等同於window.getName()，同樣是輸出1。

五、解析：

5.new Foo.getName()

首先還是先看運運算元優先順序吧，我自個看完的結果是【new Foo() > Foo() > new Foo】，先運算方式2的Foo.getName() 結果為“2”，再new一個Foo範例物件,因此這裡new的過程就相當於單純把Foo.getName執行了一遍輸出2。

六、解析：

6.new Foo().getName()

這裡考了new基本概念，首先這個呼叫分為兩步，第一步new Foo()得到一個範例，第二步呼叫範例的getName方法。

我們知道new一個建構函式的過程大致為，以建構函式原型建立一個物件（繼承原型鏈），呼叫建構函式並將this指向這個新建的物件，好讓物件繼承建構函式中的構造器屬性，如果建構函式沒有手動返回一個物件，則返回這個新建的物件。

所以在執行new Foo()時，先以Foo原型建立了一個物件，由於Foo.prototype上事先設定了一個getName方法（輸出3的那個），所以這個物件可通過原型存取到這個方法，其次由於Foo內部也沒提供什麼構造器屬性，最終返回了一個this（這個this指向範例），因此這裡的this還是等同於我們前面概念提到的以Foo原型建立的物件，可以嘗試輸出這個範例，除了原型上有一個getName方法就沒有其它任何屬性，因此這裡輸出3。