前端面试题总结(js高级部分)

七、JS 高级
1、JQuery 一个对象可以同时绑定多个事件，这是如何实现的？
2、知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么?
3、如何测试前端代码么? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程
么(mocha, sinon, jasmin, qUnit…)?
4、前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
5、简述一下 Handlebars的基本用法？
6、简述一下 Handlerbars 的对模板的基本处理流程，如何编译的？如何缓存的？
7、用 js实现千位分隔符?
8、检测浏览器版本版本有哪些方式？
9、我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执
行几次事件，然后会先执行冒泡还是捕获
10、实现一个函数 clone，可以对 JavaScript 中的 5 种主要的数据类型（包括 Number、
String、Object、Array、Boolean）进行值复制
11、如何消除一个数组里面重复的元素？
12、小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖
乖叫一声(yelp)。从这段描述可以得到以下对象：
13、下面这个 ul，如何点击每一列的时候 alert 其 index?（闭包）
14、编写一个 JavaScript 函数，输入指定类型的选择器(仅需支持 id，class，tagName
三种简单 CSS选择器，无需兼容组合选择器)可以返回匹配的 DOM 节点，需考虑浏览器
兼容性和性能。
15、请评价以下代码并给出改进意见
16、给 String 对象添加一个方法，传入一个 string 类型的参数，然后将 string 的每
个字符间价格空格返回，例如：
17、定义一个 log方法，让它可以代理 console.log 的方法。
18、在 Javascript 中什么是伪数组？如何将伪数组转化为标准数组
19、对作用域上下文和 this 的理解，看下列代码：
20、原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){})有什么
不同？如何用原生 JS 实现 Jq 的 ready 方法？.
21、（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生 JS）
22、
23、说出以下函数的作用是？空白区域应该填写什么？
24、Javascript 作用链域?
25、谈谈 This 对象的理解。
26、eval 是做什么的？
27、关于事件，IE 与火狐的事件机制有什么区别？如何阻止冒泡？
28、什么是闭包（closure），为什么要用它？
29、javascript 代码中的"usestrict";是什么意思 ? 使用它区别是什么
30、如何判断一个对象是否属于某个类？5
31、new 操作符具体干了什么呢?
32、用原生 JavaScript 的实现过什么功能吗？
33、Javascript 中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函
数是？
34、对 JSON 的了解？
35、js 延迟加载的方式有哪些？
36、模块化开发怎么做？
37、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）
规范区别？
38、requireJS 的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓
存的？）
39、让你自己设计实现一个 requireJS，你会怎么做？
40、谈一谈你对 ECMAScript6 的了解？
41、ECMAScript6怎么写 class么，为什么会出现 class 这种东西?
42、异步加载的方式有哪些？
43、documen.write 和 innerHTML 的区别?
44、DOM 操作——怎样添加、移除、移动、复制、创建和查找节点?
45、call() 和 .apply() 的含义和区别？
46、数组和对象有哪些原生方法，列举一下？
47、JS 怎么实现一个类。怎么实例化这个类
48、JavaScript 中的作用域与变量声明提升？
49、如何编写高性能的 Javascript
50、那些操作会造成内存泄漏？
51、javascript 对象的几种创建方式？
52、javascript 继承的 6 种方法？
53、eval 是做什么的？
54、JavaScript 原型，原型链? 有什么特点？
55、事件、IE 与火狐的事件机制有什么区别？如何阻止冒泡？
56、简述一下 Sass、Less，且说明区别？
57、关于 javascript 中 apply()和 call()方法的区别
58、简述一下 JS 中的闭包？
59、说说你对 this 的理解？
60、分别阐述 split(),slice(),splice(),join()？
61、事件委托是什么？
62、如何阻止事件冒泡和默认事件？
63、添加删除替换插入到某个接点的方法？
64、你用过 require.js 吗？它有什么特性？
65、谈一下 JS 中的递归函数，并且用递归简单实现阶乘？
66、请用正则表达式写一个简单的邮箱验证。
67、简述一下你对 web性能优化的方案？
68、在 JS 中有哪些会被隐式转换为 false
69、定时器 setInterval 有一个有名函数 fn1，setInterval（fn1,500）与 setInterval
（fn1(),500）有什么区别？
70、外部 JS 文件出现中文字符，会出现什么问题，怎么解决？
71、谈谈浏览器的内核，并且说一下什么是内核？
72、JavaScript 原型，原型链 ? 有什么特点
73、写一个通用的事件侦听器函数
74、事件、IE 与火狐的事件机制有什么区别？如何阻止冒泡？
75、什么是闭包（closure），为什么要用？
76、如何判断一个对象是否属于某个类？
77、new 操作符具体干了什么呢?
78、JSON 的了解
79、js 延迟加载的方式有哪些
80、模块化怎么做？
81、异步加载的方式
82、告诉我答案是多少？
83、JS 中的 call()和 apply()方法的区别？
84、Jquery 与 jQueryUI 有啥区别？
85、jquery 中如何将数组转化为 json 字符串，然后再转化回来？
86、JavaScript 中的作用域与变量声明提升？
87、前端开发的优化问题（看雅虎 14 条性能优化原则）
88、http 状态码有那些？分别代表是什么意思？
89、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说
的越详细越好）
八、流行框架
1、JQuery 的源码看过吗？能不能简单概况一下它的实现原理？
2、jQuery.fn 的 init 方法返回的 this 指的是什么对象？为什么要返回 this？
3、jquery 中如何将数组转化为json 字符串，然后再转化回来？
4、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
5、jquery.extend 与jquery.fn.extend 的区别？
6、谈一下 Jquery中的 bind(),live(),delegate(),on()的区别？
7、JQuery 一个对象可以同时绑定多个事件，这是如何实现的？
8、Jquery 与jQuery UI 有啥区别？
9、jQuery 和Zepto 的区别？各自的使用场景？
10、针对 jQuery的优化方法？
11、Zepto 的点透问题如何解决？
12、知道各种 JS 框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么?
能讲出他们各自的优点和缺点么?
13、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
14、使用过 angular 吗？angular 中的过滤器是干什么用的

