尝试解析js面试题(一)

说明:这是一道比较典型的综合考察js中作用域this指向对象解析顺序运算符优先级等概念的综合性考题;话不多说,先上题;

原作者解析:小小沧海(博客园)

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

解析:

1、Foo.getName(); //2

1)结果执行的是Foo对象的一个叫做getName()的属性,而1、4、5中的getName都是作为函数存在,所以可以排除1、4、5

2)剩下两个中,2是Foo对象自身的属性,3是Foo对象原型链上的属性,而自身属性的优先级高于原型链上的属性,所以执行结果是2

2、getName(); //4

1)结果执行的是getName函数,而题目代码中有3个相关函数,分别是1、4、5

2)1中的getName是定义在Foo函数中的函数,由于Foo尚未执行,因此它没有暴露出来,无法被外部调用,可以排除

3)4和5都可以被正常调用,关键在调用先后问题

4)由于5是普通函数(优先级最高),4是匿名函数;js解析时会将5提前至最上方优先解析,而后面解析的4会将5覆盖,所以执行结果是4

3、Foo().getName(); //1

1)结果执行的是Foo函数,Foo函数中有个返回值是this;this被普通函数调用后,指向的对象一定是window对象,所以此处的结果已经可以解析为window.getName(),即调用getName()函数

2)由于window.getName()已经被修改为1,所以执行结果是1(??)

上面那句话是原作者的解释,此处还没理解透彻为什么1没有被2覆盖;下面举个例子对比下:

//第一个例子是题目的类型,不明为何上边fn1的结果未被覆盖??
function fn1 (){
    a = 1;
    return this
}
fn1()
var a = 2
console.log(fn1().a) //1

//第二个例子是我理解的会正常出现覆盖的情况
function fn1 (){
    a = 1;
}
fn1()
var a = 2
console.log(a) //2

4、getName(); //1

1)执行getName即是执行window.getName;所以执行结果同上题是1

5、new Foo.getName(); //2

1)此处考察到了运算符优先级的问题,就题目所需来看,成员访问".">new(带参数)>函数调用"()"(注意,"()"分为函数调用及优先运算两种,优先级是不同的;原作者开始的解释就出现了错误)

2)结果先执行Foo.getName(),结果同第一题为2;而new 2不会有任何变化,因此这里的结果也是2

6、new Foo().getName(); //3

1)从结果来看,应该理解成(new Foo()).getName()这样执行

2)根据成员访问".">new(带参数)>函数调用"()";成员访问优先执行,右侧是.getName()没问题

3)左侧分为两种可能:一种是new(带参数),即(new Foo());此处结果是构建一个函数

4)另一种是先执行Foo()函数后再将其结果new

5)因为new(带参数)>函数调用"()",所以是执行的(new Foo()),此对象Foo()自身没有getName这个属性,所以会向上追溯其原型链上的属性,即在此处执行了3;因此结果是3

//这里就是模拟new Foo()的结果
function F(){return this}
new F() //F {}

关于这点,原作者有解释如下(还是可以理解的):

构造函数的返回值

在传统语言中,构造函数不应该有返回值,实际执行的返回值就是此构造函数的实例化对象。

而在js中构造函数可以有返回值也可以没有。

1、没有返回值则按照其他语言一样返回实例化对象。

2、若有返回值则检查其返回值是否为引用类型。如果是非引用类型,如基本类型(string,number,boolean,null,undefined)则与无返回值相同,实际返回其实例化对象。

3、若返回值是引用类型,则实际返回值为这个引用类型。

原题中,返回的是this,而this在构造函数中本来就代表当前实例化对象,遂最终Foo函数返回实例化对象。

7、new new Foo().getName(); //3

1)这题我其实是懵逼的(懵逼脸😳)

2)求高手指教了 _ (:з」∠)_

还是贴下原作者解释,感觉有点不对

第七问, new new Foo().getName(); 同样是运算符优先级问题。

最终实际执行为:

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

先初始化Foo的实例化对象,然后将其原型上的getName函数作为构造函数再次new。

遂最终结果为3


最后,引用一张原作者提供的相当实用的运算符优先级表格(鼓掌)

运算符优先级--博客园
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容