下面是一道超經(jīng)典的JS面試題。

蘊(yùn)含了靜態(tài)屬性與實(shí)例屬性，變量提升，this指向，new一個(gè)函數(shù)的過(guò)程

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(); 

輸出一下結(jié)果

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()

我們先看此題的上半部分做了什么，首先定義了一個(gè)叫Foo的函數(shù)，之后為Foo創(chuàng)建了一個(gè)叫g(shù)etName的靜態(tài)屬性存儲(chǔ)了一個(gè)匿名函數(shù)，之后為Foo的原型對(duì)象新創(chuàng)建了一個(gè)叫g(shù)etName的匿名函數(shù)。之后又通過(guò)函數(shù)變量表達(dá)式創(chuàng)建了一個(gè)getName的函數(shù)，最后再聲明一個(gè)叫g(shù)etName函數(shù)。

第一問(wèn)的 Foo.getName 自然是訪(fǎng)問(wèn)Foo函數(shù)上存儲(chǔ)的靜態(tài)屬性，自然是2

二、解析：

2.getName()

為何輸出是4，這里考的是變量提升與函數(shù)聲明提升。我們知道使用var聲明變量會(huì)存在變量提升的情況，比如下面的例子中，即使在聲明前使用變量a也不會(huì)報(bào)錯(cuò)，舉例：

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

因?yàn)槁暶魈崆皶?huì)讓聲明提升到代碼的最上層，而賦值操作停留在原地，所以上面代碼等同于：

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

而函數(shù)聲明（注意是函數(shù)聲明，不是函數(shù)表達(dá)式或者構(gòu)造函數(shù)創(chuàng)建函數(shù)）也會(huì)存在聲明提前的情況，即我們可以在函數(shù)聲明前調(diào)用函數(shù)：

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

//因?yàn)楹瘮?shù)聲明提前，導(dǎo)致函數(shù)聲明也會(huì)被提到代碼頂端，所以等同于
function fn() {
    console.log(1);
};
fn() // 1
fn() // 1

那這樣就存在一個(gè)問(wèn)題了，變量聲明會(huì)提升，函數(shù)聲明也會(huì)提升，誰(shuí)提升的更高呢？在你不知道的JavaScript中明確指出，函數(shù)聲明會(huì)被優(yōu)先提升，也就是說(shuō)都是提升，但是函數(shù)比變量提升更高，所以題目中的兩個(gè)函數(shù)順序可以改寫(xiě)成：

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

var getName;

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

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

三、解析：

3.Foo().getName()

其實(shí)可以看出來(lái)，我們?cè)趫?zhí)行Foo()函數(shù)的時(shí)候getName這個(gè)變量提升到外部的全局作用域中了，因?yàn)樵趈s中，如果對(duì)于一個(gè)變量沒(méi)用用var 或者 let等聲明的話(huà)，他就默認(rèn)是全局屬性,就是window對(duì)象的一個(gè)屬性。所以在這里我們的全局的getName又被改了

因?yàn)槲覀僃oo()執(zhí)行的時(shí)候返回了this而這里的this就是window對(duì)象 我們需要知道的是在瀏覽器中所有全局的聲明都是window對(duì)象的屬性和方法，所以這里我們調(diào)用this.getName()就會(huì)返回1了。

四、解析：

4.getName()

這里輸出1已經(jīng)毫無(wú)懸念，上一分析中，getName的值在Foo執(zhí)行時(shí)被修改了，所以再調(diào)用getName一樣等同于window.getName()，同樣是輸出1。

五、解析：

5.new Foo.getName()

首先還是先看運(yùn)算符優(yōu)先級(jí)吧，我自個(gè)看完的結(jié)果是【new Foo() > Foo() > new Foo】，先運(yùn)算方式2的Foo.getName() 結(jié)果為“2”，再new一個(gè)Foo實(shí)例對(duì)象,因此這里new的過(guò)程就相當(dāng)于單純把Foo.getName執(zhí)行了一遍輸出2。

六、解析：

6.new Foo().getName()

這里考了new基本概念，首先這個(gè)調(diào)用分為兩步，第一步new Foo()得到一個(gè)實(shí)例，第二步調(diào)用實(shí)例的getName方法。

我們知道new一個(gè)構(gòu)造函數(shù)的過(guò)程大致為，以構(gòu)造函數(shù)原型創(chuàng)建一個(gè)對(duì)象（繼承原型鏈），調(diào)用構(gòu)造函數(shù)并將this指向這個(gè)新建的對(duì)象，好讓對(duì)象繼承構(gòu)造函數(shù)中的構(gòu)造器屬性，如果構(gòu)造函數(shù)沒(méi)有手動(dòng)返回一個(gè)對(duì)象，則返回這個(gè)新建的對(duì)象。

所以在執(zhí)行new Foo()時(shí)，先以Foo原型創(chuàng)建了一個(gè)對(duì)象，由于Foo.prototype上事先設(shè)置了一個(gè)getName方法（輸出3的那個(gè)），所以這個(gè)對(duì)象可通過(guò)原型訪(fǎng)問(wèn)到這個(gè)方法，其次由于Foo內(nèi)部也沒(méi)提供什么構(gòu)造器屬性，最終返回了一個(gè)this（這個(gè)this指向?qū)嵗?，因此這里的this還是等同于我們前面概念提到的以Foo原型創(chuàng)建的對(duì)象，可以嘗試輸出這個(gè)實(shí)例，除了原型上有一個(gè)getName方法就沒(méi)有其它任何屬性，因此這里輸出3。

七、解析：

7.new new Foo().getName()

相當(dāng)于new(new Foo().getName())

先執(zhí)行new Foo().getName()由6部知道了輸出3，再創(chuàng)建Foo.prototype.getName()的實(shí)例返回。結(jié)果為3

總結(jié)

到此這篇關(guān)于js面試題Foo.getName()的文章就介紹到這了,更多相關(guān)js面試題Foo.getName()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論