七、JS 高级
1 、y JQuery 一个对象可以同时绑定多个事件，这是如何实现的？
jQuery 可以给一个对象同时绑定多个事件，低层实现方式是使用 addEventListner 或
attachEvent 兼容不同的浏览器实现事件的绑定，这样可以给同一个对象注册多个事件。
2 、知道什么是 t webkit 么? ? 知道怎么用浏览器的各种工具来调试和 g debug 代码
么? ?
Webkit 是浏览器引擎，包括 html渲染和 js 解析功能，手机浏览器的主流内核，与之
相对应的引擎有 Gecko（Mozilla Firefox 等使用）和 Trident（也称 MSHTML，IE 使用）。
对于浏览器的调试工具要熟练使用，主要是页面结构分析，后台请求信息查看，js 调
试工具使用，熟练使用这些工具可以快速提高解决问题的效率
3 、如何测试前端代码? ? 知道 , BDD, , TDD, t Unit t Test 么? ? 知道怎么测试你的前端
工程么, (mocha, , sinon, , jasmin, qUnit…)?
了解 BDD 行为驱动开发与 TDD测试驱动开发已经单元测试相关概念，
4 、端前端 , templating(Mustache, , underscore, handlebars) 是干嘛的, , 怎么用? ?
Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，
Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在
Javascript、PHP、Python、Perl等多种编程语言中。
Underscore 封装了常用的 JavaScript 对象操作方法，用于提高开发效率。
Handlebars 是JavaScript 一个语义模板库，通过对 view 和 data 的分离来快速构建
Web 模板。
5、、下简述一下 Handlebars 的基本用法？
没有用过的话说出它是干什么的即可
官网：http://handlebarsjs.com/
参考：J:\代码,PPT,笔记,电子书\面试题\handlebarDemo
6 、下简述一下 s Handlerbars ，的对模板的基本处理流程，如何编译的？如何缓存
的？
学习技术不仅要会用，还有熟悉它的实现机制，这样在开发中遇到问题时才能更好的解决
7 、用用 s js 实现千位分隔符? ?
原生 js 的熟练度，实践经验，实现思路
8 、检测浏览器版本版本有哪些方式？
IE 与标准浏览器判断，IE 不同版本的判断，userAgent var ie = /@cc_on!@/false;
9、、个我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说
下会执行几次事件，然后会先执行冒泡还是捕获
对两种事件模型的理解
10 、实现一个函数 clone ，可以对 t JavaScript 中的 5 5 种主要的数据类型（包括
Number 、 String 、 Object 、 Array 、 Boolean ）进行值复制
考察点 1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区
别是否清楚
考察点 2：是否知道如何判断一个变量是什么类型的
考察点 3：递归算法的设计

//方法一：
Object.prototype.clone= function(){var o = this.constructor===Array ?[] : {};
for(var e inthis){o[e]= typeof this[e] === "object" ?this[e].clone(): this[e];
}
return o;
}
//方法二：
/**
* 克隆一个对象
* @paramObj
* @returns
*/
function clone(Obj) {var buf;
if(Obj instanceofArray) {buf = [];//创建一个空的数组
var i = Obj.length;
while (i--) {buf[i]= clone(Obj[i]);
}
returnbuf;
}else if (Obj instanceof Object){buf = {};//创建一个空对象
for (var kin Obj){ //为这个对象添加新的属性
buf[k]= clone(Obj[k]);
}
returnbuf;
}else{ //普通变量直接赋值
returnObj;
}
}

11 、如何消除一个数组里面重复的元素？

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
function deRepeat(){var newArr=[];
var obj={};
var index=0;
var l=arr.length;
for(var i=0;i<l;i++){if(obj[arr[i]]==undefined)
{obj[arr[i]]=1;
newArr[index++]=arr[i];
}
else if(obj[arr[i]]==1)
continue;
}
returnnewArr;
}
var newArr2=deRepeat(arr);
alert(newArr2); //输出 1,2,3,4,5,6,9,25

