资讯专栏INFORMATION COLUMN

一道面试题引发的惨案

avwu / 3300人阅读

摘要:我们把需要的函数拿出来,看起来会爽的多看到这里是不是就很清晰了简单的构造函数加原型的继承结合上面两问该问题可以这样写回到了用构造函数调用的模式

先把面试题贴出来:
//请回答下面函数依次执行出什么;
function Foo () {
    bar = function () {
        console.log(1)
    }
    return this;
}
Foo.bar = function () {
    console.log(2)
}
Foo.prototype.bar = function () {
    console.log(3)
}
var bar = function () {
    console.log(4)
}
function bar () {
    console.log(5)
}
Foo.bar();//2
bar();//4
Foo().bar();//1
bar();//1
new Foo.bar();//3
new Foo().bar();//3
new new Foo().bar();//3
刚看到这个问题,着实有点晕;不过细细分析下来,还是有点门道的。 首先我们来看一下这道题考察的是什么

js的三种调用模式

构造函数 原型

这里涉及到js的三种调用模式;1.方法调用 2.函数调用 3.构造函数调用 接下来,我们一一分析问题;
1. Foo.bar();//2

由于浏览器在执行js时是同步去执行的,这里可以将Foo.bar看做 a ;这时就相当于:

a = function () {
    console.log(2)
}//由于不是严格模式,这里省略了声明函数的关键字 var;
a();//2
2. bar();// 4

这个执行相应的函数体:

var bar = function () {
    console.log(4)
}
3. Foo().bar();// 1

Foo() 会去执行function Foo(){};同时会返回出一个全局的this;
Foo().bar() 执行函数Foo体内的bar函数

4. bar();// 1

第一个问题bar()执行的是函数:

var bar = function () {
    console.log(4);
}//打印出来的是4

而在执行Foo().bar()时,Foo()会返回出来全局this,this内部的bar函数为:

bar = function () {
    console.log(1)
}

此时会覆盖其余的bar函数

5. new Foo.bar();// 2

构造函数调用模式;

Foo.bar = function () {
    console.log(2)
}
var foo =new Foo.bar();  //把Foo.bar看做为整体如newFoo(){},newFoo就变成了构造函数
var foo = new newFoo();// foo => 2
6. new Foo().bar();// 3
使用new关键字,便会创建一个对象, 根据prototype属性创建原型链,并以该对象为this执行指定的(构造)函数。

我们把需要的函数拿出来,看起来会爽的多;

function Foo () {
    bar = function () {
        console.log(1)
    }
    return this;
}
Foo.prototype.bar = function () {
    console.log(3)
}
var foo = new Foo();
foo.bar() //3

看到这里是不是就很清晰了;简单的构造函数加原型的继承;

7. new new Foo().bar();// 3

结合上面两问;该问题可以这样写;

new new Foo().bar() => new foo.bar() =>new newFoo()//回到了用构造函数调用的模式;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82007.html

相关文章

  • 一道JS面试引发血案

    摘要:项目组长给我看了一道面试别人的面试题。打铁趁热,再来一道题来加深下理解。作者以乐之名本文原创,有不当的地方欢迎指出。 showImg(https://segmentfault.com/img/bVbur0z?w=600&h=400); 刚入职新公司,属于公司萌新一枚,一天下午对着屏幕看代码架构时。BI项目组长给我看了一道面试别人的JS面试题。 虽然答对了,但把理由说错了,照样不及格。 ...

    fantix 评论0 收藏0
  • 一道面试引发思考 --- Event Loop

    摘要:想必面试题刷的多的同学对下面这道题目不陌生,能够立即回答出输出个,可是你真的懂为什么吗为什么是输出为什么是输出个这两个问题在我脑边萦绕。同步任务都好理解,一个执行完执行下一个。本文只是我对这道面试题的一点思考,有误的地方望批评指正。 想必面试题刷的多的同学对下面这道题目不陌生,能够立即回答出输出10个10,可是你真的懂为什么吗?为什么是输出10?为什么是输出10个10?这两个问题在我脑...

    betacat 评论0 收藏0
  • 一道前端面试引发思考

    摘要:直接开始题目是厉害了说句实话开发中谁写成这样保证会被打死。不过面试就是面试,有面试官的考量点。官方是这么说的。结果完美,不过小姐姐的意思是数组的方法会自动触发数组的。 直接开始题目是 if(a==1 && a==2 && a==3){ alert(厉害了) } 说句实话开发中谁写成这样保证会被打死。 不过面试就是面试,有面试官的考量点。 我理解的点有两个 1、隐式类型转换 先说...

    gaomysion 评论0 收藏0
  • 一道简单面试引发思考

    摘要:另一个问题,就是我下面要提及的作用域问题,我当时思考的时间太久了这是回忆中的面试题实际略有差异,不纠结了说一下脚本的运行结果引用错误中给出的错误提示。 版权声明:此文首发于我的简书账号人生还有多少个二十年,转载请注明出处。 此处有几百字唠叨:   当天,我早早起床,跨越上百公里,高德导航,路人指点,跌跌撞撞到达招聘会现场,当时已是中午十二点半,吃了午餐(半瓶白开水),开始准备投递...

    wpw 评论0 收藏0
  • 一道面试引发思考 --- 理解 new 运算符

    摘要:首先,我先去上搜索了的定义运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 今天看到一道面试题,如下,问: 实例化 Person 过程中,Person返回什么(或者 p 等于什么)? function Person(name) { this.name = name return name; } let p = new Person(Tom); 说实...

    shengguo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<