亚洲v欧美v国产v在线成_制服丝袜中文字幕丝袜专区_一区二区三区韩国电影_激情欧美一区二区中文字幕

我要投稿 投訴建議

前端程序員JavaScript面試題

時間:2023-02-19 15:50:33 面試試題 我要投稿
  • 相關(guān)推薦

前端程序員JavaScript面試題

  今天小編分享下我曾經(jīng)出過的一道面試題,此題是我出的一套前端面試題中的最后一題,用來考核面試者的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);}

  //請寫出以下輸出結(jié)果:

  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

  此題是我綜合之前的開發(fā)經(jīng)驗以及遇到的JS各種坑匯集而成。此題涉及的知識點眾多,包括變量定義提升、this指針指向、運算符優(yōu)先級、原型、繼承、全局變量污染、對象屬性及原型屬性優(yōu)先級等等。

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

  第一問

  先看此題的上半部分做了什么,首先定義了一個叫Foo的函數(shù),之后為Foo創(chuàng)建了一個叫g(shù)etName的靜態(tài)屬性存儲了一個匿名函數(shù),之后為Foo

  的原型對象新創(chuàng)建了一個叫g(shù)etName的匿名函數(shù)。之后又通過函數(shù)變量表達式創(chuàng)建了一個getName的函數(shù),最后再聲明一個叫g(shù)etName函數(shù)。

  第一問的 Foo.getName 自然是訪問Foo函數(shù)上存儲的靜態(tài)屬性,自然是2,沒什么可說的。

  第二問

  第二問,直接調(diào)用 getName 函數(shù)。既然是直接調(diào)用那么就是訪問當前上文作用域內(nèi)的叫g(shù)etName的函數(shù),所以跟1 2 3都沒什么關(guān)系。此題有無數(shù)面試者回答為5。此處有兩個坑,一是變量聲明提升,二是函數(shù)表達式。

  變量聲明提升

  即所有聲明變量或聲明函數(shù)都會被提升到當前函數(shù)的頂部。

  例如下代碼:

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

  var x;

  x = 0;

  代碼執(zhí)行時js引擎會將聲明語句提升至代碼最上方,變?yōu)椋?/p>

  var x;

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

  x = 0;

  函數(shù)表達式

  var getName 與 function getName 都是聲明語句,區(qū)別在于 var getName 是函數(shù)表達式,而 function getName 是函數(shù)聲明。關(guān)于JS中的各種函數(shù)創(chuàng)建方式可以看 大部分人都會做錯的經(jīng)典JS閉包面試題 這篇文章有詳細說明。

  函數(shù)表達式最大的問題,在于js會將此代碼拆分為兩行代碼分別執(zhí)行。

  例如下代碼:

  console.log(x);//輸出:function x(){}

  var x=1;

  function x(){}

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

  var x;

  function x(){}

  console.log(x);

  x=1;

  所以最終函數(shù)聲明的x覆蓋了變量聲明的x,log輸出為x函數(shù)。

  同理,原題中代碼最終執(zhí)行時的是:

  function Foo() {

  getName = function () { alert (1); };

  return this;

  }

  var getName;//只提升變量聲明

  function getName() { alert (5);}//提升函數(shù)聲明,覆蓋var的聲明

  Foo.getName = function () { alert (2);};

  Foo.prototype.getName = function () { alert (3);};

  getName = function () { alert (4);};//最終的賦值再次覆蓋function getName聲明

  getName();//最終輸出4

  第三問

  第三問的 Foo().getName(); 先執(zhí)行了Foo函數(shù),然后調(diào)用Foo函數(shù)的返回值對象的getName屬性函數(shù)。

  Foo函數(shù)的第一句 getName = function () { alert (1); };

  是一句函數(shù)賦值語句,注意它沒有var聲明,所以先向當前Foo函數(shù)作用域內(nèi)尋找getName變量,沒有。再向當前函數(shù)作用域上層,即外層作用域內(nèi)尋找

  是否含有g(shù)etName變量,找到了,也就是第二問中的alert(4)函數(shù),將此變量的值賦值為 function(){alert(1)}。

  此處實際上是將外層作用域內(nèi)的getName函數(shù)修改了。

  注意:此處若依然沒有找到會一直向上查找到window對象,若window對象中也沒有g(shù)etName屬性,就在window對象中創(chuàng)建一個getName變量。

  之后Foo函數(shù)的返回值是this,而JS的this問題博客園中已經(jīng)有非常多的文章介紹,這里不再多說。

  簡單的講,this的指向是由所在函數(shù)的調(diào)用方式?jīng)Q定的。而此處的直接調(diào)用方式,this指向window對象。

  遂Foo函數(shù)返回的是window對象,相當于執(zhí)行 window.getName() ,而window中的getName已經(jīng)被修改為alert(1),所以最終會輸出1

  此處考察了兩個知識點,一個是變量作用域問題,一個是this指向問題。

  第四問

  直接調(diào)用getName函數(shù),相當于 window.getName() ,因為這個變量已經(jīng)被Foo函數(shù)執(zhí)行時修改了,遂結(jié)果與第三問相同,為1

  第五問

  第五問 new Foo.getName(); ,此處考察的是js的運算符優(yōu)先級問題。

  js運算符優(yōu)先級:

  image_thumb

  參考鏈接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

  通過查上表可以得知點(.)的優(yōu)先級高于new操作,遂相當于是:

  new (Foo.getName)();

  所以實際上將getName函數(shù)作為了構(gòu)造函數(shù)來執(zhí)行,遂彈出2。

  第六問

  第六問 new Foo().getName() ,首先看運算符優(yōu)先級括號高于new,實際執(zhí)行為

  (new Foo()).getName()

  遂先執(zhí)行Foo函數(shù),而Foo此時作為構(gòu)造函數(shù)卻有返回值,所以這里需要說明下js中的構(gòu)造函數(shù)返回值問題。

  構(gòu)造函數(shù)的返回值

  在傳統(tǒng)語言中,構(gòu)造函數(shù)不應(yīng)該有返回值,實際執(zhí)行的返回值就是此構(gòu)造函數(shù)的實例化對象。

  而在js中構(gòu)造函數(shù)可以有返回值也可以沒有。

  1、沒有返回值則按照其他語言一樣返回實例化對象。

  image_thumb1

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

  image_thumb2

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

  image_thumb3

  原題中,返回的是this,而this在構(gòu)造函數(shù)中本來就代表當前實例化對象,遂最終Foo函數(shù)返回實例化對象。

  之后調(diào)用實例化對象的getName函數(shù),因為在Foo構(gòu)造函數(shù)中沒有為實例化對象添加任何屬性,遂到當前對象的原型對象(prototype)中尋找getName,找到了。

  遂最終輸出3。

  第七問

  第七問, new new Foo().getName(); 同樣是運算符優(yōu)先級問題。

  最終實際執(zhí)行為:

  new ((new Foo()).getName)();

  先初始化Foo的實例化對象,然后將其原型上的getName函數(shù)作為構(gòu)造函數(shù)再次new。

  遂最終結(jié)果為3

  最后

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

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

【前端程序員JavaScript面試題】相關(guān)文章:

web前端面試題08-08

前端面試題庫及答案09-25

Web前端面試題目及答案09-26

程序員面試題09-25

阿里前端大神寒冬談?wù)劽嬖嚺c面試題07-25

騰訊公司程序員面試題及答案詳解07-30

JavaScript 基礎(chǔ)階段測筆試試題(含答案)09-25

優(yōu)秀的前端簡歷模板07-31

前端開發(fā)實習(xí)報告08-01