12、、小贤是一条可爱的小狗 (Dog)，，它的叫声很好听 (wow)，，每次看到主人的时候
就会乖乖叫一声 (yelp) 。从这段描述可以得到以下对象：

function Dog() {this.wow = function() {alert(’Wow’);
}
this.yelp =function() {this.wow();
}
}

小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会
每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，
原型，setInterval()

function MadDog() {this.yelp = function(){var self =this;
setInterval(function(){self.wow();
},500);
}
}
MadDog.prototype =newDog();
//for test
var dog = new Dog();
dog.yelp();
var madDog= new MadDog();
madDog.yelp();

13 、下面这个 l ul ，如何点击每一列的时候 t alert 其其 index? （闭包）

<ul id=”test”>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>

// 方法一：
varlis=document.getElementById('2223').getElementsByTagName('li');
for(vari=0;i<3;i++)
{lis[i].index=i;
lis[i].onclick=function(){alert(this.index);
};
}
//方法二：
varlis=document.getElementById('2223').getElementsByTagName('li');
for(vari=0;i<3;i++){lis[i].index=i;
lis[i].onclick=(function(a){return function() {alert(a);
}
})(i);
}

14、、个编写一个 t JavaScript 函数，，输入指定类型的选择器( ( 仅需支持 id，class， tagName 三种简单 CSS 选择器，无需兼容组合选择器) ) 可以返回匹配的 DOM 节点，需考虑浏览器兼容性和性能。

