摘要:此處有兩個坑,一是變量聲明提升,二是函數表達式。同理,原題中代碼最終執行時的是只提升變量聲明提升函數聲明,覆蓋的聲明最終的賦值再次覆蓋聲明最終輸出第三問第三問的先執行了函數,然后調用函數的返回值對象的屬性函數。
此部分以一道題目來做解釋
題目如下:
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();
答案是:
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 getName();//1 new Foo.getName();//2 new Foo().getName();//3 new new Foo().getName();//3
此題涉及的知識點眾多,包括變量聲明提升、this指針指向、運算符優先級、原型、繼承、全局變量污染、對象屬性及原型屬性優先級等等。
此題包含7小問,分別說下。
第一問先看此題的上半部分做了什么,首先定義了一個叫Foo的函數,之后為Foo創建了一個叫getName的 靜態屬性 存儲了一個匿名函數,之后為Foo的 原型對象 新創建了一個叫getName的匿名函數。之后又通過 函數變量表達式 創建了一個getName的函數,最后再 聲明 一個叫getName函數。
第一問的?Foo.getName?自然是訪問Foo函數上存儲的靜態屬性,自然是2,沒什么可說的。
第二問第二問,直接調用?getName?函數。既然是直接調用那么就是訪問當前上文作用域內的叫getName的函數,所以跟1 2 3都沒什么關系。此處有兩個坑,一是變量聲明提升,二是函數表達式。
變量聲明提升即所有聲明變量或聲明函數都會被提升到當前函數的頂部。
例如下代碼:
console.log(‘x’ in window);//true var x;
x = 0;
代碼執行時js引擎會將聲明語句提升至代碼最上方,變為:
var x; console.log(‘x’ in window);//true x = 0;函數表達式
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 () { console.log(1); }; return this; } var getName;//只提升變量聲明 function getName() { console.log(5);}//提升函數聲明,覆蓋var的聲明 Foo.getName = function () { console.log(2);}; Foo.prototype.getName = function () { console.log(3);}; getName = function () { console.log(4);};//最終的賦值再次覆蓋function getName聲明 getName();//最終輸出4第三問
第三問的?Foo().getName();?先執行了Foo函數,然后調用Foo函數的返回值對象的getName屬性函數。
Foo函數的第一句? getName = function () { console.log(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的運算符優先級問題。
js運算符優先級:
參考鏈接: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
通過查上表可以得知點.的優先級高于new操作,遂相當于是:
new (Foo.getName)();
所以實際上將getName函數作為了構造函數來執行,遂彈出2。
第六問第六問?new Foo().getName()?,首先看運算符優先級()高于new,實際執行為
(new Foo()).getName()
遂先執行Foo函數,而Foo此時作為構造函數卻有返回值,所以這里需要說明下js中的構造函數返回值問題。
構造函數的返回值在傳統語言中,構造函數不應該有返回值,實際執行的返回值就是此構造函數的實例化對象。
而在js中構造函數可以有返回值也可以沒有。
1、沒有返回值則按照其他語言一樣返回實例化對象。
function F(){} new F() //>F {}
2、若有返回值則檢查其返回值是否為 引用類型 。如果是非引用類型,如基本類型(string,number,boolean,null,undefined)則與無返回值相同,實際返回其實例化對象。
function F(){return 1;} new F() //>F {}
3、若返回值是引用類型,則實際返回值為這個引用類型。
function F(){return {a:1};} new F() //>Object {a: 1}
原題中,返回的是this,而this在構造函數中本來就代表當前實例化對象,遂最終Foo函數返回實例化對象。
之后調用實例化對象的getName函數,因為在Foo構造函數中沒有為實例化對象添加任何屬性,遂到當前對象的原型對象(prototype)中尋找getName,找到了。
遂最終輸出3。
第七問第七問,?new new Foo().getName();?同樣是運算符優先級問題。
最終實際執行為:
new ((new Foo()).getName)();
先初始化Foo的實例化對象,然后將其原型上的getName函數作為構造函數再次new。
遂最終結果為3
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80977.html
摘要:原文鏈接猛戳這里構造函數下面生成實例這時和會自動含有一個屬性,指向它們的構造函數。這個對象的所有屬性和方法,都會被構造函數的實例繼承。 JavaScript的嚴格模式和正常模式 use strict; 顧名思義也就是 JavaScript 會在所謂嚴格模式下執行,其一個主要的優勢在于能夠強制開發者避免使用未聲明的變量。對于老版本的瀏覽器或者執行引擎則會自動忽略該指令。 在正常模式中,...
摘要:第二問直接調用函數,相當于調用,那么與函數無關。第三問先執行了函數,然后調用函數的返回值對象的屬性函數。第四問再次調用函數時,此時函數已經被第三問執行時修改,所以結果為。 JavaScript函數調用的經典例題 很多初學JavaScript的人對函數的調用理解有些模糊的,話不多說,直接上題: function Foo() { getName = function...
摘要:若有返回值則檢查其返回值是否為引用類型。之后調用實例化對象的函數,因為在構造函數中沒有為實例化對象添加任何屬性,遂到當前對象的原型對象中尋找,找到了。最終實際執行為先初始化的實例化對象,然后將其原型上的函數作為構造函數再次。 此題是用來考核面試者的JavaScript的綜合能力,很可惜到目前為止的將近兩年中,幾乎沒有人能夠完全答對,并非多難只是因為大多面試者過于輕視他。 functio...
摘要:若有返回值則檢查其返回值是否為引用類型。之后調用實例化對象的函數,因為在構造函數中沒有為實例化對象添加任何屬性,遂到當前對象的原型對象中尋找,找到了。最終實際執行為先初始化的實例化對象,然后將其原型上的函數作為構造函數再次。 此題是用來考核面試者的JavaScript的綜合能力,很可惜到目前為止的將近兩年中,幾乎沒有人能夠完全答對,并非多難只是因為大多面試者過于輕視他。 functio...
閱讀 3318·2023-04-25 16:25
閱讀 3823·2021-11-15 18:01
閱讀 1600·2021-09-10 11:21
閱讀 3007·2021-08-02 16:53
閱讀 3081·2019-08-30 15:55
閱讀 2489·2019-08-29 16:24
閱讀 2098·2019-08-29 13:14
閱讀 1027·2019-08-29 13:00