一次凉凉的前端面经

感触

前两周也是经历了人生的第一次面试，很紧张但是也因此收获了许多。一面的时候面试官问的挺基础的，也没有深入去问，等到二面的时候面试官真的很厉害，对一个问题能一直问为什么，为什么知道你说 不理解、不清楚、不会 之类的话才放过你。。。面试过后就知道自己已经凉凉了，还是自己太菜了，有些知识知道但是没有运用到实际中，缺乏练习。

下面就给大家总结一下我的所有题目以及部分答案

一面：

选中div中第三个元素，并且不为空
水平、垂直居中的方式
怎样在关闭浏览器的时候把localStroge中的内容删除（sessionstroge中设置）
什么是跨域？常见的解决方式（我的另一篇博客 “聊聊跨域” ）
行内元素、块级元素
原型、原型链
继承（不用原型，取到函数本身的属性，使用hasownPrototype）
node项目中都用到那些基本知识点
vue生命周期
js中基本的类型
事件委托【看了你就懂的文章】
display有那些值

一、选中div中第三个元素，并且不为空的

css:
	div:nth-child(3):not(:empty){
		color:red
	}

这题考查到的知识点：1、css选择器 2、伪元素
我当时没有想起来 :empty 这个伪类，一直想怎样判断空，到最后也没有想起来，面试官挺好的，看我没有写出来还给我讲解了一下。
:nth-child()这个伪元素是选中第几个元素，下标从1 开始
:not() 是对括号中的内容进行取反操作

二、水平、垂直居中的方式（这个重点说一下，二面也问了）

水平：

行内元素：
	.parent{
		text-align:center;
	}

块级元素：
	.self{
		margin:0 auto;
	}
	
	//设置父元素relative，距离左边50%，然后再设置子元素 根据父元素自身的-50%
	.parent{
		float:left;
		position:relative;
		left:50%;
	}
	.child{
		left:-50%;
	}

	//通过flex布局
	.father {
        width: 500px;
        display: flex;
        justify-content: center;     //设置水平方向居中
    }
    .children{
        width: 50px;
        height: 50px;
    }

垂直：

行内元素：
	//通过设置line-height和height一样的高度
	.parent{
		height:200px;
		line-height:200px;
	}


	//已知元素的高度
	.father {
        width: 500px;
        height: 200px;
        position: relative;
    }
    .children{
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        //如果元素高度不定：transform: translateY(-50%)
        margin-top: -25px;  //减去自身的一半
    }

	//flex布局
	.father {
        width: 500px;
        height: 200px;
        background: #f00;
        display:flex;
        flex-direction: column;  //设置成从上到下
        align-items: center;   //设置垂直方向居中
    }
    .children{
        width: 50px;
        height: 50px;
        background: #ccc;
    }

三、原型、原型链

献上一张”网红“图

什么是原型？什么又是原型链? 一篇不错的博客我理解的原型就是属性、方法的集合；原型链是：每个对象都有一个指向原型内部的指针，原型对象也有自己的原型，直到原型对象为null。（能看懂上面的图，原型链就理解的差不多了）

prototype原型

上图可以看到每个函数对象都有一个prototype，它指向一个函数的原型对象，一个函数对象肯定会有一到几个实例，其中实例f1、f2._ proto_ ===Foo.prototype 那么 _ proto_ 又是什么呢？

_ proto_ 隐式原型
_ proto_是每个对象都有的属性，它指向一个原型对象

  var Person=function(){};
  Person.prototype.name='Emaily';
  Person.prototype.age='22';

  var p1 = new Person();
  console.log(p1._ proto_ === Person.prototype); //true

constructor原型
constructor 这个属性相当于一个’指针’，指向这个函数本身，即Person.prototype.constructor === Person

四、继承的实现方式（优缺点）

ES6中的class（extends实现，子类中super()）
原型链继承
借用构造函数（call…）
组合继承（原型+构造）

1）原型链继承：
缺：1、在创建子类型的实例时，不能向父类型的构造函数中传递参数
2、原型共享问题（改变原型）

function A(){
	age:22
}; 
A.prototype.name = '132';
A.prototype.sayName = function(){
	console.log(this.name);
}
function B(){
	sex:'female';
}; 
B.prototype = new A();
var b = new B();
console.log(b.name);

2）借用构造函数：
缺：每个实例都创建一个自己的副本，无法实现函数复用，浪费空间
优：可以传递参数

function A(name,age){
	this.name = name;
	this.age = age;
}；
function B(){
	A.call(this,'tyj',22)
};
var b = new B();

3）组合继承（原型+构造）：

function A(name,age){
	this.name = name;
	this.age = age;
}；
A.prototype.sayName = function(){
	console.log(this.name);
}
function B(){
	A.call(this,'tyj',22)   //调用A
};
B.prototype = new A();  //实例化
B.prototype.constructor = B;  //多次继承之后constructor 会改变

这次就先更新这些知识，等我的下一篇博客再把二面的知识点整理出来（二面的知识点太多了，一时半会儿总结还挺困难），继续关注我的最新博客哦！

一次凉凉的前端面经

感触

猜你喜欢