/*** @param selector {String} 传入的 CSS 选择器。* @return {Array}*/
var query = function(selector){var reg = /^(#)?(\.)?(\w+)$/img;
var regResult = reg.exec(selector);
var result= [];
//如果是 id选择器
if(regResult[1]) {if(regResult[3]) {if(typeof document.querySelector === "function") {result.push(document.querySelector(regResult[3]));
}else {result.push(document.getElementById(regResult[3]));
}
}
}
//如果是 class选择器
else if(regResult[2]){if(regResult[3]) {if(typeofdocument.getElementsByClassName==='function'){var doms = document.getElementsByClassName(regResult[3]);
if(doms) {result =converToArray(doms);
}
}
//如果不支持 getElementsByClassName 函数
else{var allDoms = document.getElementsByTagName("*");
for(var i = 0, len =allDoms.length;i <len; i++) {if(allDoms[i].className.search(new RegExp(regResult[2]))> -1) {result.push(allDoms[i]);
}
}
}
}
}
//如果是标签选择器
else if(regResult[3]) {vardoms = document.getElementsByTagName(regResult[3].toLowerCase());
if(doms) {result = converToArray(doms);
}
}
return result;
}
function converToArray(nodes){var array = null;
try{array =Array.prototype.slice.call(nodes,0);//针对非 IE 浏览器
}catch(ex){array =newArray();
for( var i= 0,len = nodes.length; i < len ; i++ ) {array.push(nodes[i])
}
}
returnarray;
}

15 、请评价以下代码并给出改进意见。
if(window.addEventListener){
var addListener = function(el,type,listener,useCapture){
el.addEventListener(type,listener,useCapture);
};
}
else if(document.all){
addListener = function(el,type,listener){
el.attachEvent(“on”+type,function(){
listener.apply(el);
});
}
}
不应该在 if 和 else语句中声明 addListener 函数，应该先声明；
不需要使用 window.addEventListener或 document.all 来进行检测浏览器，应该
使用能力检测；
由于 attachEvent 在 IE 中有 this指向问题，所以调用它时需要处理一下
改进如下：

function addEvent(elem,type, handler){if(elem.addEventListener){elem.addEventListener(type,handler, false);
}else if(elem.attachEvent){elem['temp'+ type + handler] =handler;
elem[type +handler] = function(){elem['temp'+ type + handler].apply(elem);
};
elem.attachEvent('on' +type, elem[type+ handler]);
}else{elem['on' +type] =handler;
}
}

16 、给 g String 对象添加一个方法，传入一个 g string 类型的参数，然后将 g string 的
每个字符间价格空格返回，例如：
addSpace(“hello world”) // -> ‘h e l l o w o r l d’
String.prototype.spacify = function(){
return this.split(’’).join(’ ‘);
};
接着上述问题答案提问，1）直接在对象的原型上添加方法是否安全？尤其是在 Object 对象
上。(这个我没能答出？希望知道的说一下。) 2）函数声明与函数表达式的区别？
答案：在 js 中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视
同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于
函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。
17 、定义一个 g log 方法，让它可以代理 g console.log 的方法。
可行的方法一：
function log(msg) {
console.log(msg);
}
log(“hello world!”)// hello world!
如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是：
function log(){
console.log.apply(console, arguments);
};
到此，追问 apply和 call 方法的异同。
对于 apply 和 call 两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象
替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数： apply 传入的
是一个参数数组，也就是将多个参数组合成为一个数组传入，而 call 则作为 call 的参数传
入（从第二个参数开始）。如 func.call(func1,var1,var2,var3)对应的 apply写法为：
func.apply(func1,[var1,var2,var3]) 。
18 、在 t Javascript 中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：无法直接调用数组方法或期望 length 属性有什么特殊的行为，但仍可
以对真正数组遍历方法来遍历它们。典型的是函数的 argument 参数，还有像调用
getElementsByTagName,document.childNodes 之类的,它们都返回 NodeList 对象都属于伪
数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
假设接第八题题干，我们要给每个 log 方法添加一个”(app)”前缀，比如’hello world!’
->’(app)hello world!’。方法如下：
function log(){
varargs = Array.prototype.slice.call(arguments); //为了使用 unshift
数组方法，将 argument 转化为真正的数组
args.unshift(’(app)’);
console.log.apply(console, args);
};
19 、对作用域上下文和 s this 的理解，看下列代码：
varUser = {
count: 1,
getCount: function() {
return this.count;
}
};
console.log(User.getCount()); // what?
varfunc = User.getCount;
console.log(func()); // what?
问两处 console 输出什么？为什么？
答案是 1和 undefined。
func 是在 winodw 的上下文中被执行的，所以会访问不到 count 属性。
继续追问，那么如何确保 Uesr总是能访问到 func 的上下文，即正确返回 1。正确的方法是
使用 Function.prototype.bind。兼容各个浏览器完整代码如下：
Function.prototype.bind= Function.prototype.bind || function(context){
var self = this;
return function(){
return self.apply(context, arguments);
};
}
varfunc = User.getCount.bind(User);
console.log(func());
20、、生原生 S JS的的 d window.onload 与与 y Jquery 的 $(document).ready(function(){}) 有什么不
生同？如何用原生 S JS 实现 q Jq 的的 y ready 方法？
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。
/*
*传递函数给 whenReady()
*当文档解析完毕且为操作准备就绪时，函数作为 document 的方法调用
*/
var whenReady = (function() { //这个函数返回 whenReady()
函数
varfuncs =[]; //当获得事件时，要运行的函数
varready =false; //当触发事件处理程序时,切换为 true
//当文档就绪时,调用事件处理程序
function handler(e){
if(ready) return; //确保事件处理程序只完整运行一次
//如果发生 onreadystatechange 事件，但其状态不是 complete 的话,那么文
档尚未准备好
if(e.type === ‘onreadystatechange’ && document.readyState !==
‘complete’){
return;
}
//运行所有注册函数
//注意每次都要计算 funcs.length
//以防这些函数的调用可能会导致注册更多的函数
for(vari=0; i<funcs.length; i++) {
funcs[i].call(document);
}
//事件处理函数完整执行,切换 ready 状态, 并移除所有函数
ready =true;
funcs =null;
}
//为接收到的任何事件注册处理程序
if(document.addEventListener) {
document.addEventListener(‘DOMContentLoaded’, handler, false);
document.addEventListener(‘readystatechange’, handler,
false); //IE9+
window.addEventListener(‘load’,handler, false);
}else if(document.attachEvent) {
document.attachEvent(‘onreadystatechange’, handler);
window.attachEvent(‘onload’, handler);
}
//返回 whenReady()函数
return functionwhenReady(fn) {
if(ready) {fn.call(document); }
else { funcs.push(fn); }
}
})();
如果上述代码十分难懂，下面这个简化版：
function ready(fn){
if(document.addEventListener) {//标准浏览器
document.addEventListener(‘DOMContentLoaded’, function() {
//注销事件,避免反复触发
document.removeEventListener(‘DOMContentLoaded’,arguments.c
allee, false);
fn();//执行函数
}, false);
}else if(document.attachEvent) {//IE
document.attachEvent(‘onreadystatechange’, function() {
if(document.readyState == ‘complete’) {
document.detachEvent(‘onreadystatechange’,
arguments.callee);
fn();//函数执行
}
});
}
};
21 、（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生 S JS ）
回答出概念即可，下面是几个要点
1.给需要拖拽的节点绑定 mousedown, mousemove, mouseup事件
2.mousedown 事件触发后，开始拖拽
3.mousemove 时，需要通过 event.clientX 和 clientY 获取拖拽位置，并实时更新位
置
4.mouseup 时，拖拽结束
5.需要注意浏览器边界的情况
22 、请实现如下功能

function setcookie(name,value,days){ //给 cookie增加一个时间变量
varexp= new Date();
exp.setTime(exp.getTime() +days*24*60*60*1000); //设置过期时间为 days 天
document.cookie = name + "="+ escape(value) + ";expires=" + exp.toGMTString();
}
function getCookie(name){varresult = "";
varmyCookie = ""+document.cookie+";";
varsearchName = "+name+"=";
varstartOfCookie =myCookie.indexOf(searchName);
varendOfCookie;
if(satrtOfCookie !=-1){startOfcookie += searchName.length;
endOfCookie= myCookie.indexOf(";",startOfCookie);
result = (myCookie.substring(startOfCookie,endOfCookie));
}
return result;
}
(function(){varoTips =document.getElementById('tips');//假设 tips 的 id为 tips
varpage = {check: function(){//检查 tips 的 cookie 是否存在并且允许显示
vartips = getCookie('tips');
if(!tips ||tips =='show')return true;//tips 的 cookie 不存在
if(tips== "never_show_again") return false;
},
hideTip: function(bNever){if(bNever) setcookie('tips', 'never_show_again', 365);
oTips.style.display= "none";//隐藏
},
showTip: function(){oTips.style.display= "inline";//显示，假设 tips为行级元素
},
init: function(){var_this =this;
if(this.check()){_this.showTip();
setcookie('tips', 'show', 1);
}
oTips.onclick =function(){_this.hideTip(true);
};
}
};
page.init();
})();

23 、说出以下函数的作用是？空白区域应该填写什么？
//define
(function(window){
function fn(str){
this.str=str;
}
fn.prototype.format= function(){
vararg= _;
return this.str.replace(,function(a,b){
return arg[b]||"";
});
}
window.fn =fn;
})(window);
//use
(function(){
vart =newfn(’

{1}{2}

’);
console.log(t.format(‘http://www.alibaba.com’,‘Alibaba’,‘Welcome’));
})();
答案：访函数的作用是使用 format 函数将函数的参数替换掉{0}这样的内容，返回一个格式
化后的结果：
第一个空是：arguments
第二个空是：/{(\d+)}/ig
24 、t Javascript 作用域链? ?
理解变量和函数的访问范围和生命周期，全局作用域与局部作用域的区别，JavaScript
中没有块作用域，函数的嵌套形成不同层次的作用域，嵌套的层次形成链式形式，通过作用
域链查找属性的规则需要深入理解。
25 、谈谈 s this 对象的理解。
理解不同形式的函数调用方式下的 this 指向，理解事件函数、定时函数中的 this 指向，
函数的调用形式决定了 this 的指向。
26 、l eval 是做什么的？
它的功能是把对应的字符串解析成 JS 代码并运行；应该避免使用 eval，不安全，非常
耗性能（2 个步骤，一次解析成js 语句，一次执行）
27 、关于事件，E IE ？与火狐的事件机制有什么区别？如何阻止冒泡？
[1].在 IE 中,事件对象是作为一个全局变量来保存和维护的.所有的浏览器事件,不管是用
户触发的，还是其他事件,都会更新 window.event 对象.所以在代码中，只要调用
window.event 就可以获取事件对象，再 event.srcElement 就可以取得触发事件的元素进
行进一步处理.
[2].在 FireFox 中，事件对象却不是全局对象，一般情况下，是现场发生，现场使用，FireFox
把事件对象自动传给事件处理程序.
关于事件的兼容性处理要熟练掌握，事件对象具体哪些属性存在兼容性问题，IE 与标准事
件模型事件冒泡与事件捕获的支持要理解
28 、什么是闭包（ closure ），为什么要用它？
简单的理解是函数的嵌套形成闭包，闭包包括函数本身已经它的外部作用域
使用闭包可以形成独立的空间，延长变量的生命周期，报存中间状态值
29 、t javascript 代码中的e “use strict”;思是什么意思 ? ? 使用它区别是什么？
意思是使用严格模式，使用严格模式，一些不规范的语法将不再支持
严格模式
链接：http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html
全局变量显式声明
静态绑定
禁止使用 with 语句
eval 中定义的变量都是局部变量
禁止 this 关键字指向全局对象
禁止在函数内部遍历调用栈
严格模式下无法删除变量。只有 configurable 设置为 true 的对象属性，才能被删除
正常模式下，对一个对象的只读属性进行赋值，不会报错，只会默默地失败。严格模式下，
将报错。
严格模式下，对一个使用 getter 方法读取的属性进行赋值，会报错。
严格模式下，对禁止扩展的对象添加新属性，会报错。
严格模式下，删除一个不可删除的属性，会报错。
正常模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，
这属于语法错误。
正常模式下，如果函数有多个重名的参数，可以用 arguments[i]读取。严格模式下，这属于
语法错误。
正常模式下，整数的第一位如果是 0，表示这是八进制数，比如 0100 等于十进制的 64。严
格模式禁止这种表示法，整数第一位为 0，将报错。
不允许对 arguments 赋值
arguments 不再追踪参数的变化
禁止使用 arguments.callee
严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说，不允许在非函数的
代码块内声明函数
严格模式新增了一些保留字：implements, interface, let, package, private, protected, public,
static, yield。
30 、如何判断一个对象是否属于某个类( ( 严格来说在 6 ES6 之前，s js 没有类的概
念) ？
instanceof constructor
31 、w new 操作符具体干了什么呢? ?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this引用的对象中。
3、新创建的对象由 this所引用，并且最后隐式的返回 this。
32 、用原生 t JavaScript 的实现过什么功能吗？
主要考察原生 js 的实践经验
33 、t Javascript 中，有一个函数，执行时对象查找时，永远不会去查找原型，
这个函数是？
HasOwnProperty
34 、对 N JSON 的了解？
轻量级数据交互格式，可以形成复杂的嵌套格式，解析非常方便
35 、s js 延迟加载的方式有哪些？
方案一：

ECMAScript 6 简介
let 和 const 命令
变量的解构赋值
字符串的扩展
正则的扩展
数值的扩展
数组的扩展
函数的扩展
对象的扩展
Symbol
Proxy 和 Reflect
二进制数组
Set 和 Map 数据结构
Iterator 和 for…of 循环
Generator 函数
Promise 对象
异步操作和 Async 函数
Class
Decorator
Module
41 、6 ECMAScript6 怎么写 s class 么，为什么会出现 s class 这种东西? ?
class Point{
constructor(x, y){
this.x = x;
this.y = y;
}
toString() {
return’(’+this.x+’, ‘+this.y+’)’;
}
}
42 、异步加载的方式有哪些？
方案一：

原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自
己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链。
原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
JavaScript 的数据对象有那些属性值？
writable：这个属性的值是否可以改。
configurable：这个属性的配置是否可以删除，修改。
enumerable：这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。
value：属性值。
当我们需要一个属性的时，Javascript 引擎会先看当前对象中是否有这个属性，如果没
有的话，就会查找他的 Prototype 对象是否有这个属性。
function clone(proto) {
function Dummy() { }
Dummy.prototype= proto;
Dummy.prototype.constructor= Dummy;
return new Dummy();//等价于 Object.create(Person);
}
function object(old) {
function F() {};
F.prototype = old;
returnnewF();
}
varnewObj = object(oldObject);
73 、写一个通用的事件侦听器函数

//event(事件)工具集，来源：https://github.com/markyun
markyun.Event ={// 页面加载完成后
readyEvent : function(fn) {if (fn==null) {fn=document;
}
varoldonload =window.onload;
if (typeof window.onload !='function'){window.onload =fn;
} else {window.onload =function() {oldonload();
fn();
};
}
},
// 视能力分别使用 dom0||dom2||IE方式 来绑定事件
// 参数： 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler){if (element.addEventListener) {//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler,false);
} else if (element.attachEvent){element.attachEvent('on' + type, function(){handler.call(element);
});
} else {element['on' + type] = handler;
}
},
// 移除事件
removeEvent: function(element,type, handler) {if (element.removeEnentListener) {element.removeEnentListener(type, handler, false);
} else if (element.datachEvent){element.detachEvent('on' + type, handler);
} else {element['on' + type] = null;
}
},
// 阻止事件(主要是事件冒泡，因为 IE不支持事件捕获)
stopPropagation: function(ev) {if (ev.stopPropagation){ev.stopPropagation();
} else {ev.cancelBubble= true;
}
},
// 取消事件的默认行为
preventDefault : function(event) {if (event.preventDefault) {event.preventDefault();
} else {event.returnValue =false;
}
},
// 获取事件目标
getTarget :function(event){return event.target|| event.srcElement;
},
// 获取 event 对象的引用，取到事件的所有信息，确保随时能使用 event；
getEvent : function(e) {varev = e || window.event;
if (!ev) {varc =this.getEvent.caller;
while (c) {ev = c.arguments[0];
if (ev && Event== ev.constructor) {break;
}
c =c.caller;
}
}
return ev;
}
};

74 、事件、E IE ？与火狐的事件机制有什么区别？如何阻止冒泡？
1.我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会
产生一个事件。是可以被 JavaScript 侦测到的行为。
2.事件处理机制：IE 是事件冒泡、火狐是事件捕获；
3. ev.stopPropagation();
75 、什么是闭包（ closure ），为什么要用？
执行 say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使
得 Javascript 的垃圾回收机制 GC 不会收回 say667()所占用的资源，因为 say667()的内部
函数的执行需要依赖 say667()中的变量。这是对闭包作用的非常直白的描述.
function say667(){
// Local variable that endsup within closure
varnum= 666;
varsayAlert = function() {alert(num);}
num++;
return sayAlert;
}
var sayAlert =say667();
sayAlert()//执行结果应该弹出的 667
76 、如何判断一个对象是否属于某个类？
使用 instanceof （待完善）
if(a instanceofPerson){
alert(‘yes’);
}
77 、w new 操作符具体干了什么呢? ?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到this 引用的对象中。
3、新创建的对象由this 所引用，并且最后隐式的返回this 。
varobj = {};
obj.proto =Base.prototype;
Base.call(obj);
78 、N JSON 的了解
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于 JavaScript
的一个子集。数据格式简单, 易于读写,占用带宽小
{‘age’:‘12’, ‘name’:‘back’}
79 、s js 延迟加载的方式有哪些
defer 和async、动态创建 DOM 方式（用得最多）、按需异步载入 js
80 、模块化怎么做？
立即执行函数,不暴露私有成员
1、使用字面量实现命名空间(YUI)：
Itcast.common.dom={};
Itcast.common.css={};
Itcast.common.event={};
2、使用闭包
varmodule1= (function(){
var_count = 0;
varm1 = function(){
//…
};
varm2 = function(){
//…
};
return {
m1 : m1,
m2 : m2
};
})();
81 、异步加载的方式
(1) defer，只支持 IE
(2) async：
(3) 创建 script，插入到 DOM 中，加载完毕后 callBack
documen.write 和 innerHTML的区别
document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分
82 、告诉我答案是多少？
(function(x){
delete x;
alert(x);
})(1+5);
函数参数无法 delete 删除，delete 只能删除通过forin 访问的属性。
当然，删除失败也不会报错，所以代码运行会弹出“1”。
83 、S JS 中的 call()和和 apply() 方法的区别？
例子中用 add 来替换sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);
注意：js 中的函数其实是对象，函数名是对Function 对象的引用。
function add(a,b){
alert(a+b);
}
function sub(a,b){
alert(a-b);
}
add.call(sub,3,1);
84 、y Jquery 与与 y jQuery I UI 有啥区别？
*jQuery 是一个 js 库，主要提供的功能是选择器，属性修改和事件绑定等等。
*jQueryUI 则是在 jQuery 的基础上，利用 jQuery 的扩展性，设计的插件。
提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等
85 、y jquery 中如何将数组转化为 n json 字符串，然后再转化回来？
jQuery 中没有提供这个功能，所以你需要先编写两个 jQuery 的扩展：
$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray= function(array) {
return JSON.parse(array)
}
然后调用：
( " " ) . s t r i n g i f y A r r a y ( a r r a y ) 86 、 t J a v a S c r i p t 中的作用域与变量声明提升？其他部分（ H T T P 、正则、优化、重构、响应式、移动端、团队协作、 S E O 、 U E D 、职业生涯） ∗ 基于 C l a s s 的选择性的性能相对于 I d 选择器开销很大，因为需遍历所有 D O M 元素。 ∗ 频繁操作的 D O M ，先缓存起来再操作。用 J q u e r y 的链式调用更好。比如： v a r s t r = ("").stringifyArray(array) 86 、t JavaScript 中的作用域与变量声明提升？其他部分（HTTP、正则、优化、重构、响应式、移动端、团队协作、SEO、UED、职业生涯） *基于 Class 的选择性的性能相对于 Id 选择器开销很大，因为需遍历所有 DOM元素。 *频繁操作的 DOM，先缓存起来再操作。用 Jquery 的链式调用更好。比如：var str= ("").stringifyArray(array)86、tJavaScript中的作用域与变量声明提升？其他部分（HTTP、正则、优化、重构、响应式、移动端、团队协作、SEO、UED、职业生涯）∗基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。∗频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。比如：varstr=(“a”).attr(“href”);
*for (var i= size;i <arr.length;i++) {}
for 循环每一次循环都查找了数组(arr) 的.length属性，在开始循环的时候设置一
个变量来存储这个数字，可以让循环跑得更快：
for (var i= size,length = arr.length; i < length; i++) {}
87 、前端开发的优化问题（看雅虎 14 条性能优化原则）。
参考资料：J:\代码,PPT,笔记,电子书\面试题\雅虎 14 条优化规则.docx
（1）减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页
Gzip，CDN 托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX
请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用 innerHTML代替 DOM操作，减少 DOM 操作次数，优化 javascript 性能。
（4）当需要设置的样式很多时设置 className而不是直接操作 style。
（5）少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。
（6）避免使用 CSS Expression（css表达式)又称 Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
（8）避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显
示出来，显示比 div+css 布局慢。

