前端面试准备

本文主要探讨了前端面试中常见的几个关键知识点,包括如何使用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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X-Adobe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值