整理前端面試題

1. 閉包

         能夠讀取其他函數內部變量的函數

閉包的作用

1.使用閉包可以訪問函數中的變量。

2.可以使變量長期保存在內存中，生命週期比較長。

閉包不能濫用，否則會導致內存泄露，影響網頁的性能。閉包使用完了後，要立即釋放資源，將引用變量指向null。

  function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
   //f2函數，就是閉包

 閉包就是在函數裏面創建一個函數，創建的函數可以訪問外部函數的變量

function aa(){
    console.log(loc)
}

function bb(){
    var loc = "西魚";
    aa();
}
bb(); //因爲是調用aa,aa其實是在外部執行的所以報錯

function aa(data){
    console.log(loc)
}
function bb(){
    var loc = "西魚";
    aa(loc);
}
bb();
//可以傳參進去 可以打印
function bb(){
    var loc = "西魚";
    function aa(){
    console.log(loc)
    }
    aa();
}
bb();
// 閉包

2.原型鏈

原型鏈是實現繼承的主要方法。

1. 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不爲 null 的話，我們就稱之爲原型鏈

2. 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈

var a = {};
console.log(a.prototype);  //undefined
console.log(a.__proto__);  //Object {}

var b = function(){}
console.log(b.prototype);  //b {}
console.log(b.__proto__);  //function() {}

只有函數對象有prototype屬性 prototype屬性也叫原型對象,主要是爲了實現繼承;

每個對象都有原型  只有函數對象有prototype這個屬性，存放對象的 可以繼承

function A(){
　　this.name="zhangsan";
}
A.prototype.getName=function(){
 　　return this.name;
}
function B(){
　　this.age=20;
}
B.prototype=new A();
//子類型有時候需要重寫超類型中的某個方法，或者需要添加母類型中不存在的某個方法。但不管怎
樣，給原型添加方法的代碼一定要放在替換原型的語句之後。
B.prototype.getAge=function(){
　　return this.age;
}
var x=new B();
console.log(x.getName());
console.log(x.getAge());

console.log(A.prototype)

console.log(B.prototype)

console.log(x)

B繼承A，x是B的實例，所以x也繼承A，可以調用A中的屬性和方法。

3. 作用域 

ECMAScript和JavaScript關係： 

      ECMAScript是一個國際通過的標準化腳本語言。JavaScript由ECMAScript和DOM、BOM三者組成。可以簡單理解爲：ECMAScript是JavaScript的語言規範，JavaScript是ECMAScript的實現和擴展。

作用域：定義一個函數就開闢了一個局部作用域，整個js執行環境有一個全局作用域

es5 只有全局作用域，局部作用域，es6新增塊級作用域

let和const命令所聲明的變量，只在let命令所在的代碼塊內有效。

