前端实习面试总结（一）

mt

---

• 自我介绍

自我介绍，em…面试官小哥哥还是很温和的。对，自我介绍，生平第一次求职面试啊，紧张到说不出话来。凉凉。（这就不详细说了，感觉自己今天的自我介绍说的也不是很好，没有说出自己的优势。em…其实哪有优势啊）

• 对一个项目的介绍

这个我之前早有准备，并且也做了准备的，介绍的还算完整吧。但是因为紧张，感觉自己说的啰里啰嗦。（干啥嘛，好像被打了一样，吓得说不出话来。）

下次在介绍项目的时候，首先用一句话概括，这个项目干嘛的，自己在里面干了什么，用了什么技术栈，遇到了哪些问题。好了就差不多就这四项。

**所以，平时在做项目的时候，遇到问题一定要记下来，无论什么大问题还是很小的问题，即使很容易就解决的问题。**虽然自己有在记，紧张加上时间长没看，凉凉。当时我只记起来，首页在提交的时候，响应式的问题。

• 用的技术栈

用的技术栈对，我们当时用的es6，nodejs做后台，webpack打包工具.。后期的css改用scss（紧张到什么程度，scss不知道咋说了。其实在面试官问到第一个问题的时候，自己就应该提到技术栈，也不至于自己这么被动。）

