当前位置: 首页 > 文档资料 > 前端入门进阶 >

16.5 前端的几道题目

优质
小牛编辑
130浏览
2023-12-01

几道面试题

页面布局

如何实现一个三栏布局,要求两边固定宽度、中间自适应。

此题可以考察的知识点:

  • 圣杯布局

  • 双飞翼布局

  • flex布局(css3)

让元素垂直居中

方式一:如果宽高已知,可以利用绝对定位。

方式二:用 translate 位移来做。(在宽高未知的情况下,也可以这样做)

    div {
        background-color: red;
        position: absolute;       绝对定位的盒子
        top: 50%;               首先,让上边线居中
        transform: translateY(-50%);    然后,利用translate,往上走自己宽度的一半【推荐写法】
    }

方式三:flex 布局

    parentElement{
        display: flex;/*Flex布局*/
        display: -webkit-flex; /* Safari */
        align-items: center;/*设置子元素在侧轴方向上的布局*/
    }

参考链接:

  • https://www.zhihu.com/question/20543196

  • 水平垂直居中方案与flexbox布局

变量提升

问题:说一下你对JavaScript变量提升的理解。

定义

在函数体内部,声明变量,会把该变量提升到函数体的最顶端。注意:只提升变量声明,不赋值

代码1

    fn();

    function fn() {
        var x = 1;
        var y = 2;
    }

上方代码中:

(1)给fn创建函数上下文,找到fn中所有用var声明的变量(即x和y);

(2)将这些变量初始化为undefined;

(3)将x赋值为1,将y赋值为2。

代码2

    fn2();

    function fn2() {
        console.log(2);

    }

上方代码中:

(1)创建全局上下文,找到所有用function声明的变量,在环境中“创建”这些变量。

(2)将这些变量初始化,并赋值function(){ console.log(2) }(并不是undefined)

(3)开始执行代码fn2();

代码3:(let的出现)

{
  let x = 1
  x = 2
}

上方代码中:

(1)找到所有用 let 声明的变量,在环境中「创建」这些变量

(2)开始执行代码(注意现在还没有初始化)

(3)执行 x = 1,将 x 「初始化」为 1(这并不是一次赋值,如果代码是 let x,就将 x 初始化为 undefined)

(4)执行 x = 2,对 x 进行「赋值」

代码4:

let x = 'global'
{
  console.log(x) // Uncaught ReferenceError: x is not defined
  let x = 1
}

原因有两个:

  • console.log(x) 中的 x 指的是下面的 x,而不是全局的 x

  • 执行 log 时 x 还没「初始化」,所以不能使用(也就是所谓的暂时死区)

看到这里,你应该明白了 let 到底有没有提升:

  • let 的「创建」过程被提升了,但是初始化没有提升。

  • var 的「创建」和「初始化」都被提升了。

  • function 的「创建」「初始化」和「赋值」都被提升了。

参考链接:

  • 我用了两个月的时间才理解 let

this

问题:下方代码的打印结果是什么?

    function A() {
        this.name = 'smyhvae';
    }

    A.prototype.test = function () {
        setTimeout(function () {
            console.log(this.name);
        }, 1)
    }

    var a = new A();
    a.test();

打印结果是window.name,但实际的结果是空的。

这个神奇的特性,被用来解决跨域数据传递。(网上可以查一下iframe相关)

总结1:this永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。即:谁调用,指向谁。

举例

    var name = '全局';

    function getName() {
        var name = '局部';
        return this.name;
    };

    alert(getName());

上方代码的打印结果是:全局

分析:getName()这个函数其实是window调用的,所以this指向的window,因为外部有name这个变量,所以打印结果为全局

总结2:没有明确的当前对象时,this永远指向window。这个在setTimeout里比较常见。

apply、call、bind的区别

链式调用

问题:如何实现类似jQuery的链式调用?

答案:一直return this就好了。

Yslow和pageSpeed

Yslow和pageSpeed你知道怎么用吗?你记得其中多少规则?

DNS的查询时间

问题:前端怎样拿到DNS的查询时间?

H5中的方法:performance.timing

window.performance这个api可以用来做前端性能监控。其中,timing这个方法。。

参考链接:

  • https://github.com/fredshare/blog/issues/5