88 、p http 状态码有那些？分别代表是什么意思？
100-199用于指定客户端应相应的某些动作。
200-299用于表示请求成功。
300-399用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499用于指出客户端的错误。
400 语义有误，当前请求无法被服务器理解。
401 当前请求需要用户验证
403 服务器已经理解请求，但是拒绝执行它。
500-599用于支持服务器错误。
503– 服务不可用
89、、入一个页面从输入 L URL 到页面加载显示完成，，？这个过程中都发生了什么？（流
程说的越详细越好）
要熟悉前后端的通信流程，最好把动态网站的背后细节也介绍一遍

八、流行框架
1 、y JQuery 的源码看过吗？能不能简单概况一下它的实现原理？
考察学习知识的态度，是否仅仅是停留在使用层面，要知其然知其所以然
2 、n jQuery.fn 的的 t init 方法返回的 s this 指的是什么对象？为什么要返回 this ？
this 执行init 构造函数自身，其实就是 jQuery实例对象，返回 this 是为了实现 jQuery
的链式操作
3 、y jquery 中如何将数组转化为 n json 字符串，然后再转化回来？
$.parseJSON(’{“name”:“John”}’);
JSON.stringify

4 、y jQuery 的属性拷贝 (extend) 的实现原理是什么，如何实现深拷贝？
递归赋值
5 、d jquery.extend 与与 d jquery.fn.extend 的区别？
Jquery.extend 用来扩展 jQuery对象本身；jquery.fn.extend 用来扩展 jQuery 实例
6 、谈一下 y Jquery 中的 bind(),live(),delegate(),on() 的区别？
jquery1.7 以后就推荐使用 on 的方式来进行事件绑定了
7 、y JQuery 一个对象可以同时绑定多个事件，这是如何实现的？
可以同时绑定多个事件，低层实现原理是使用 addEventListner 与 attachEvent 兼容处
理做事件注册
4 、y Jquery 与与 y jQuery I UI 有啥区别？
jQuery 是操作 dom 的框架，jQueryUI 是基于 jQuery做的一个 UI 组件库
5 、y jQuery 和和 o Zepto 的区别？各自的使用场景？
jQuery 主要用于 pc 端，当然有对应的 jQuerymobile 用于移动端，zepto 比 jQuery更
加小巧，主要用于移动端
jquermobile 相对于 zepto 功能强大，但是体积也很庞大，zepto非常的轻量
6、、对针对 jQuery 的优化方法？
a、优先使用 ID 选择器
b、jquery 获取到的 DOM 元素如果需要多次使用，建议使用一个变量将其保存起来，因为操
作 DOM 的过程是非常耗费性能的
c、在 class 前使用 tag(标签名)
d、给选择器一个上下文
e、慎用.live()方法（应该说尽量不要使用）
f、使用 data()方法存储临时变量
7 、o Zepto 的点透问题如何解决？
点透主要是由于两个 div 重合，例如：一个 div 调用 show()，一个 div 调用 hide()；
这个时候当点击上面的 div的时候就会影响到下面的那个 div；
解决办法主要有 2种：
1.github 上有一个叫做 fastclick 的库，它也能规避移动设备上 click 事件的延迟响
应，https://github.com/ftlabs/fastclick
将它用 script 标签引入页面（该库支持 AMD，于是你也可以按照 AMD 规范，用诸如
require.js 的模块加载器引入），并且在 dom ready 时初始化在 body 上，
2.根据分析，如果不引入其它类库，也不想自己按照上述 fastclcik 的思路再开发一套
东西，需要 1.一个优先于下面的“divClickUnder”捕获的事件；2.并且通过这个事件
阻止掉默认行为（下面的“divClickUnder”对 click 事件的捕获，在 ios 的 safari，
click 的捕获被认为和滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即
可以被 event.preventDefault()阻止的行为）。
12、、知道各种 S JS 框架, (Angular, , Backbone, , Ember, , React, , Meteor, Knockout…)
么? 能讲出他们各自的优点和缺点么? ?
知识面的宽度，流行框架要多多熟悉
angular、backbone、knockout 都是完整的 MV*框架
angular 是双向数据绑定的，backbone、knockout是单向数据绑定的
React 只是单纯地View 层
13 、e Underscore 些对哪些 S JS 原生对象进行了扩展以及提供了哪些好用的函数方
法？
Underscore 的熟悉程度
14 、使用过 r angular 吗？r angular 中的过滤器是干什么用的
在表达式中转换数据

