一次性理清JavaScript变量等高难度面试问题

Charlie_Jade 发布于2019-08-23 15:27 / 2392人阅读

摘要：再次声明的函数会替代原有的函数第二点第一个函数中的指向。解决这些问题的关键是不要想当然，动手一步一步模拟执行顺序，模拟变量提升情况第二种面向对象问题或高阶函数等待更新

主要是解决JavaScript中比较难懂的部分，当然了，这部分经常在面试题中露面，这篇文章主要是讲解解题思路，对新手会有很大帮助（如果你仔细看的话）。书籍方面，我看的是《你不知道的javascript》,精髓就在里面喽。文章会持续更新（ 如果能看到比较刁钻的题目的话， 也欢迎大家将自己遇到的异常难于理解的JavaScript题目分享出来喔 ）

第0种解析顺序

    function a() {
        b = function () {
            console.log(1)
        }

        return this;
    }

    var b = function () {
        console.log(2)
    }

    function b() {
        console.log(3)
    }

    b();

    a().b();

    b();

1.首先，你要明白的是3永远不可能打印出来。这涉及到函数的声明方式和执行顺序问题。
直接用function的方式声明的函数，函数可以在function声明之前被调用，这说明在代码运行之前就已经调用了。
再次声明的函数var b会替代原有的函数b

2.第二点：第一个函数中的this指向。一个点：函数中的this是在运行时候决定的，而不是函数定义时，具体就看谁调用了this.在第一个函数中，没有调用对象，在浏览器中，this就指向window

3.第三点：还是第一个函数中，不使用var标识符直接定义的变量都属于全局变量,也就是说第一个函数中的b是挂载到window上的。

第1种变量提升

(function(){
    a = 5;
    alert(window.a);
    var a = 10;
    alert(a);
})();

喜闻乐见！看见一堆的变量a就知道了，这是变量提升的问题了，只需要自己模拟出执行顺序就行了.

等同于：

var  a; // 第一步：变量提升
a = 5; // 后面的就直接拿上来
alert(window.a);
a = 10;
alert(a);

同类型题目：

var a=1;
function test(){
    console.log(a);
    var a=1;
}
test();

看见var就把它提升到最前面就行了，一样画瓢解决：

var a;
a = 1;

function test() {
  var a;
  console.log(a);
  a = 1;
}

还有同类型的题目一样可以依葫芦画瓢解决:

 var foo = "hello";
    (function (foo) {
        console.log(foo);
        var foo = foo || "world";
        console.log(foo);
    })(foo);
    console.log(foo);

等。

解决这些问题的关键是：不要想当然，动手一步一步模拟执行顺序，模拟变量提升情况

第二种面向对象问题或高阶函数（等待更新）

海外云主机服务器托管面试问题 javaee面试问题 cdn常见面试问题 java面试必问题

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

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

前端_JavaScript

摘要：为此决定自研一个富文本编辑器。例如当要转化的对象有环存在时子节点属性赋值了父节点的引用，为了关于函数式编程的思考作者李英杰，美团金融前端团队成员。只有正确使用作用域，才能使用优秀的设计模式，帮助你规避副作用。 JavaScript 专题之惰性函数 JavaScript 专题系列第十五篇，讲解惰性函数需求我们现在需要写一个 foo 函数，这个函数返回首次调用时的 Date 对象，注意...

Benedict Evans 2019-08-26 11:39 评论0 收藏0
CSS相关面试题——三栏等高布局

摘要：题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度，中间栏宽度自适应。代码如下效果如下所示乍一看实现了三列布局，但是题目要求等高，这个可就麻烦了。题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度200px，中间栏宽度自适应。要求三栏的高度随最高的一栏展示解题 step1 常规拿到这个面试题，首先想到的是三个盒子左浮动右浮动...

Taste 2019-08-02 16:08 评论0 收藏0
CSS相关面试题——三栏等高布局

摘要：题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度，中间栏宽度自适应。代码如下效果如下所示乍一看实现了三列布局，但是题目要求等高，这个可就麻烦了。题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度200px，中间栏宽度自适应。要求三栏的高度随最高的一栏展示解题 step1 常规拿到这个面试题，首先想到的是三个盒子左浮动右浮动...

fsmStudy 2019-08-30 15:56 评论0 收藏0
CSS布局——左定宽度右自适应宽度并且等高布局

摘要：今天有位朋友一早从妙味课堂转来一个有关于布局的面试题，需要解决，花了点时间写了几个放上来与大家分享受。今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题，需要解决，花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧：左侧固定宽，右侧自适应屏幕宽；左右两列，等高布局；左右两列要求有最小高度，例如：200px;（当内容超出...

dreamtecher 2019-08-29 12:43 评论0 收藏0
面试宝典

摘要：有谈谈面试与面试题对于前端面试的一些看法。动态规划算法的思想及实现方法帮大家理清动态规划的解决思路以及原理方法前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。极客学院前端练习题道练习题，面试季练练手。由数据绑定和排序引入的几个 JavaScript 知识点在 JavaScript 的数据绑定和做简单的表格排序中遇到的几个知识点 [[JS 基础...

neu 2019-08-29 14:00 评论0 收藏0