搜尋
首頁web前端js教程極易被忽略的javascript面試題七問七答_javascript技巧

此題是我出的一套前端面試題中的最後一題,用來考核面試者的JavaScript的綜合能力,很可惜到目前為止的將近兩年中,幾乎沒有人能夠完全答對,並非多難只是因為大多是面試者太過輕視他。

題目如下:

function Foo() {
 getName = function () { alert (1); };
 return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//请写出以下输出结果:
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

答案是:

function Foo() {
 getName = function () { alert (1); };
 return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

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

此題是我綜合之前的開發經驗以及遇到的JS各種坑匯集而成。此題涉及的知識點眾多,包括變數定義提升、this指標指向、運算子優先權、原型、繼承、全域變數污染、物件屬性及原型屬性優先權等等。

此題包含7小問,分別說下。

第一問

先看此題的上半部做了什麼,首先定義了一個叫Foo的函數,之後為Foo創建了一個叫getName的靜態屬性存儲了一個匿名函數,之後為Foo的原型對像新創建了一個叫getName的匿名函數。之後又透過函數變數表達式建立了一個getName的函數,最後再宣告一個叫getName函數。

第一問的 Foo.getName 自然是存取Foo函數上儲存的靜態屬性,自然是2,沒什麼好說的。

第二問

第二問,直接呼叫 getName 函數。既然是直接呼叫就是存取目前上文作用域內的叫getName的函數,所以跟1 2 3都沒什麼關係。此題有無數面試者回答為5。此處有兩個坑,一是變數宣告提升,二是函數表達式。

1、變數宣告提升

即所有宣告變數或宣告函數都會被提升到目前函數的頂端。

例如下碼:

console.log('x' in window);//true
var x;
x = 0;

程式碼執行時js引擎會將宣告語句提升至程式碼最上方,變成:

var x;
console.log('x' in window);//true
x = 0;

2、函數表達式

 var getName 與 function getName 都是宣告語句,差別在於 var getName 是函數表達式,而 function getName 是函數宣告。關於JS中的各種函數創建方式可以看 大部分人都會做錯的經典JS閉包面試題 這篇文章有詳細說明。

函數表達式最大的問題,在於js會將此程式碼拆分為兩行程式碼分別執行。

例如下碼:

console.log(x);//输出:function x(){}
var x=1;
function x(){}

實際執行的程式碼為,先將var x=1 拆分為var x; 和x = 1; 兩行,再將var x; 和function x(){} 兩行提升至最上方變成:

var x;
function x(){}
console.log(x);
x=1;

所以最終函數宣告的x覆蓋了變數宣告的x,log輸出為x函數。

同理,原題程式碼最終執行時的是:

function Foo() {
 getName = function () { alert (1); };
 return this;
}
var getName;//只提升变量声明
function getName() { alert (5);}//提升函数声明,覆盖var的声明

Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
getName = function () { alert (4);};//最终的赋值再次覆盖function getName声明

getName();//最终输出4

第三問

第三個問的 Foo().getName(); 先執行了Foo函數,然後呼叫Foo函數的回傳值物件的getName屬性函數。

Foo函數的第一句  getName = function () { alert (1); };  是一個函數賦值語句,注意它沒有var聲明,所以先向當前Foo函數作用域內尋找getName變量,沒有。接著向目前函數作用域上層,也就是外層作用域內尋找是否含有getName變量,找到了,也就是第二問中的alert(4)函數,將此變數的值賦值為function(){alert(1) }。

此處實際上是將外層作用域內的getName函數修改了。

注意:此處若依然沒有找到會一直向上查找到window對象,若window對像中也沒有getName屬性,就在window對像中創建一個getName變數。

之後Foo函數的回傳值是this,而JS的this問題部落格園中已經有非常多的文章介紹,這裡不再多說。

簡單的講,this的指向是由所在函數的呼叫方式決定的。而此處的直接呼叫方式,this指向window物件。

遂Foo函數回傳的是window對象,相當於執行 window.getName() ,而window中的getName已經被修改為alert(1),所以最後會輸出1

此處檢視了兩個知識點,一個是變數作用域問題,一個是this指向問題。

第四問

直接呼叫getName函數,相當於 window.getName() ,因為這個變數已經被Foo函數執行時修改了,遂結果與第三問相同,為1

第五問

第五問 new Foo.getName(); ,此處考察的是js的運算子優先權問題。

透過查上表可以得知點(.)的優先權高於new操作,遂相當於是:

new (Foo.getName)();
所以實際上將getName函式當作了建構子來執行,遂彈出2。

第六問

第六問 new Foo().getName() ,首先看運算子優先權括號高於new,實際執行為

(new Foo()).getName()
遂先執行Foo函數,而Foo此時作為建構函數卻有回傳值,所以這裡要說明下js中的建構函數回傳值問題。

建構函式的回傳值

在傳統語言中,建構子不應該有回傳值,實際執行的回傳值就是此建構函式的實例化物件。

而在js中建構函式可以有回傳值也可以沒有。

1、沒有回傳值則按照其他語言一樣傳回實例化物件。

2、若有回傳值則檢查其回傳值是否為引用型別。 如果是非引用型別,如基本型別(string,number,boolean,null,undefined)則與無回傳值相同,實際傳回其實例化物件。

3、若回傳值是引用型,則實際回傳值為這個引用型別。

原題中,返回的是this,而this在建構函數中本來就代表當前實例化對象,遂最終Foo函數返回實例化對象。

之後呼叫實例化物件的getName函數,因為在Foo建構子中沒有為實例化物件添加任何屬性,遂到當前物件的原型物件(prototype)中尋找getName,找到了。

遂最終輸出3。

第七問

第七問, new new Foo().getName(); 同樣是運算子優先權問題。

最終實際執行為:

new ((new Foo()).getName)();
先初始化Foo的實例化對象,然後將其原型上的getName函數作為建構子再次new。

遂最終結果為3

最後

就答案狀況而言,第一問100%都可以回答正確,第二問大概只有50%正確率,第三問能回答正確的就不多了,第四問再正確就非常非常少了。其實此題並沒有太多刁鑽匪夷所思的用法,都是一些可能會遇到的場景,而大多數人但凡有1年到2年的工作經驗都應該完全正確才對。

只能說有些人太急躁太輕視了,希望大家透過此文了解js一些特性。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中