碰到的一些面試問題

時間 2019-11-21

標籤碰到一些面試問題欄目快樂工作简体版

原文原文鏈接

position的值， relative和absolute分別是相對於誰進行定位的？

absolute :生成絕對定位的元素，相對於最近一級的定位不是 static 的父元素來進行定位。javascript
fixed （老IE不支持）生成絕對定位的元素，一般相對於瀏覽器窗口或 frame 進行定位。php
relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。css
static 默認值。沒有定位，元素出如今正常的流中html
sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出前端

如何解決跨域問題

JSONPhtml5

原理是：動態插入script標籤，經過script標籤引入一個js文件，這個js文件載入成功後會執行咱們在url參數中指定的函數，而且會把咱們須要的json數據做爲參數傳入。java

因爲同源策略的限制，XmlHttpRequest只容許請求當前源（域名、協議、端口）的資源，爲了實現跨域請求，能夠經過script標籤實現跨域請求，而後在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。mysql

優勢是兼容性好，簡單易用，支持瀏覽器與服務器雙向通訊。缺點是隻支持GET請求。jquery

JSONP：json+padding（內填充），顧名思義，就是把JSON填充到一個盒子裏css3

<script>
    function createJs(sUrl){

        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }

    createJs('jsonp.js');

    box({
       'name': 'test'
    });

    function box(json){
        alert(json.name);
    }
<script>

經過修改document.domain來跨子域

將子域和主域的document.domain設爲同一個主域.前提條件：這兩個域名必須屬於同一個基礎域名!並且所用的協議，端口都要一致，不然沒法利用document.domain進行跨域

主域相同的使用document.domain

使用window.name來進行跨域

window對象有個name屬性，該屬性有個特徵：即在一個窗口(window)的生命週期內,窗口載入的全部的頁面都是共享一個window.name的，每一個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的全部頁面中的

使用HTML5中新引進的window.postMessage方法來跨域傳送數據

還有flash、在服務器上設置代理頁面等跨域方式。我的認爲window.name的方法既不復雜，也能兼容到幾乎全部瀏覽器，這真是極好的一種跨域方法。

XML和JSON的區別？

(1).數據體積方面。

JSON相對於XML來說，數據的體積小，傳遞的速度更快些。

(2).數據交互方面。

JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。

(3).數據描述方面。

JSON對數據的描述性比XML較差。

(4).傳輸速度方面。

JSON的速度要遠遠快於XML。

說說你對做用域鏈的理解

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的。

建立ajax過程

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.

(3)設置響應HTTP請求狀態變化的函數.

(4)發送HTTP請求.

(5)獲取異步調用返回的數據.

(6)使用JavaScript和DOM實現局部刷新.

<script type="text/javascript" >
        var XHR = new XMLHttpRequest();
        XHR.open( 'get', './a.php');
        XHR.send(null);
        XHR.onreadystatechange = function () {
          if ( XHR.readyState === 4 ) {
            if ( XHR.status === 200 ) {
              alert(XHR.responseText);
            }
          }
        }
<script>

HTTP和HTTPS

HTTP協議一般承載於TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了咱們常說的HTTPS。

默認HTTP的端口號爲80，HTTPS的端口號爲443。

爲何HTTPS安全

由於網絡請求須要中間有不少的服務器路由器的轉發。中間的節點均可能篡改信息，而若是使用HTTPS，密鑰在你和終點站纔有。https之因此比http安全，是由於他利用ssl/tls協議傳輸。它包含證書，卸載，流量轉發，負載均衡，頁面適配，瀏覽器適配，refer傳遞等。保障了傳輸過程的安全性

對前端模塊化的認識

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。

CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。

AMD 是提早執行，CMD 是延遲執行。

AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。

CMD模塊方式

define(function(require, exports, module) {

      // 模塊代碼

    });

談談性能優化問題

代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器。
緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務端配置Etag，減小DNS查找等
請求數量：合併樣式和腳本，使用css圖片精靈，初始首屏以外的圖片資源按需加載，靜態資源延遲加載。
請求帶寬：壓縮文件，開啓GZIP，

開啓GPU加速
-webkit-transform:transition3d(0,0,0)

或者

-webkit-transform:translateZ(0);，

實際上是爲了渲染3D樣式，但咱們設置值爲0後，並無真正使用3D效果，但瀏覽器卻所以開啓了GPU硬件加速模式。這種GPU硬件加速在當今PC機及移動設備上都已普及，在移動端的性能提高是至關顯著地，因此建議你們在作動畫時能夠嘗試一下開啓GPU硬件加速。