姓名为 {{lastName | uppercase }}

currency，是什么过滤器——格式化数字为货币格式，单位是$符。

前端面试题总结(js高级部分)相关推荐

前端面试题总结(js部分)|下
40 . 有这样一个 URL: http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e , 请写一段JS程序提取 URL ...
前端面试题：JS中的原型和原型链
JS的原型和原型链算是前端面试题的热门题目了,也是参加了几场面试,感觉好多次都被问到对原型和原型链的理解,所以今天也是索性把他给整理出来,一方面方便自己以后复习查看,另一方面也是给大家分享一下我对原型 ...
2021年最新前端面试题（js,vue,webpack,css,react）总结
欢迎大家留言补充面试题,或更改我的题目错误,我会根据大家意见给补充上,谢谢! 这边文章主要是最近面试加上同事的面试总结出来的,包含了大多数公司的面试题目,有些答案有出入,请多多包涵,欢迎留言一起探讨. ...
前端面试题（js篇）
1.javascript中的数据类型基本数据类型: Number,String,Boolean,Undefined,null 复杂数据类型: object,Array等基本数据类型的数据直接存储在 ...
前端面试题node.js汇总
[NodeJs] [NodeJs] 你有使用过npx吗?它主要解决什么问题? [NodeJs] 如何使用nodejs对base64进行编解码? [NodeJs] npm提供了哪些钩子?各有什么作用? ...
2021-2022 最新最全的前端面试题集锦（2022 持续更新中...敬请关注）
写在最前想起上一次的面试经历,不免细思极恐. 工作以来,感觉自己接触到的东西还是挺多的,但是当我面试的时候,就会发现各种问题,很多知识点都是模棱两可,答得不全面.究其原因,还是没有吃透这些内容.所以 ...
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）
前端面试题总结(js.html.小程序.React.ES6.Vue.全栈) 文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue re ...
2018 大厂高级前端面试题汇总
(给前端大全加星标,提升前端技能) 作者:木易杨本人于7-8月开始准备面试,过五关斩六将,最终抱得网易归,深深感受到高级前端面试的套路.以下是自己整理的面试题汇总,不敢藏私,统统贡献出来. 面试的公 ...
前端面试题（HTML、JS、Vue、React、小程序）
前端面试题 HTML && CSS HTML 1.Div 里面有个一个div ***** Q:有几种方法可以水平,垂直居中 2.doctype的作用 * 3.link标签和import ...

前端面试题总结(js高级部分)

前端面试题总结(js高级部分)相关推荐

最新文章

热门文章