{
     let a = 10; var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

const聲明的變量不允許修改，所以一般是聲明常量

暫時性死區（TDZ）：在代碼塊內，使用let/const命令聲明變量之前，該變量都是不可用的。

在使用let/const 聲明變量或者常量時，只要變量在還沒有聲明之前使用，就會報錯。

es6規定暫時性死區和let、const語句不出現變量提升，主要是爲了減少運行時錯誤，防止在變量聲明前就使用這個變量，從而導致意料之外的行爲。

暫時性死區的本質就是隻要進入當前作用域，所要使用的變量就已經存在，但是不可獲取，只有等到聲明變量的哪一行代碼出現，纔可以獲取和使用該變量。

4.清除浮動的幾種方法

1。父級div定義 height 或加 overflow:hidden;

2。結尾處加空div標籤 clear:both 

3. 使用僞元素來清除浮動

.clearfix:after{
content:"";//設置內容爲空
height:0;//高度爲0
line-height:0;//行高爲0
display:block;//將文本轉爲塊級元素
visibility:hidden;//將元素隱藏
clear:both//清除浮動
}

5.ajax清除瀏覽器緩存

方式一：用ajax請求服務器最新文件，並加上請求頭If-Modified-Since和Cache-Control,如下:

$.ajax({
      url:'www.haorooms.com',
     dataType:'json',
data:{},
beforeSend: function(xmlHttp){ xmlHttp.setRequestHeader("If-Modified-Since","0"); xmlHttp.setRequestHeader("Cache-Control","no-cache"); },
success:function(response){ //操作 }
async:false
});

方法二，直接用cache:false

$.ajax({
     url:'www.haorooms.com',
     dataType:'json',
     data:{},
     cache:false,
     ifModified :true ,

     success:function(response){
         //操作
     }
     async:false
  });

方法三：用隨機數，隨機數也是避免緩存的一種很不錯的方法！

URL 參數後加上 "?ran=" + Math.random(); //當然這裏參數 ran可以任意取了1

方法四：用隨機時間，和隨機數一樣。

在 URL 參數後加上 "?timestamp=" + new Date().getTime();

6.link和@import的區別

• link屬於html標籤，而@import是css提供的。
• 頁面被加載時，link會同時被加載，而@import引用的css會等到頁面加載結束後加載。
• link是html標籤，因此沒有兼容性，而@import只有IE5以上才能識別。
• link方式樣式的權重高於@import的。 

7.一個頁面從輸入URL到頁面加載顯示完成，這個過程都發生什麼？

輸入url

在發送http請求前，需要域名解析(DNS解析)，解析獲取相應的IP地址。

到指定域名的TCP（傳輸控制協議）連接是否開啓，開啓TCP協議，與瀏覽器建立TCP三次握手

握手成功後瀏覽器向服務器發送http請求

服務器處理收到的請求，將數據返回至瀏覽器

瀏覽器收到http響應

讀取頁面內容，瀏覽器渲染，解析html源碼，生成dom樹，解析css，js

8.ajax

異步的JavaScript和xml

可以在不重新加載整個頁面的情況下，與服務器交換數據並更新部分網頁內容

ajax的技術核心是 XMLHttpRequest 對象；
ajax 請求過程：創建 XMLHttpRequest 對象、連接服務器、發送請求、接收響應數據；

(1)創建 XMLHttpRequest 對象

(2)向服務器發送請求：使用 XMLHttpRequest 對象的 open() 和 send() 方法

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

(3)服務器響應：使用 XMLHttpRequest 對象的 responseText（）獲得字符串形式的響應數據） 或 responseXML （獲得 XML 形式的響應數據）屬性

onreadystatechange 事件

當請求被髮送到服務器時，我們需要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

只有當readState等於4且狀態爲200的時候，纔會有返回值

get和post區別

Get是向服務器發索取數據的一種請求，而Post是向服務器提交數據的一種請求

Get是獲取信息，而不是修改信息，類似數據庫查詢功能一樣，數據不會被修改

Get請求的參數會跟在url後進行傳遞

Get傳輸的數據有大小限制，因爲GET是通過URL提交數據，那麼GET可提交的數據量就跟URL的長度有直接關係了，不同的瀏覽器對URL的長度的限制是不同的。

GET請求的數據會被瀏覽器緩存起來，用戶名和密碼將明文出現在URL上，其他人可以查到歷史瀏覽記錄，數據不太安全。

POST表示可能修改變服務器上的資源的請求，在服務器端，用Post方式提交的數據只能用Request.Form來獲取

jsonp：JSONP實現跨域請求的原理簡單的說，就是動態創建<script>標籤，然後利用<script>的src 不受同源策略約束來跨域獲取數據。

設置dataType：jsonp

        9.同源策略

            現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。

       10.js異步編程

            （1）使用setTimeout  

// 任務一
        function fn1() {
            console.log(3)
            setTimeout(function() {
                console.log(1)
            }, 0)
        }
// 任務二
        function fn2() {
            console.log(2)
        }
        fn1()
        fn2()
          輸出3，2，1
作者：大春春
鏈接：https://www.jianshu.com/p/ea5dc6a30ff2
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

優點：簡單明瞭；
缺點：①、耦合嚴重；②、容易陷入回調地獄
PS：回調地獄例子（該操作只有三步，如果是十步，嵌套將會非常嚴重）

（2）promise     

Promise是ES6中新增的內置對象，專門用於解決異步相關的問題，其內最重要的兩個方法是then和catch，then方法第一個參數是resolve狀態時執行的回調，第二個參數則是reject狀態時執行的回調，而catch則是then中有一環是reject就執行的回調函數

function getData(){
            let promise = new Promise((resolve, reject) => {
                //  AJAX獲取數據。。。。
                if(success){
                    // 成功時執行
                    resolve(fn1)
                }else{
                    // 失敗時執行
                    reject(fn2)
                }
            })

            return promise
        }

        getData().then(fn1).catch(fn2)

作者：大春春
鏈接：https://www.jianshu.com/p/ea5dc6a30ff2
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

11.js延遲加載方法有哪些

使用setTimeout延遲方法的加載時間

讓js最後加載

12.map(parseint)

13webpack 實現原理 

全局安裝 webpack: npm install -g wabpack

webpack主要就是模塊化、處理依賴 和 打包-

14跨域解決辦法 字符串和數組轉換    同源   數組常見操作

 移動端瀏覽器兼容問題

在移動端修改難看的點擊的高亮效果，iOS和安卓下都有效：

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}