面试总结一

最新推荐文章于 2019-04-28 21:06:00 发布

原创最新推荐文章于 2019-04-28 21:06:00 发布 · 495 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#面试

前端常见试题专栏收录该内容

4 篇文章

订阅专栏

1、说说三列布局实现方案（左、右边固定，中间自适应）？
2、说说xml与xhtml、html的区别？
3、说说xcc？
4、说说变量？js的基本內型？
5、说说函数？（函数的概念、作用、创建、调用）
6、说说闭包？
7、说说你是怎么理解this的？
8、说说你是怎么理解对象的？
9、说说ajax原理、你是如何使用ajax的？
10、说说跨域解决？
11、说说typeof与instanceof的区别？
12、说说事件代理（事件委托）？
13、说说异步编程？
14、说说es6常用的函数？
15、说说json、jsonp？
16、说说h5的新特性？
17、说说浏览器缓存机制与h5缓存机制的不同？
18、说说vue框架，你知道的东西？vue原理？
19、react框架了解哪些？
20、math（）函数？
21、打包工具接触了哪些？
22、说说你在项目中遇到的最大内容？
23 css hack?

1、说说三列布局实现方案（左、右边固定，中间自适应）？

2、说说xml与xhtml、html的区别？

3、说说xcc？

4、说说变量？js的基本內型？

变量有局部变量和全局变量之分；

js的基本內型：Undefined、Null、Blooean、Number、String（还有一种复杂的Object）

5、说说函数？（函数的概念、作用、创建、调用，最好提及匿名函数、闭包问题，在穿插着说说this）

5.1 函数的作用：函数是用来帮助我们封装、调用代码的最方便的工具！

5.2 函数的3种创建方式：

这里写图片描述

5.3 函数的4种调用方式：
（1）作为一个函数去调用函数名（）【 fun（）】 (函数作为全局对象调用，会使this的值成为全局对象，使用window对象作为一个变量，容易造成程序崩溃！)

（2）函数作为方法调用：（函数作为对象的方法调用，会使this的值成为对象的本身！）

这里写图片描述

（3）使用构造函数调用函数：(构造函数中的this没有任何值，指向构造函数的实例)

这里写图片描述

（4）作为函数方法调用函数：( 这种可以设置this的值，我可以返回不同this！)
在js中函数是对象，是对象就有属性个方法，而call（）和apply（）是预定义的函数方法！
这两个方法都可以调用函数，两个方法的第一个参数必须是对象的本身！

这里写图片描述

ps： 要对函数有更深层次的理解就必须要知道js的运行机制（预解析）问
题，有例文 http://blog.youkuaiyun.com/zyy88886666/article/details/72584665

还有匿名函数、闭包一定要说说。

6、说说闭包？（可以提一下匿名函数）

闭包： 是指有权访问另一个函数作用域中的变量的函数。常见创建闭包的方式：在一个函数内部创建另外一个函数。

匿名函数（拉达母函数）：创建一个函数并将它赋值给变量，因为function关键字后面没有标识符
深入理解 http://www.cnblogs.com/pssp/p/5216668.html

7、说说你是怎么理解this的？

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象

例子一：

function a(){
            var me = "zyy";
            console.log(this.me);  //undefined
            console.log(this);  //window
}
a();

说明：按照上面我们说的那样，this的最终指向的是调用它的对象，这里的函数a实际上是最终指向的window，而window里面是没有me的，所以第一个是undefined，第二个则是window。

例子二：

var b ={
            'me' : "zyy",
            fn:function(){
                console.log(this.me)   //zyy
            }
    }
    b.fn();

说明：这里的this指向的是对象b，因为你调用这个fn是通过b.fn()执行的。所以我们可以说明一点，this的指向在函数创建的时候是决定不了的，在调用的时候才能够决定，谁调用就指向谁。

例子三：

var b ={
            'me' : "zyy",
            fn:function(){
                console.log(this.me)  //zyy
            }
    }
window.b.fn();

说明： window是js中的全局对象，我们创建的变量实际上是给window添加属性，而一般情况我们经常省略window，所以这里可以用window.bb
例子3和例子2的代码执行结果是一样的，但是这里this为什么不指向window呢？

我们再来看个列子：

var c = {
            a:99,
            b:{
                a:100,
                fn:function(){
                    console.log(this.a);//100
                }
            }
    }
    c.b.fn();

说明：这里的函数是由最外层的c点出来的，但是this和上面一样并没有执行它，而是最终指向的b；所以我们可以推翻一开始说的那句话，并且总结如下

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window（但是这里需要说明的是js的严格版中this指向的不再是window，这个问题在这里不谈）
情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，this指向的是就是它上一级的对象。
情况3：如果一个函数中有this，这个函数包含多个对象，尽管这个函数是被最外层的对象所调用，this也只是指向的它上一级的元素
总之：this指向的只能是它上一级的对象

8、说说你是怎么理解对象的？（创建对象，对象属性，继承）

8.1 创建对象

//创建一个对象并添加属性和方法
var  person = new Object();
person.name = 'zyy';
person.age=21;
person.job= 'web';
person.sayName=function(){
    alert(this.name);
}

//创建一个字面量的对象
var person = {
person.name = 'zyy';
person.age=21;
person.job= 'web';
person.sayName=function(){
    alert(this.name);
}
};

8.2 对象属性

9、说说ajax原理、你是如何使用ajax的？
10、说说跨域解决？
11、说说typeof与instanceof的区别？

12、说说事件代理（事件委托）？

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？寝室所有人，午饭点的外卖，需要下楼去取，因此他们让室长一个人去取所有外卖，室长取来后，依次分发给每个人。

为什么要用事件委托：
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

事件委托的原理：
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
https://www.cnblogs.com/liugang-vip/p/5616484.html

13、说说异步编程？

14、说说es6常用的函数？
15、说说json、jsonp？
16、说说h5的新特性？
17、说说浏览器缓存机制与h5缓存机制的不同？
18、说说vue框架，你知道的东西？vue原理？
19、react框架了解哪些？
20、math（）函数？
21、promise 理解？

21、打包工具接触了哪些？

最流行的四种构建工具——grunt、gulp、browserify、webpack
所有的构建工具都是基于NodeJs和Npm

grunt 是js任务管理工具（自动化构建工具）
优势：出来早社区成熟插件全
缺点：配置复杂效率低（cpu占用率高）

gulp 基于流的自动化构建工具
优点：配置简单效率高流式工作（一个任务的输出作为另一个任务的输入）优点正好是grunt缺点
缺点：出现晚插件少

webpack 模块打包机
优点：模块化预编译代码拆分来做资源异步加载。消除对未引用资源的依赖。稳定的生产部署。一系列开发辅助工具。
缺点：配置复杂

Gulp / Grunt 是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。但gulp快于grunt。

22、说说你在项目中遇到的最大内容？

23.css hack?

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对类内部Hack：比如 IE6能识别下划线”“和星号” * “，IE7能识别星号” * “，但不能识别下划线”“，而firefox两个都不能认识。等等
选择器Hack：比如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。等等
HTML头部引用(if IE)Hack：针对所有IE：