棧和隊列的區別?

棧的插入和刪除操做都是在一端進行的，而隊列的操做倒是在兩端進行的。

隊列先進先出，棧先進後出。

棧只容許在表尾一端進行插入和刪除，而隊列只容許在表尾一端進行插入，在表頭一端進行刪除

棧和堆的區別？

棧區（stack）— 由編譯器自動分配釋放，存放函數的參數值，局部變量的值等。

堆區（heap） — 通常由程序員分配釋放，若程序員不釋放，程序結束時可能由OS回收。

堆（數據結構）：堆能夠被當作是一棵樹，如：堆排序；

棧（數據結構）：一種先進後出的數據結構。

快速排序

"快速排序"的思想很簡單，整個排序過程只須要三步：

　　（1）在數據集之中，找一個基準點

　　（2）創建兩個數組，分別存儲左邊和右邊的數組

　　（3）利用遞歸進行下次比較

var arr = [1,4,7,8,5,2,6];
        function quickSort(arr) {
            if(arr.length <= 1) {
                return arr;
            }
            var num = Math.floor(arr.length / 2);
            var numValue = arr.splice(num, 1);
            var left = [],
                right = [];
            for (var i = 0; i < arr.length; i++) {
                if(arr[i] < numValue) {
                    left.push(arr[i])
                } else {
                    right.push(arr[i])
                }
            }
             return quickSort(left).concat(numValue,quickSort(right));//遞歸不斷重複比較
        }
        console.log(quickSort(arr));

你以爲jQuery或zepto源碼有哪些寫的好的地方

jquery源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入window對象參數，可使window對象做爲局部變量使用，好處是當jquery中訪問window對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問window對象。一樣，傳入undefined參數，能夠縮短查找undefined時的做用域鏈。

(function( window, undefined ) {

         //用一個函數域包起來，就是所謂的沙箱

         //在這裏邊var定義的變量，屬於這個函數域內的局部變量，避免污染全局

         //把當前沙箱須要的外部變量經過函數參數引入進來

         //只要保證參數對內提供的接口的一致性，你還能夠隨意替換傳進來的這個參數

        window.jQuery = window.$ = jQuery;

    })( window );

jquery將一些原型屬性和方法封裝在了jquery.prototype中，爲了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法。

有一些數組或對象的方法常常能使用到，jQuery將其保存爲局部變量以提升訪問速度。

jquery實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率。

ES6的瞭解

新增模板字符串（爲JavaScript提供了簡單的字符串插值功能）、
箭頭函數（操做符左邊爲輸入的參數，而右邊則是進行的操做以及返回的值Inputs=>outputs。）、
for-of（用來遍歷數據—例如數組中的值。）
arguments對象可被不定參數和默認參數完美代替。
ES6將promise對象歸入規範，提供了原生的Promise對象。
增長了let和const命令，用來聲明變量。
增長了塊級做用域。let命令實際上就增長了塊級做用域。
ES6規定，var命令和function命令聲明的全局變量，屬於全局對象的屬性；let命令、const命令、class命令聲明的全局變量，不屬於全局對象的屬性。。
還有就是引入module模塊的概念
Symbol數據類型

js繼承方式及其優缺點

原型鏈繼承的缺點

一是字面量重寫原型會中斷關係，使用引用類型的原型，而且子類型還沒法給超類型傳遞參數。

借用構造函數（類式繼承）

借用構造函數雖然解決了剛纔兩種問題，但沒有原型，則複用無從談起。因此咱們須要原型鏈+借用構造函數的模式，這種模式稱爲組合繼承

組合式繼承

組合式繼承是比較經常使用的一種繼承方法，其背後的思路是使用原型鏈實現對原型屬性和方法的繼承，而經過借用構造函數來實現對實例屬性的繼承。這樣，既經過在原型上定義方法實現了函數複用，又保證每一個實例都有它本身的屬性。

談談浮動和清除浮動

浮動的框能夠向左或向右移動，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流的塊框表現得就像浮動框不存在同樣。浮動的塊框會漂浮在文檔普通流的塊框上。

浮動產生緣由

通常是一個盒子裏使用了CSS float浮動屬性，致使父級對象盒子不能被撐開，這樣CSS float浮動就產生了

清除方法