嗯，我的简历里还写了，用到jquery，这个是自己的原因了。因为负责开发的功能，可能需要用瀑布流实现比较好，我在原生js实现的时候，出了问题，所以就选择用一个插件解决。em...小哥哥立马问道，那你有尝试解决写瀑布流时候的问题，继续js实现吗？有啊，我是看了一个视频，最后实现了一个小demo，但是没有用到项目中去。因为没有搞懂那三个height值，所以出的问题。当时慌到也不知道[三个height值](http://blog.csdn.net/qq_39083004/article/details/78498178)是啥了。

• webpack配置，优点，为什么要用它。

其实这些问题都是围绕项目问的，如果自己再说项目的时候主动说出来，也不至于这么被动。webpack说啥呢，自己都不知道配置多少遍了，但是面对面试，我只想起了它是模块化的打包工具，配置文件包含入口文件，出口文件，插件plugin等等等。完了，没了，凉凉。你好歹也说一个，它的优点啊，它用起来多方便，你心里没点逼数吗？不然用那么多次，好意思吗！！

webpack：（大概写一下吧，毕竟有点时间没动了）

模块化打包工具，将复杂的程序细化为小的文件。可以分析项目结构，找到js模块以及其他的一些比如scss等的预处理语言，并将其转换为css和打包为合适的格式供浏览器使用。

它的安装`npm install --save-dev webpack`安装到项目目录中。然后创建一个`package.json`文件，它的里面包含一些依赖模块，项目信息等等等。（`npm init` 自动创建）。然后配置`webpack.config.js`文件，它里面包含了入口文件路径，打包后的出口文件路径，还有一些`Loader`加载器，`plugins`等。应该特别注意要提到的`webpack-dev-server`，他是一个轻量级本地服务器，启动一个使用express的http服务器，webpack会实时编译，设置`inline mode`，`webpack-dev-server --inline --content-base `完成自动打包，看到页面的实时刷新。因为我们每次启动`webpack`的时候，命令非常长，所以这时就需要我们在`package.json`文件下加入`script`字段，设置为很容易输入的命令`"dev": "webpack --config config/webpack.config.js"`大概就是这样吧。算了，这就不多写了，后期总结一下吧。

• 原型与继承(给了一个题，让我画出原型链)。

这个东西，我昨天才复习过的，想着肯定没问题啊，但是。。。em…思维混乱，哪个原型，哪个构造函数都记不清了。

小哥哥给的题是：

var Person=function(){}；
Person.prototyp.type="person";
Person.prototype.maxAge='100';
let p=new Person();
p.name='wanghua';

在构造函数Person的原型上添加type和maxAge两个方法。使用new操作符调用构造函数
初始化一个Person实例对象。构造器内创建一个name属性赋值为wanghua。ok，很清楚，那么它的原型链就let变量指向对象->constructor属性指向构造器->prototype属性指向原型对象。（ok，如果我当时这么回答，也不会凉吧。）

• 你知道的继承方式

1.原型链继承（将父类的实例作为子类的原型）

1.非常纯粹的继承关系，实例是子类的实例，也是父类的实例。
2.父类新增的原型方法属性，子类都能访问到。
3.易于实现。
4.不能实现多类继承，不能向超类型构造函数中传递参数。

eg：代码

function Parent(){
	this.sonAge=10;
}
functin Son(){};
Son.prototype=new Parent();//子类原型继实例化父类。
let son=new Son();
console.log(son.sonAge);//10

2.使用call和apply实现继承(借用构造函数)

在子类中，调用这两个方法，将父类的this强行绑定为子类的this。这样，父类绑定在this上的属性和方法自然而然绑定到子类的this上了。

• 解决了原型继承不能解决的问题
• 但是，方法都在构造函数中定义，无法服用函数
• 在父类的原型中定义的方法，对子类是不可见的。
• 代码：

function Parent(color){
	this.color=color;
   };
function Son(){
	Parent.call(this,'red');
	this.newColor='green'
    }
let inatance=new Son();
console.log(inatance.color);//red

3.组合继承：将原型链和借用构造函数的技术组合到一起。通过使用原型链实现对原型方法的继承，借用构造函数来实现对实例属性的继承。
代码：

function Parent(name){
	this.name=name;
	this.parentAge=10;
};
Parent.prototype.sayname=function(){
	alert(this.name);
};
function Son(name,age){
	Parent.call(this,name);//2方法
	this.selfAge=age;
}
Son.prototype=new Parent();
Son.prototype.constructor=Son;
Son.prototype.sayAge=function () {
	alert(this.age);
}(感觉写的有点不太对，我去看书重写一下。)

- 说说你对闭包的理解

嗯，函数中的函数。当时的我真的是言简意赅，不会多说一个标点符号。

定义：闭包是一个函数在创建时允许自身函数访问并操作该自身函数之外的变量时所创建的作用域。。也就是说，闭包可以让函数访问所有的变量和函数，只要这些变量和函数存在于该函数声明时的作用域内。

**eg代码：**

let outerNumber=10;
let later;
function outerFunction(){
    let innerNumber=20;
    function innerFunction() {
        console.log(outerNumber);
        console.log(innerNumber);
    }
    later=innerFunction;
}
outerFunction();//声明内部函数并将内部函数值赋值给later变量；
later();//10，20

**优点：**很有用啊，内部函数的参数是包含在闭包中的，作用域外的所有变量，即便是函数声明之后的那些声明，也都包含在闭包中。相同作于域内，未生明的变量不能进行引用。什么私有变量啊，什么计时器啊，什么回调啊。都用它完成，方便。

**缺点：**但是也会影响性能啊，你记那么多东西，不要内存吗，只有这些不被用的时候，才会垃圾回收，或者页面卸载的时候，才会被清除。

• 深拷贝，浅拷贝

浅拷贝：相当于使两个数组指针指向相同的地址，任意一个数组元素发生改变，影响另一个的改变。
深拷贝：两组数组指针指向不同的地址，数组元素发生改变时不会互相影响。

• ES6 模块化

**1.**在es6中新增两个命令export和import.export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能（一个模块就是一个独立的文件。该模块内的所有变量，外部无法获取。如果希望外部可以获取内部某个变量，就必须用export导出该变量。）

2.用export命令定义了模块对外接口以后，其他js文件可以通过import命令加载这个模块。

• 垂直水平居中(几种实现)这个也是昨天才看过的，还没来得及整理。就不详细说了。

- **http状态码（其实这一节，也没咋复习到，就记了几个状态码，还不懂装懂，在这胡扯，凉）** > 1XX:表示已接受 > 2XX：成功 > 3XX：重定向，进行进一步操作（302 redirect: 302 代表暂时性转移(Temporarily Moved )） > 4XX：表示客户端发送请求有语法或者请求无法实现的错误。 > 5XX:：表示服务器处理时发生错误，未能实现合法请求。

• 有啥要问的。

还能有啥问的，都凉到底了，还问啥！小哥哥最后给我的建议就是，熟悉一下基础，下次面试的时候不要紧张。谢谢小哥哥啊。可是，我还是很想去美团的啊啊啊啊。好好准备，争取秋招不那么尴尬，顺利进入美团吧。

总结：

• 即使是第一次面试，但是准备不充分，太差劲
• 对一些概念掌握不够透彻，这也许就是知道，但是说不出来的原因
• 再者，就是太紧张。
• 没有把自己的优势展现出来。好好复习吧。