朋友發來了最近面試的一些題目，下面談談我對這些面試題的理解。
1.call和apply的區別和用途
它們的作用都是將函數綁定到另外一個對象上去運行，僅在定義參數方式上有區別，call的第二個參數可以是任意類型，apply的第二個參數只能是數組。
2.閉包的理解
閉包就是一個函數引用另一個函數的變量。就是一個函數裏定義子函數，子函數可以訪問父函數的變量，並且這個變量會始終保存在內存中。所以閉包不能濫用，否者會造成網頁性能問題，ie中可能會導致內存泄漏，所以在退出函數前，將不必要的局部變量全部刪除。
function a(){
var n=23;
function b(){
alert(n)
}
return b;
}
var result=a();
result(); //233.對prototype的理解,如何用
js中每個對象都有prototype屬性，解釋爲返回對象類型原型的引用。
prototype對象是實現面向對象的一個重要機制,
prototype表示了一個類的屬性的集合，通過new來生成一個類的對象時，prototype對象的屬性就會成爲實例化對象的屬性。
原型對象上的所有屬性和方法，都會被對象實例所共享。
原型對象的作用，就是定義所有對象實例所共享的屬性和方法。
prototype,對於構造函數來說，它是一個屬性，對於對象實例來說，它是一個原型對象。
4.javascript的方法都有什麼
1.類方法
2.對象方法
3.原型方法
function People(name){
this.name=name;
//對象方法
this.showName=function(){
alert("my name is "+this.name);
}
}
//類方法
People.Run=function(){
alert("i can run");
}
//原型方法
People.prototype.add=function(){
alert("add people");
}5.調錯的思路
首先，看js是否成功的執行進來，我一般用console.log在控制檯輸出；其次，看是否存在邏輯問題，變量問題，參數問題。可以用斷點調試排查。
6.node.js用http模塊輸出helloworld
// 引入http模塊
var http=require('http');
// 創建server，指定處理客戶端請求的函數
http.createServer(function(req,res){
res.writeHead(200,{ 'Content-Type': 'text/plain' });
res.write('Hello World!');
res.end();
}).listen(1338);
console.log("成功啦");7.canvas繪製長方形
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.fillRect(50, 50, 200, 100);//座標，寬高8.用js獲取1-10的隨機數，放入一個數組，然後排序。
function sortArr(num,sortnum){//sortnum爲1或者-1，1爲生序排列，-1爲降序排列
var arr=[];
for(var i=0;i<num;i++){
var item=Math.floor(Math.random()*10+1);
arr.push(item);
}
if(sortnum>=1){
return arr.sort(function(a,b){
return a-b;
})
}else{
return arr.sort(function(a,b){
return b-a;
})
}
}
console.log(methord(5,0))9.click的綁定方式有幾種都是什麼
一共有三種
1.在DOM元素中直接綁定
<input onclick='add()' type="button" value="確定">2.在js代碼中綁定
elementObject.onclick=function(){}
$(".div").click(function(){})
$(".div).on("click",function(){})
$(".div").bind("click",function(){})
$('a').live('click', function(){});3.綁定事件監聽函數
document.getElementById("btn").addeventlistener("click",clickone,false);10.都用過什麼版本控制器
只用過svn和git
11.前端框架用過哪些
jquery,Bootstrap,Amaze UI，Node.js,d3.js,highcharts.js,echart.js等
12.打包工具都用過什麼
webpack
13.實現：左邊自適應寬度，右邊固定寬度200px,兩個部分等高，最小高度200px
<style>
.outer{display: table;width: 100%;min-height: 200px;}
.left{background-color: yellow;display: table-cell;}
.right{width: 200px;background-color: #ff0000;display: table-cell;}
</style>
<div class="outer">
<div class="left">左側內容<br>左側內容<br>左側內容<br>左側內容</div>
<div class="right">右側內容</div>
</div>14.BOM對象
瀏覽器對象模型，核心對象是window,包含frames,history,location,navigator,screen.BOM提供了瀏覽器顯示內容與瀏覽器窗口進行交互的對象。
console.log([]==false);//true
console.log({}==false);//false
console.log({}==true);//false對象== 布爾類型, 對象先轉換爲字符串(toString()),然後把字符串轉換爲數字(Number() "" --> 0), 布爾類型也轉換爲數字(true是1, false是0); 最後讓兩個數字比較
15.XSS
跨站腳本攻擊，是web程序中常見的漏洞。其原理是攻擊者向有XSS漏洞的網站中輸入(傳入)惡意的HTML代碼，當其它用戶瀏覽該網站時，這段HTML代碼會自動執行，從而達到攻擊的目的。如，盜取用戶Cookie、破壞頁面結構、重定向到其它網站等。
xss防禦
1.對用戶的輸入進行處理，只允許輸入合法的值
2.不能對用戶數據進行嚴格過濾的時候，對標籤進行轉換
< => < > => > & => & " => " 空 =>
16.事件響應模型target currentTarget
target在事件流的目標階段,currentTarget在事件流的捕獲，目標及冒泡階段。只有當事件流處在目標階段的時候，兩個的指向纔是一樣的，而當處於捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當前事件活動的對象（一般爲父級）。
17.事件流怎麼實現的
事件從響應到觸發一共分爲三個階段，捕獲階段，目標階段和冒泡階段。大部分瀏覽器都採用事件冒泡流，即事件從裏向外執行，例如body裏有個div，div裏有個button,點擊button,那麼執行事件的順序就是button的事件，div的事件，body的事件。還有一種"事件捕獲流"，是從外往裏執行。
18.數組的排序、數組的合併
數組用sort進行排序，用concat進行合併
19.原型鏈
js在創建對象的時候，都有一個叫做_proto_的內置屬性，用於指向創建它的函數對象的原型對象prototype。我們把有_proto_串起來的直到Object.prototype._proto_爲null的鏈叫做原型鏈。
var person=function(name){
this.name=name;
}
person.prototype.getName=function(){
return this.name;
}
var zs=new person("zhangsan");
zs.getName(); //zhangsan
zs._proto_===person.prototype
person.prototype._proto===Object.prototype
Object.prototype._proto==null
//上面就是原型鏈20.jQuery鏈式是怎麼實現的
鏈式操作實際上是通過對象上的方法最後return this把對象在返回回來，然後接着繼續調用方法。
function Person(){
}
Person.prototype={
setName:function(name){
this.name=name;
return this;
},
getName:function(){
return this.name;
},
setAge:function(){age}{
this.age=age;
return this;
}
}
var people=new Person();
people().setName("張三").setAge(18).getName();21.輪播圖原生js怎麼寫，怎麼處理劃屏時會出現的空白頁情況
.#outer{ width:500px; height:300px; margin:50px auto;}
#left,#right{ float:left; width:50px; height:50px; text-align:center; line-height:50px; font-size:20px; font-weight:bold;
margin-top:125px; display:inline; background:#ccc; cursor:pointer;}
#dancer{ width:300px;height:300px; float:left; overflow:hidden; position:relative;}
#inner{ position:absolute; left:0px; top:0px; width:1500px; height:300px;}
#inner div{ float:left; width:300px; height:300px; text-align:center; line-height:300px; background:#F00;}
<div class="box">
<div id="left">《</div>
<div class="out"><div id="inner">
<div>111</div>
<div style="background-color:#3F0;">222</div>
<div style="background-color:#600;">333</div>
<div style="background-color:#F00;">444</div>
</div>
</div>
<div id="right">》</div>
</div>
var timer = "null";
function animate(ele, target) {
window.clearTimeout(timer);
var nspeed = (target - ele.offsetLeft) / 8;
nspeed = nspeed > 0 ? Math.ceil(nspeed) : Math.floor(nspeed);
function move() {
if (ele.offsetLeft > target) { //左移動
if (ele.offsetLeft + nspeed < target) { //過界
ele.style.left = target + "px";
} else {
ele.style.left = ele.offsetLeft + nspeed + "px";
}
} else if (ele.offsetLeft < target) { //右移動
if(ele.offsetLeft+nspeed>target){
ele.style.left = target + "px";
}else{
ele.style.left = ele.offsetLeft + nspeed + "px";
}
}
timer=window.setTimeout(move,30);
}
move();
}
var oInner=document.getElementById("inner");
var oCopy=oInner.getElementsByTagName("div").item(0).cloneNode(true);
oInner.appendChild(oCopy);
oInner.style.width=oInner.clientWidth+oCopy.clientWidth+"px";
var len=oInner.getElementsByTagName("div").length;
var left=document.getElementById("left");
var right=document.getElementById("right");
var step=0;
var autotimer="null";
function autoMove(){
window.clearTimeout(autotimer);
step++;
if(step==len){
oInner.style.left = 0;
step = 1;
}
animate(oInner,-200*step);
autotimer=window.setTimeout(autoMove,2000);
}
window.setTimeout(autoMove,2000);
left.onclick=function(){
window.clearTimeout(autotimer);
step++;
if(step==len){
oInner.style.left = 0;
step = 1;
}
animate(oInner,-200*step);
autotimer=window.setTimeout(autoMove,2000);
}
right.onclick=function(){
window.clearTimeout(autotimer);
step--;
if(step==-1){
oInner.style.left = "-800px";
step = len-2;
}
animate(oInner,-200*step);
autotimer=window.setTimeout(autoMove,2000);
}
點擊時需要清除自動動畫的timer來解決劃屏的空白問題
22.盒子模型box-sizing,border-box
設置了這個屬性後，盒子的大小包含寬度，border和padding的值。便於排版和計算
23.let和var區別
1.var定義的變量是全局變量或者函數變量，而let定義的變量是塊級變量。
2.let聲明的變量不能重複聲明。
3.補充一下const,const必須初始化，並且值爲常量，聲明以後不能修改
24.兩個相同順序的不同數組，如何合併成一個同序的數組，兩個數組從大到小排序合併
我的理解是先數組合並concat,然後去重，然後sort排序
function contactArr(arra,arrb){
var arr=arra.concat(arrb);
for(var i=0;i<arr.length-1;i++){
for(var j=i+1;j<arr.length;){
if(arr[i]==arr[j]){
arr.splice(j,1);
}else{
j++
}
}
}
arr.sort(function(a,b){
return b-a;
})
return arr;
}
var a=[1,2,3,4,5];
var b=[1,3,4,5,6,7];
var c=contactArr(a,b);
console.log(c); //7,6,5,4,3,2,125.用過的js、jQuery、css框架
很多，能想起來的如,bootstrap，jquery-easyui.js、echarts.js、d3.js、hightcharts.js、fullpage.js、swiper.js、jquery.nicescroll.js、tinyscrollbar.js、圓形進度條插架，日期插架、瀑布流插架等
26.樣式，選擇器、優先級
！important>行內樣式>id>class>標籤
27.手機觸發的事件
touchstart,touchmove,touchend,touchcancel
28.可視屏幕寬高
document.documentElement.clientWidth和ducument.documentElement.clientHeight
29.滾動區域寬高
document.body.scrollWidth和document.body.scrollHeight
30.ajax異步結果處理
請求失敗做對應的處理，請求成功看返回什麼數據格式，然後在做對應的處理
31.手機適配
1.頁面頭部寫
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2.寬度儘量都使用百分比
3.用相對大小字體
4.運用css的@media定義不同的樣式規則
5.圖片自適應,最大百分百 max-width:100%
32.rem和em的區別
em相對於自己的字體大小，如果自己的字體大小沒有定義，那麼繼承自父級。rem相對於html元素的字體大小
33.函數變量聲明提升
變量的聲明提升，在函數內部會提升到函數頂部，但是賦值還是在原來的位置
var a="a";
function a(){
console.log(a); //undefined
var a="b";
console.log(a);//b
}
//函數裏面的變量a跟外面的變量a其實不是一碼事如果是下面這樣，結果就大不一樣了
var a="a";
function a(){
console.log(a); //a
a="b";
console.log(a);//b
}
//函數裏面的變量a跟外面的變量a是一碼事var getName = function(){
console.log(2);
}
function getName (){
console.log(1);
}
getName(); //2代碼解析
var getName; //變量聲明提升
function getName(){ //函數聲明提升到頂部
console.log(1);
}
getName = function(){ //變量賦值依然保留在原來的位置
console.log(2);
}
getName(); // 最終輸出：234.typeof各種空
console.log(typeof([]));//object
console.log(typeof({}));////object35.如何判斷null和undefined
用typeof判斷，typeof(null)返回Object,typeof(undefined)返回undefined
36.this指什麼？
1.當在全局作用域下this指向window
2.對象方法調用時this指向調用該方法的對象
3.使用new調用構造函數時，this指向新生成的對象
4.內部函數，內部嵌套函數this指向的是window
5.call,apply裏的this指向綁定的對象
6.事件綁定，直接在頁面元素上綁定，this指向window.在js中綁定，除了attachEvent綁定的事件方法的this指向window,其它this指向綁定事件的element。
37.寬高等比例用純css
通過padding-bottom實現，如下是寬高1:1，如果想要1:2，對應padding-bottom的值爲42%
<style>
.item {
float: left;
width: 21%;
margin: 10px 2%;
height: 0;
padding-bottom: 21%;
background-color: #dbe0e4;
}
</style>
<div class="outer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>38.子元素浮動怎麼把父元素撐開，不能用浮動和overflow
.outer:after{
content: "";
height: 0px;
display: block;
clear: both;
}39.如何實現垂直居中，多行文字單行文字，有圖片的文字
//多行文字垂直居中單行文字垂直居中有圖片的文字垂直居中
.div{display: table;width: 100%;height: 300px;}
.div span{display: table-cell;vertical-align:middle;}.div{width:100%;height: 300px;display: flex;flex-direction: column;justify-content: center;align-items: center;}//僅單行文字垂直居中
.div{width: 100%;height: 30px;line-height:30px;}40.flex
flex彈性佈局的父元素具備的屬性有flex-direction(決定子元素的排列方向),flex-wrap(決定子元素是在一行上還是可以換行),flex-flow(前倆個的簡寫),justify-content(決定橫向的對齊方式),align-items(決定豎向的對其方式),align-content
子元素的屬性有order,flex-flow,flex-shrink,flex-basis,flex,align-self
41.盒模型
盒子模型包含元素content,padding,border,margin。一個盒子如果不設置box-sizing,通常設置的寬度僅僅是content的寬度，而盒子的實際寬度要加上border和padding。如果設置box-sizing:border-box,那麼設置的寬度就包含了border和padding
42.http狀態，協議
http協議是客戶端與服務器端的一種數據通信的約定和規則。
常用狀態碼200請求成功，404請求資源不存在，500服務器錯誤
43.緩存有哪些，有什麼區別？
緩存分爲私有緩存和公有緩存。
私有緩存是針對客戶端，存放在用戶的電腦的磁盤和內存中。
公有緩存指服務器緩存。
44.JavaScript scoping（js作用域）
函數的作用域是在函數內部，即在函數內聲明的變量只能在函數內部或者函數嵌套的任意函數體內可用。
變量的作用域，沒有用var聲明的變量可用在全局使用。用let聲明的變量只能在對應的代碼塊裏使用。
45.如何理解js的面向對象模式
js中的對象就是名值對的集合，面向對象的特點是封裝，繼承和多態。主要通過原型鏈實現繼承。
46.如何理解js的設計模式
設計模式是一套被反覆使用的，多數人知曉的，經過分類編目的，代碼設計經驗的總結。使用設計模式是爲了可重用代碼，讓代碼更容易被他人理解，保證代碼的可靠性。設計模式的目的是使代碼可重複利用，提高系統開發進度。
47.如何理解瀏覽器的事件機制
首先，要從事件流說起，事件流分爲三個階段，捕獲階段，處於目標階段和冒泡階段。大部分瀏覽器都遵循這個標準，但是ie瀏覽器的事件流只有2個階段，即處於目標階段和冒泡階段。
其次，來說事件。事件包含DOM0級事件和DOM2級事件。DOM0級事件是直接綁定在元素上，在冒泡階段執行，多次註冊時只執行最後一次註冊的。DOM2級事件可以多次註冊，並且可以設置在捕獲階段註冊事件（非ie）。
var EventUtil = {
addEventListener: function (element, type, callback) { //註冊事件，因爲瀏覽器的兼容性考慮，註冊事件一般都是註冊在事件的冒泡階段
if (element.addEventListener) {
element.addEventListener(type, callback, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, callback);
} else {
element['on' + type] = callback;
}
},
removeEventListener: function(element, type, callback) { //撤銷事件
if (element.removeEventListener) {
element.removeEventListener(type, callback, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, callback);
} else {
element['on' + type] = null;
}
}
};
48.div是誰的實例化
應該是HTMLDivElement
49.promiss怎麼用
var promise = new Promise(function(resolve, reject) {
$.ajax({
type: "get",
url: url,
dataType: "json",
data: data,
success: function (data, status) {
resovled(data.data);
},
error: function (error) {
rejected(error);
}
})
promise.then(function(value) {
// success
}, function(value) {
// failure
});
50.birdge接口怎麼實現
51.CDN
52.angular2數據綁定怎麼實現
53.[ng-model]爲什麼實現雙向數據綁定，調用了哪個H5的原生屬性，change
54.observe和promise
55.瀏覽器性能提升有很多方法，爲什麼使用以下幾種，以及除此之外還有那些？（1）靜態文件合併（2）靜態文件放到多個域名下（3）http緩存
56.js引擎，如何動態渲染數據
57.app打包工具
58.router如何使用
59.如何封裝一個組件
60.封裝的組件怎麼調用，跨module的如何調用