js的一道经典题

wemallshop 发布于2019-08-19 17:38 / 914人阅读

摘要：它的特性是先进后出。执行第一行代码该行代码执行后会变成这样。对于来说，点运算级最高，所以先进行计算表达式的值。如果先运算的话，就证明了优先级高于点号，与规范不和。最后一个问题同理倒数第二个。谢谢李卫的提醒。

题

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

答

    2 ----Foo.getName();
    4 ----getName();
    1 ----Foo().getName();
    1 ----getName();
    2 ----new Foo.getName();
    3 ----new Foo().getName();
    3 ----new new Foo().getName();

概念

为了阅读效益最大化，请先了解执行环境和变量对象的文字性概念。

执行环境挺常见的，它是长这样的。它的特性是先进后出(stack)。

上述图片是来源于代码执行到Foo( ).getName( )。

(anonymous function) 其实就是global context

表示方法：

    ECStack = [
        functionContext(Foo),    /*这不是函数*/
        GlobalContext    
    ]

变量对象也挺常见，在Chrome中长这样。

表示方法通常是：

//以上述代码尚未执行时为例
    VO = {    
        Foo: {
            ,
            return this
        }
        getName: 
    }

分析

代码执行有两个阶段

进入环境（代码未执行，已编译）

代码执行

现在一起来看看每一行代码的执行

上述代码未执行时，变量对象是这样的。

    VO = {
        Foo: {
            ,
            return this
        }
        getName: 
    }

执行"第一行"代码

该行代码执行后VO会变成这样。

    VO = {
        Foo: { 
            ,
            getName: 
    }

VO的Foo图示是这样的

执行"第二行"代码

该行代码执行后VO会变成这样。

    VO = {
        Foo: { 
            ,
            getName: 
    }

VO的Foo图示是这样

执行"第三行"代码

该行代码执行后VO会变成这样。

    VO = {
        Foo: { 
            ,
            getName: 
    }

执行"第四行"代码（第一问）

直接去VO里寻找结果发现alert 2。

执行"第五行"代码（第二问）

getName() //等于
window.getName();

同样直接在VO里可以直接找到答案 alert 4。

执行"第六行"代码（第三问）

这里比上述多了一个函数调用，Foo()调用返回this(指向window)，所以此时

Foo().getName()； ／／等于
window.getName()

同时注意：
由于Foo()调用，导致VO发生了变化。最后alert 1.

    VO = {
        Foo: { 
            ,
            getName: 
    }

执行"第七行"代码（第四问）

结果同上

执行"最后三行"代码（第五、六、七问）

最后三问考察了new、属性访问符、及函数调用优先顺序和new运算符的作用。

优先顺序参考如下,或点这

无论是用哪种属性访问表达式，在"."和"[]"之前的表达式总是会先计算的。

对于new Foo.getName()来说，点运算级最高，所以先进行计算表达式Foo的值。如果先运算new的话，就证明了new优先级高于点号，与规范不和。

而对于new Foo().getName()来说，Foo()与new Foo()相比，new优先级更高，所以先算new Foo()，new出来的新对象继承了Foo.prototype属性，因此新对象访问getName时会弹出3.

此处要明白new的作用

创建新的空对象

将新对象继承构造函数的prototype属性，并调用构造函数初始化

将构造函数的this指针指向新建对象。

最后一个问题同理倒数第二个。

谢谢ID:李卫的提醒。

原题和分析链接

云服务器 GPU云服务器 s循环经典逻辑题 js的基础面试题第一道 js逻辑题

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

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

前端计划——一道经典的JavaScript问题（含闭包、事件轮询、作用域等概念解释）

摘要：作用域和作用域链关于作用域这里不做过多解释，中根据作用域可分为全局变量和局部变量。好吧，不是这部分核心，核心是解释的单线程和事件轮询机制。这部分就涉及到闭包的理解了。前言：这是一道很经典的Js面试题，涉及到闭包、变量作用域、setTimeout等知识，对于深入理解这些内容很有帮助题目描述 //问题描述：请写出最终的输出值，并解释原因 var value1 = 0, value2 ...

EdwardUp 2019-08-21 11:29 评论0 收藏0
由一道题图解JavaScript的作用域

摘要：当我将此题的作用域链画出来之后，终于感觉作用域入门了。创建函数的作用域链，并初始化为函数的所包含的对象，即包含了的作用域链。作用域为了理解作用域，跪看了好几篇大神的博文，终于略知一二。 1.题目其中，看到这样一道题（稍作修改）： function factory() { var name = laruence; var intro = function(){...

nevermind 2019-08-19 17:56 评论0 收藏0
一道js闭包面试题的学习

摘要：然后最外层这个函数会返回一个新对象，对象里面有一个属性，名为，而这个属性的值是一个匿名函数，它会返回。最近看到一条有意思的闭包面试题，但是看到原文的解析，我自己觉得有点迷糊，所以自己重新做一下这条题目。闭包面试题原题 function fun(n, o) { // ① console.log(o); return { // ② fun: function(m) ...

plus2047 2019-08-26 12:15 评论0 收藏0
由浅入深的前端面试题和矫情的“浪漫主义”诗句

摘要：好吧，我承认太标题党了，这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。这一星期陆陆续续面试了不少于个人，其中不乏工作履历突出的候选者。这样做的问题在于循环并没有要求枚举对象的修改与当前循环保持一致。好吧，我承认太标题党了，这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。传统的佛学经典里，被世人熟知的有这样一句话：一花一世...

JerryZou 2019-08-21 11:33 评论0 收藏0
由浅入深的前端面试题和矫情的“浪漫主义”诗句

摘要：好吧，我承认太标题党了，这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。这一星期陆陆续续面试了不少于个人，其中不乏工作履历突出的候选者。这样做的问题在于循环并没有要求枚举对象的修改与当前循环保持一致。好吧，我承认太标题党了，这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。传统的佛学经典里，被世人熟知的有这样一句话：一花一世...

lk20150415 2019-08-01 16:27 评论0 收藏0