前端面试准备

最新推荐文章于 2025-07-29 01:46:31 发布

原创最新推荐文章于 2025-07-29 01:46:31 发布 · 670 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css3

面试笔记专栏收录该内容

2 篇文章

订阅专栏

本文主要探讨了前端面试中常见的几个关键知识点，包括如何使用flex布局实现div的居中，理解flex-grow属性的工作原理，constructor构造器的指向，原型链的查找规则，以及如何判断属性是否为实例的基本属性。此外，还涵盖了变量访问、节流防抖、闭包和let与var的区别，这些都是前端开发者必备的技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端面试准备一

将一个div在页面上下左右居中（flex）布局

<style>
        body,html{
            height: 100%;
            width: 100%;
        }
        body{
            display: flex; // 第一步
        }
        .coon{
            width: 500px;
            height: 500px;
            background-color: brown;
            margin: auto; //第二步
        }
    </style>
</head>
<body>
    <div class="coon"></div>
</body>
</html>

flex-grow属性值关系

在这里插入图片描述

<div class="coon">
        <div class="div1" style="flex-grow: 1;">111</div>
        <div class="div2" style="flex-grow: 2;">222</div>
        <div class="div3" style="flex-grow: 1;">333</div>
</div>

.coon{
            width: 100%;
            height: 200px;
            display: flex;
}
.div1{
            width: 200px;
            height: 100%;
            margin: auto;
            background-color: burlywood;
}
.div2{
            width: 200px;
            height: 100%;
            margin: auto;
            background-color: yellow;
}
.div3{
            width: 200px;
            height: 100%;
            margin: auto;
            background-color: red;
        }
.coon > div{
	 text-align: center;
}

在如上图所示的布局下，div1和div3的宽度是否为div2的一半？

答案是否定的，在flex布局下，设置flex-grow的值后，div的实际宽度 = 浏览器整体宽度 - 设定的width = 200px后，再按照flex-grow的属性值来分配div宽度。

constructor构造器的指向

<script>
        // 构造函数：是否用它创建实例
        function Person(){

        }
        Person.prototype.name = '小明';
        Person.prototype.age = 18;
        Person.prototype.getAge = function () {
            console.log(this.age);
        }
        let person1 = new Person();
        console.log(person1);
        console.log(person1.constructor); // constructor构造器:指向哪里
    </script>

在本题中，person1.constructor打印结果是function Person(){}构造函数，constructor构造器指向实例的构造函数
在这里插入图片描述

原型链查找规则

在查找某个属性时，若当前对象不存在该属性，则会沿着该对象的原型Prototype里面一层一层往上查找，直到找到该属性为止，若最终没有该属性，则返回undefined；

<script>
        // 构造函数：是否用它创建实例
        function Person(){

        }
        // Person.prototype.name = '小明';
        Person.prototype.age = 18;
        Person.prototype.getAge = function () {
            console.log(this.age);
        }

        let person1 = new Person();
        console.log(person1);
        console.log(person1.constructor); // constructor构造器:指向哪里
        // person1.name = '字节';
        console.log(person1.name); // 字节

        // 原型链查找规则 由近及远

    </script>

在这里插入图片描述

通过原型链查找某属性是否为该实例基本属性

利用hasOwnProperty函数，遍历实例的每一个属性，通过原型链查找规则查找实例中的每一个属性，若查找不到该属性，则该属性为基本属性；

<script>
        // 构造函数：是否用它创建实例
        function Person(){

        }
        // Person.prototype.name = '小明';
        Person.prototype.age = 18;
        Person.prototype.getAge = function () {
            console.log(this.age);
        }

        let person1 = new Person();
        console.log(person1);
        console.log(person1.constructor); // constructor构造器:指向哪里
        // person1.name = '字节';
        console.log(person1.name); // 字节

        // 原型链查找规则 由近及远
        
        person1.a = '基本属性';
        let item;
        for(item in person1){
            if(person1.hasOwnProperty(item)){
                console.log(item);
            }
        }
    </script>

在这里插入图片描述

变量访问问题

<script>
        // 全局变量
        let a = '1111';
        function fun1 () {
            let b = 2;
            // a为全局变量，所以函数内部能访问
            console.log(a);
        }
        fun1();
        // console.log(b); b为函数内部局部变量，在函数执行完成之后JS垃圾回收机制会将其回收，故在此处无法访问到b，浏览器会报错；

        
    </script>

节流与防抖

<body>
    <h2>闭包</h2>
    <input type="text">
    <script>
        // 节流：多次变为一次   防抖：规定时间内只允许一次请求发出

        // 防抖
        function antiShake(fn,wait){
            let timeOut = null;
            return args => {
                if(timeOut) clearTimeout(timeOut);
                timeOut = setTimeout(fn,wait);
            }
        }
        function demo2 () {
            console.log('请求数据');
        }
        let input = document.querySelector("input");
        input.addEventListener('input',antiShake(demo2,1000))
    </script>
</body>

闭包

<script>
        // 闭包  模块化 私有变量与方法
        let makeCounter = function () {
            let pravite = 0;
            function changePravite(val) {
                pravite += val;
            }
            return {
                add: function () {
                    changePravite(1);
                },
                reduce: function () {
                    changePravite(-1);
                },
                value: function () {
                   return pravite;
                },
            }
        }

        let counter1 = makeCounter();
        let counter2 = makeCounter();

        counter1.add()
        counter1.add()
        counter2.add()
        counter2.reduce()
        console.log(counter1.value()); // 2
        console.log(counter2.value()); // 0
    </script>

利用闭包创建的实例互不影响，各个实例执行自己词法作用域内的方法与变量；
闭包提供了面向对象编程的好处，有利于数据的隐藏与封装；

let 与 var

<script>
        //变量提升 
        console.log(name); // 小明
        var name = '小明';

        // 变量覆盖
        var a = '小红';
        var a = '小绿';
        console.log(a); // 小绿

        // var 没有块级作用域
        function fun1(){
            for(var i = 0;i<5;i++){

            }
            console.log(i);
        }
        fun2();
    </script>