對父級設置適合CSS高度
clear:both清除浮動, 增長標籤,不推薦使用. 在父盒子後添加一個空標籤,標籤樣式爲clear:both;
父級div定義 overflow:hidden
最高大上的僞元素清除

.clearfix { 
zoom:1;  //兼容ie 6 7
}
.clearfix:after { 
content:".";
display:block;
height:0;
clear:both; 
visibility:hidden;
}

用過哪些設計模式？

工廠模式：

主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是new關鍵字。將全部實例化的代碼集中在一個位置防止代碼重複。

工廠模式解決了重複實例化的問題 ，但還有一個問題,那就是識別問題，由於根本沒法 搞清楚他們究竟是哪一個對象的實例。

function createObject(name,age,profession){//集中實例化的函數var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.profession = profession;
    obj.move = function () {
        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一個實例var test2 = createObject('mike',25,'engineer');//第二個實例

構造函數模式

使用構造函數的方法，即解決了重複實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於：

1.構造函數方法沒有顯示的建立對象 (new Object());

2.直接將屬性和方法賦值給 this 對象;

3.沒有 renturn 語句。

你對閉包的理解

使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念

閉包有三個特性：

函數嵌套函數
函數內部能夠引用外部的參數和變量
參數和變量不會被垃圾回收機制回收

Cookie的弊端

cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但仍是有不少侷限性的。

弊端: 數量和長度的限制

IE6或更低版本最多20個cookie
IE7和以後的版本最後能夠有50個cookie。
Firefox最多50個cookie
chrome和Safari沒有作硬性限制
cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。
安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。
有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

優勢: 極高的擴展性和可用性

經過良好的編程，控制保存在cookie中的session對象的大小。
經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。
只在cookie中存放不敏感數據，即便被盜也不會有重大損失。
控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

瀏覽器本地存儲

在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

web storage和cookie的區別

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。

可是cookie也是不能夠或缺的：cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生

瀏覽器的支持除了IE７及如下不支持外，其餘標準瀏覽器都徹底支持(ie及FF需在web服務器裏運行)，值得一提的是IE老是辦好事，例如IE七、IE6中的userData其實就是javascript本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web storage。

localStorage和sessionStorage都具備相同的操做方法，例如setItem、getItem和removeItem等

　cookie 和session 的區別：

1.　cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
2.　cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3.　session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能
考慮到減輕服務器性能方面，應當使用COOKIE。
4.　個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cooki。
5.　因此我的建議：

將登錄信息等重要信息存放爲SESSION

其餘信息若是須要保留，能夠放在COOKIE中

　display:none和visibility:hidden的區別？

display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。

visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

　position:absolute和float屬性的異同

共同點：對內聯元素設置float和absolute屬性，可讓元素脫離文檔流，而且能夠設置其寬高。

不一樣點：float仍會佔據位置，absolute會覆蓋文檔流中的其餘元素。

　介紹一下box-sizing屬性？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。

-　content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高

-　border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。

　CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

1. id選擇器（ # myid）
2. 類選擇器（.myclassname）
3. 標籤選擇器（div, h1, p）
4. 相鄰選擇器（h1 + p）
5. 子選擇器（ul > li）
6. 後代選擇器（li a）
7. 通配符選擇器（ * ）
8. 屬性選擇器（a[rel = "external"]）
9. 僞類選擇器（a: hover, li:nth-child）

優先級

!important > 內聯 > id > class > tag

important 比內聯優先級高,但內聯比 id 要高

CSS3新增僞類舉例：

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled  :disabled 控制表單控件的禁用狀態。
:checked        單選框或複選框被選中。

CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），

對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增長了更多的CSS選擇器  多背景 rgba

在CSS3中惟一引入的僞元素是::selection.

媒體查詢，多欄佈局

border-image

CSS3中新增了一種盒模型計算方式：box-sizing。盒模型默認的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區別以下：

content-box（默認）

佈局所佔寬度Width：

Width = width + padding-left + padding-right + border-left + border-right

佈局所佔高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

佈局所佔寬度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

佈局所佔高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

佈局所佔寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

佈局所佔高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

對BFC規範的理解？

BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。

（W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其餘元素的關係和相互做用。

說說你對語義化的理解？

1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

2，有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。

建立新節點

createDocumentFragment()    //建立一個DOM片斷
  createElement()   //建立一個具體的元素
  createTextNode()   //建立一個文本節點

添加、移除、替換、插入

appendChild()
  removeChild()
  replaceChild()
  insertBefore() //並無insertAfter()

查找

getElementsByTagName()    //經過標籤名稱
  getElementsByName()    //經過元素的Name屬性的值(IE容錯能力較強，
  會獲得一個數組，其中包括id等於name值的)
  getElementById()    //經過元素Id，惟一性.

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

拖拽釋放(Drag and drop) API

語義化更好的內容標籤（header,nav,footer,aside,article,section）

音頻、視頻API(audio,video)

畫布(Canvas) API

地理(Geolocation) API

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

sessionStorage 的數據在瀏覽器關閉後自動刪除

表單控件，calendar、date、time、email、url、search

新的技術webworker, websocket, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]>
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
   <![endif]-->
