前端面试准备一
将一个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>