拼多多面试2

来源：互联网发布：unity3d下载手机版编辑：程序博客网时间：2024/04/28 17:57

Q1:画一个内圆半径为5px，外圆半径为10px

方法一：利用border画外圆

<style type="text/css">    #circle {        width: 10px;height: 10px;border-radius: 50%;border: 5px solid black;    }</style><div id="circle"></div>

方法二：利用定位和transform

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        #bigCircle {            position: relative;            width: 200px;            height: 200px;            border: 1px solid black;            border-radius: 50%;        }        #smallCircle {            position: absolute;            width: 100px;            height: 100px;            border: 1px solid green;            border-radius: 50%;            left: 50%;top: 50%;            transform: translate(-50%,-50%);        }    </style></head><body>    <div id="bigCircle">        <div id="smallCircle"></div>    </div></body></html>

Q2:box-sizing

里面有两个值：border-box，以及content-box两种值。说一下区别
这就得说道CSS的盒子模型
W3C标准中，我们设置的width是指content的width，而IE中，我们设置的width是指border-left+padding-left+content+padding-right+border-right。
而如果给元素设置border-box:border-box;那么在设置width的时候就是相当于设置border-left+padding-left+content+padding-right+border-right的宽度。
如果给元素设置border-box:content-box;那么在设置width的时候就只是设置content的宽度。

Q3:谈一下闭包

首先说概念：闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量
再说它的作用：可以用来管理私有变量和私有方法，将对变量（状态）的变化封装在安全的环境中，使得这些变量不能被外部随意修改，同事又可以通过指定的函数接口来操作。
其次，它的三个特性：

函数嵌套函数
函数内部可以引用函数外部的参数和变量
参数和变量不会被垃圾回收机制回收
最后谈一谈它的缺点：
常驻内存，会增大内存使用量，使用不当很容易造成内存泄漏。

Q4:既然说到内存泄漏，再说说内存泄漏吧

什么是内存泄漏？
内存泄漏是指任何对象在您不拥有或需要之后仍然存在。
垃圾回收期进行回收对象，垃圾回收器会定期扫描队形，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0（没有其他对象引用过该对象），或者该对象的唯一引用是循环的，那么该对象的内存即可回收。
哪些操作可能会引发内存泄露呢？

刚才说的那个闭包操作，可能引发
setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏。
控制台日志
循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

Q5:谈一下垃圾回收方法

标记清除：这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
引用计数：引用计数策略是跟踪记录每一值被使用的次数，当声明了变量并将一个引用类型赋值给该变量的时候这个值得引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数就减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值就没法进行访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

Q6:继承方式

简单原型式继承

        function Super(){            this.name = 'liuliuliu_666';        }        function Sub(){        }        Sub.prototype = new Super();    //核心

缺点：修改sub1.name后sub2.name也会被修改，因为来自原型对象的引用属性是所有实例共享的。

构造函数式继承

        function Super(val){            this.val = val;            this.fun = function() { //实例函数            }        }        function Sub(val){            Super.call(this,val);   //核心        }

缺点：无法实现函数复用，每个子类实例都会拥有一个新的fun函数，太多了就会影响性能，内存爆照。。。

组合式继承

        function Super(){            this.val = 'liu';        }        //原型函数        Super.prototype.fun1 = function() {            // body...        };        Super.prototype.fun2 = function() {            // body...        };        function Sub(){            Super.call(this);        }        Sub.prototype = new Super();

缺点：子类原型上有一份多余的父类实例属性，因为父类构造函数被调用了两次，生成了两份，而子类实例上的那一份屏蔽了子类原型上父类的。。。，又是内存浪费。

寄生组合式继承

        function Super(){            this.name = 'liu';        }        Super.prototype.fun1 = function() {            // body...        };        Super.prototype.fun2 = function() {            // body...        };        function Sub() {            Super.call(this);   //核心        }        Sub.prototype = Object.create(Super.prototype); //核心        Sub.constructor = Sub;  //核心

es6的class继承

        class A {        }        class B extends A {        }        B.__proto__ === A;  //true        B.prototype.__proto__ === A.prototype //true

Q7:BFC

定义：
BFC（block formatting context）直译为“块级格式化上下文”。是web页面中盒模型布局的CSS渲染模式。它是一个独立的渲染区域，只有block-level-box参与，它规定了内部的block-level-box如何布局，并且与这个区域外部好不相干。
怎么生成BFC
1.根元素HTML就是一个BFC
2.float不为none的浮动框
3.position为absolute或者fixed
4.display为table-cell、table-caption、inline-block、flex\或者inline-flex中的其中一个
5.overflow的值不为visible（这就是为什么我们常用overflow: hidden;去清除内部浮动的原因，出发IE的hasLayout的特性）
BFC作用
1.使用BFC来防止外边距折叠
2.解决清除浮动问题
3.多栏布局问题
Q8:随机生成长度为4的字符串

        var arr = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];        function getRandomString() {            var myStr = '';            for (var i = 0; i < 4; i++) {                var index = Math.round(Math.random()*35);                myStr += arr[index];            }            alert(myStr);        }        getRandomString();

那么问题来了，怎么保证四个随机数至少有一个字母

        var arr = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];        function getRandomString() {            var randomIndex = Math.round(Math.random()*3);  //  随机生成一个0~3之间的位置用来插入字母            console.log(randomIndex);            var myStr = '';            for (var i = 0; i < 4; i++) {                var index = -1;                if(i == randomIndex) {                    index = Math.round(Math.random()*25 + 10);                    console.log(index);                }else {                    index = Math.round(Math.random()*35);                }                myStr += arr[index];            }            console.log(myStr);        }        var myTimer = setInterval(getRandomString,100);        setTimeout(function(){            clearInterval(myTimer);        },10000);

注意，这个还需要进行改进，我并不知道怎么改进，哈哈哈

阅读全文

0 0