如何區分： DOCTYPE聲明\新增的結構元素\功能元素

null和undefined的區別？

null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。

當聲明的變量還未被初始化時，變量的默認值爲undefined。

null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。

undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。典型用法是：

（1）變量被聲明瞭，但沒有賦值時，就等於undefined。

（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。

（3）對象沒有賦值的屬性，該屬性的值爲undefined。

（4）函數沒有返回值時，默認返回undefined。
null表示"沒有對象"，即該處不該該有值。典型用法是：

（1）做爲函數的參數，表示該函數的參數不是對象。

（2）做爲對象原型鏈的終點。

new操做符具體幹了什麼呢?

一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。

二、屬性和方法被加入到 this 引用的對象中。

三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

js延遲加載的方式有哪些？

defer和async、動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）、按需異步載入js

　哪些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

　列舉IE 與其餘瀏覽器不同的特性？

IE支持currentStyle，FIrefox使用getComputStyle
IE 使用innerText，Firefox使用textContent
濾鏡方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
事件方面：IE：attachEvent：火狐是addEventListener
鼠標位置：IE是event.clientX；火狐是event.pageX
IE使用event.srcElement；Firefox使用event.target
IE中消除list的原點僅需margin:0便可達到最終效果；FIrefox須要設置margin:0;padding:0以及list-style:none
CSS圓角：ie7如下不支持圓角

javascript對象的幾種建立方式

1，工廠模式

2，構造函數模式

3，原型模式

4，混合構造函數和原型模式

5，動態原型模式

6，寄生構造函數模式

7，穩妥構造函數模式

javascript繼承的6種方法

1，原型鏈繼承

2，借用構造函數繼承

3，組合繼承(原型+借用構造)

4，原型式繼承

5，寄生式繼承

6，寄生組合式繼承

GET和POST的區別，什麼時候使用POST？

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。


GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，

也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。

然而，在如下狀況中，請使用 POST 請求：

沒法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

ajax的缺點和在IE下的問題？

ajax的缺點

一、ajax不支持瀏覽器back按鈕。

二、安全問題 AJAX暴露了與服務器交互的細節。

三、對搜索引擎的支持比較弱。

四、破壞了程序的異常機制。

五、不容易調試。

說說你對Promise的理解

依照 Promise/A+ 的定義，Promise 有四種狀態：

pending: 初始狀態, 非 fulfilled 或 rejected.

fulfilled: 成功的操做.

rejected: 失敗的操做.

settled: Promise已被fulfilled或rejected，且不是pending

另外， fulfilled 與 rejected 一塊兒合稱 settled。

Promise 對象用來進行延遲(deferred) 和異步(asynchronous ) 計算。

Promise 的構造函數

構造一個 Promise，最基本的用法以下：

var promise = new Promise(function(resolve, reject) {

    if (...) {  // succeed

        resolve(result);

    } else {   // fails

        reject(Error(errMessage));

    }
});

Promise 實例擁有 then 方法（具備 then 方法的對象，一般被稱爲 thenable）。它的使用方法以下：

promise.then(onFulfilled, onRejected)

接收兩個函數做爲參數，一個在 fulfilled 的時候被調用，一個在 rejected 的時候被調用，接收參數就是 future，onFulfilled 對應 resolve, onRejected 對應 reject。

實現一個函數clone，能夠對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值複製

Object.prototype.clone = function(){

            var o = this.constructor === Array ? [] : {};

            for(var e in this){

                    o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];

            }

            return o;
    }

編寫一個方法求一個字符串的字節長度

假設：一個英文字符佔用一個字節，一箇中文字符佔用兩個字節

function GetBytes(str){
        var len = str.length;
        var bytes = len;
        for(var i=0; i<len; i++){
            if (str.charCodeAt(i) > 255) bytes++;
        }
        return bytes;
    }

alert(GetBytes("你好,as"));