有意思的一道js题目(原型相关)

题目如下:

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();
首先分析一下题目

getName分别以变量,和函数变量的形式声明,涉及到变量声明提升。因此实际执行是

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

第一问

Foo.getName(); 自然是访问Foo函数上存储的静态属性//2

第二问

getName();也可由以上分析易得4;

第三问

Foo().getName();先执行Foo()函数,然后调用Foo函数的返回值对象的getName属性函数。
执行Foo()函数返回this,这里是window,也就等于window.getName();然后Foo()执行过程中getName没有var声明,是全局变量,因此也就修改了先前的getName函数,此时代码可认为是

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(1);}//覆盖上文getName定义

所以输出1;

第四问

getName();和上一问一样,直接输出1;

第五问

new Foo.getName();后面几问考察到js运算符优先级。
详细优先级汇总表点击这里

部分优先级

上图优先级从高到低排列;.优先级高于new,这里的new我认为是无参的,因此优先级最低。
所以是new ((Foo.getName)())
也就是把Foo.getName()函数作为了构造函数来执行。

第六问

new Foo().getName()

//?此时的点不是成员访问运算了么,作者说等于(new Foo()).getName()

先执行new Foo()

构造函数的返回值

分三种情况:

  • 没有返回值,返回实例化对象。
    function Foo(){};
    >undefined;
    new Foo()
    >Foo {}
  • 若有返回值检查其返回值是否为引用类型。如果是非引用类型,如基本类型(string、number、boolean、null、undefind)则与无返回值相同,返回实例化对象。
    function Fn(){return true}
    >undefined
    new Fn()
    >Fn {}
  • 若返回值是引用类型,则实际返回值为这个引用类型。
    function fn(){return {a:1}}
    >undefined
    new fn()
    >Object {a: 1}

this不能当做引用类型

回到题目,new Foo().getName() ,原题中返回this,代表当前实例化对象,然后调用实例化对象的getName(),//3

第七问

new new Foo().getName();

最终等于new ((new Foo()).getName)();

//这里的顺序也是一个问题

先初始化Foo的实例化对象,将其原型上的getName作为构造函数再次new,还是3.

总结

对于后面几个问题来说,与其用优先级的知识来解释,还不如用(new 构造函数)更加通俗易懂。譬如 new Foo(),返回Foo函数的一个实例Foo{},然后总不能再new一个实例吧,所以只能等后边再结合成一个函数,就像第五问 new Foo.getName() ,Foo只是个函数名,而Foo.getName()是个函数。第六问new Foo().getName(),Foo()是一个函数,就直接new 了,然后返回Foo的实例Foo{},再找继承的getName();第七问new new Foo().getName(),(new Foo())返回实例,所以再和后面的结合成一个函数,然后再new。不知道这样理解有多少问题,还请各位赐教~

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

推荐阅读更多精彩内容