前端面試題（4）JavaScript - JavaShuo

前端面試題JavaScript（一）

JavaScript的組成javascript

JavaScript 由如下三部分組成：css
- ECMAScript（核心）：JavaScript 語言基礎
- DOM（文檔對象模型）：規定了訪問HTML和XML的接口
- BOM（瀏覽器對象模型）：提供了瀏覽器窗口之間進行交互的對象和方法

JS的基本數據類型和引用數據類型html

基本數據類型：undefined、null、boolean、number、string、symbol
引用數據類型：object、array、function

檢測瀏覽器版本版本有哪些方式？前端

根據 navigator.userAgent // UA.toLowerCase().indexOf('chrome')
根據 window 對象的成員 // 'ActiveXObject' in window

介紹JS有哪些內置對象？java

數據封裝類對象：Object、Array、Boolean、Number、String
其餘對象：Function、Arguments、Math、Date、RegExp、Error
ES6新增對象：Symbol、Map、Set、Promises、Proxy、Reflect

說幾條寫JavaScript的基本規範？node

代碼縮進，建議使用「四個空格」縮進
代碼段使用花括號{}包裹
語句結束使用分號;
變量和函數在使用前進行聲明
以大寫字母開頭命名構造函數，全大寫命名常量
規範定義JSON對象，補全雙引號
用{}和[]聲明對象和數組

如何編寫高性能的JavaScript？git

遵循嚴格模式："use strict";
將js腳本放在頁面底部，加快渲染頁面
將js腳本將腳本成組打包，減小請求
使用非阻塞方式下載js腳本
儘可能使用局部變量來保存全局變量
儘可能減小使用閉包
使用 window 對象屬性方法時，省略 window
儘可能減小對象成員嵌套
緩存 DOM 節點的訪問
經過避免使用 eval() 和 Function() 構造器
給 setTimeout() 和 setInterval() 傳遞函數而不是字符串做爲參數
儘可能使用直接量建立對象和數組
最小化重繪(repaint)和迴流(reflow)

描述瀏覽器的渲染過程，DOM樹和渲染樹的區別？程序員

瀏覽器的渲染過程：github
- 解析HTML構建 DOM(DOM樹)，並行請求 css/image/js
- CSS 文件下載完成，開始構建 CSSOM(CSS樹)
- CSSOM 構建結束後，和 DOM 一塊兒生成 Render Tree(渲染樹)
- 佈局(Layout)：計算出每一個節點在屏幕中的位置
- 顯示(Painting)：經過顯卡把頁面畫到屏幕上
DOM樹和渲染樹的區別：web
- DOM樹與HTML標籤一一對應，包括head和隱藏元素
- 渲染樹不包括head和隱藏元素，大段文本的每個行都是獨立節點，每個節點都有對應的css屬性

重繪和迴流（重排）的區別和關係？

重繪：當渲染樹中的元素外觀（如：顏色）發生改變，不影響佈局時，產生重繪
迴流：當渲染樹中的元素的佈局（如：尺寸、位置、隱藏/狀態狀態）發生改變時，產生重繪迴流
注意：JS獲取Layout屬性值（如：offsetLeft、scrollTop、getComputedStyle等）也會引發迴流。由於瀏覽器須要經過迴流計算最新值
迴流必將引發重繪，而重繪不必定會引發迴流

如何最小化重繪(repaint)和迴流(reflow)？

須要要對元素進行復雜的操做時，能夠先隱藏(display:"none")，操做完成後再顯示
須要建立多個DOM節點時，使用DocumentFragment建立完後一次性的加入document
緩存Layout屬性值，如：var left = elem.offsetLeft; 這樣，屢次使用 left 只產生一次迴流
儘可能避免用table佈局（table元素一旦觸發迴流就會致使table裏全部的其它元素迴流）
避免使用css表達式(expression)，由於每次調用都會從新計算值（包括加載頁面）
儘可能使用 css 屬性簡寫，如：用 border 代替 border-width, border-style, border-color
批量修改元素樣式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

script 的位置是否會影響首屏顯示時間？

在解析 HTML 生成 DOM 過程當中，js 文件的下載是並行的，不須要 DOM 處理到 script 節點。所以，script的位置不影響首屏顯示的開始時間。
瀏覽器解析 HTML 是自上而下的線性過程，script做爲 HTML 的一部分一樣遵循這個原則
所以，script 會延遲 DomContentLoad，只顯示其上部分首屏內容，從而影響首屏顯示的完成時間

解釋JavaScript中的做用域與變量聲明提高？

JavaScript做用域：
- 在Java、C等語言中，做用域爲for語句、if語句或{}內的一塊區域，稱爲做用域；
- 而在 JavaScript 中，做用域爲function(){}內的區域，稱爲函數做用域。
JavaScript變量聲明提高：
- 在JavaScript中，函數聲明與變量聲明常常被JavaScript引擎隱式地提高到當前做用域的頂部。
- 聲明語句中的賦值部分並不會被提高，只有名稱被提高
- 函數聲明的優先級高於變量，若是變量名跟函數名相同且未賦值，則函數聲明會覆蓋變量聲明
- 若是函數有多個同名參數，那麼最後一個參數（即便沒有定義）會覆蓋前面的同名參數

介紹JavaScript的原型，原型鏈？有什麼特色？

原型：
- JavaScript的全部對象中都包含了一個 [__proto__] 內部屬性，這個屬性所對應的就是該對象的原型
- JavaScript的函數對象，除了原型 [__proto__] 以外，還預置了 prototype 屬性
- 當函數對象做爲構造函數建立實例時，該 prototype 屬性值將被做爲實例對象的原型 [__proto__]。
原型鏈：
- 當一個對象調用的屬性/方法自身不存在時，就會去本身 [__proto__] 關聯的前輩 prototype 對象上去找
- 若是沒找到，就會去該 prototype 原型 [__proto__] 關聯的前輩 prototype 去找。依次類推，直到找到屬性/方法或 undefined 爲止。從而造成了所謂的「原型鏈」
原型特色：
- JavaScript對象是經過引用來傳遞的，當修改原型時，與之相關的對象也會繼承這一改變

JavaScript有幾種類型的值

原始數據類型（Undefined，Null，Boolean，Number、String）-- 棧
引用數據類型（對象、數組和函數）-- 堆
兩種類型的區別是：存儲位置不一樣：
原始數據類型是直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據；
引用數據類型存儲在堆(heap)中的對象，佔據空間大、大小不固定，若是存儲在棧中，將會影響程序運行的性能；
引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。
當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中得到實體。

JavaScript如何實現一個類，怎麼實例化這個類？

構造函數法（this + prototype） -- 用 new 關鍵字生成實例對象
- 缺點：用到了 this 和 prototype，編寫複雜，可讀性差

function Mobile(name, price){
     this.name = name;
     this.price = price;
   }
   Mobile.prototype.sell = function(){
      alert(this.name + "，售價 $" + this.price);
   }
   var iPhone7 = new Mobile("iPhone7", 1000);
   iPhone7.sell();

Object.create 法 -- 用 Object.create() 生成實例對象
缺點：不能實現私有屬性和私有方法，實例對象之間也不能共享數據

var Person = {
     firstname: "Mark",
     lastname: "Yun",
     age: 25,
     introduce: function(){
         alert('I am ' + Person.firstname + ' ' + Person.lastname);
     }
 };

 var person = Object.create(Person);
 person.introduce();

 // Object.create 要求 IE9+，低版本瀏覽器能夠自行部署：
 if (!Object.create) {
　   Object.create = function (o) {
　　　 function F() {}
　　　 F.prototype = o;
　　　 return new F();
　　};
　}

極簡主義法（消除 this 和 prototype） -- 調用 createNew() 獲得實例對象
- 優勢：容易理解，結構清晰優雅，符合傳統的"面向對象編程"的構造

var Cat = {
   age: 3, // 共享數據 -- 定義在類對象內，createNew() 外
   createNew: function () {
     var cat = {};
     // var cat = Animal.createNew(); // 繼承 Animal 類
     cat.name = "小咪";
     var sound = "喵喵喵"; // 私有屬性--定義在 createNew() 內，輸出對象外
     cat.makeSound = function () {
       alert(sound);  // 暴露私有屬性
     };
     cat.changeAge = function(num){
       Cat.age = num; // 修改共享數據
     };
     return cat; // 輸出對象
   }
 };

 var cat = Cat.createNew();
 cat.makeSound();

ES6 語法糖 class -- 用 new 關鍵字生成實例對象

class Point {
       constructor(x, y) {
         this.x = x;
         this.y = y;
       }
       toString() {
         return '(' + this.x + ', ' + this.y + ')';
       }
     }

  var point = new Point(2, 3);

Javascript如何實現繼承？

構造函數綁定：使用 call 或 apply 方法，將父對象的構造函數綁定在子對象上

function Cat(name,color){
 　Animal.apply(this, arguments);
 　this.name = name;
 　this.color = color;
}

實例繼承：將子對象的 prototype 指向父對象的一個實例

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

拷貝繼承：若是把父對象的全部屬性和方法，拷貝進子對象

function extend(Child, Parent) {
  　　　var p = Parent.prototype;
  　　　var c = Child.prototype;
  　　　for (var i in p) {
  　　　   c[i] = p[i];
  　　　}
  　　　c.uber = p;
  　 }

原型繼承：將子對象的 prototype 指向父對象的 prototype

function extend(Child, Parent) {
        var F = function(){};
      　F.prototype = Parent.prototype;
      　Child.prototype = new F();
      　Child.prototype.constructor = Child;
      　Child.uber = Parent.prototype;
    }

ES6 語法糖 extends：class ColorPoint extends Point {}

class ColorPoint extends Point {
       constructor(x, y, color) {
          super(x, y); // 調用父類的constructor(x, y)
          this.color = color;
       }
       toString() {
          return this.color + ' ' + super.toString(); // 調用父類的toString()
       }
    }

談談this對象的理解

this 老是指向函數的直接調用者
若是有 new 關鍵字，this 指向 new 出來的實例對象
在事件中，this指向觸發這個事件的對象
IE下 attachEvent 中的this老是指向全局對象Window

eval是作什麼的？

eval的功能是把對應的字符串解析成JS代碼並運行

應該避免使用eval，不安全，很是耗性能（先解析成js語句，再執行）
由JSON字符串轉換爲JSON對象的時候能夠用 eval('('+ str +')');

什麼是 Window 對象? 什麼是 Document 對象?

Window 對象表示當前瀏覽器的窗口，是JavaScript的頂級對象。
咱們建立的全部對象、函數、變量都是 Window 對象的成員。
Window 對象的方法和屬性是在全局範圍內有效的。
Document 對象是 HTML 文檔的根節點與全部其餘節點（元素節點，文本節點，屬性節點, 註釋節點）
Document 對象使咱們能夠經過腳本對 HTML 頁面中的全部元素進行訪問
Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問

介紹 DOM 的發展

DOM：文檔對象模型（Document Object Model），定義了訪問HTML和XML文檔的標準，與編程語言及平臺無關
DOM0：提供了查詢和操做Web文檔的內容API。未造成標準，實現混亂。如：document.forms['login']
DOM1：W3C提出標準化的DOM，簡化了對文檔中任意部分的訪問和操做。如：JavaScript中的Document對象
DOM2：原來DOM基礎上擴充了鼠標事件等細分模塊，增長了對CSS的支持。如：getComputedStyle(elem, pseudo)
DOM3：增長了XPath模塊和加載與保存（Load and Save）模塊。如：XPathEvaluator

介紹DOM0，DOM2，DOM3事件處理方式區別

DOM0級事件處理方式：
- btn.onclick = func;
- btn.onclick = null;
DOM2級事件處理方式：
- btn.addEventListener('click', func, false);
- btn.removeEventListener('click', func, false);
- btn.attachEvent("onclick", func);
- btn.detachEvent("onclick", func);
DOM3級事件處理方式：
- eventUtil.addListener(input, "textInput", func);
- eventUtil 是自定義對象，textInput 是DOM3級事件

事件的三個階段

捕獲、目標、冒泡

介紹事件「捕獲」和「冒泡」執行順序和事件的執行次數？

按照W3C標準的事件：首是進入捕獲階段，直到達到目標元素，再進入冒泡階段
事件執行次數（DOM2-addEventListener）：元素上綁定事件的個數
- 注意1：前提是事件被確實觸發
- 注意2：事件綁定幾回就算幾個事件，即便類型和功能徹底同樣也不會「覆蓋」
事件執行順序：判斷的關鍵是否目標元素
- 非目標元素：根據W3C的標準執行：捕獲->目標元素->冒泡（不依據事件綁定順序）
- 目標元素：依據事件綁定順序：先綁定的事件先執行（不依據捕獲冒泡標準）
- 最終順序：父元素捕獲->目標元素事件1->目標元素事件2->子元素捕獲->子元素冒泡->父元素冒泡
- 注意：子元素事件執行前提事件確實「落」到子元素佈局區域上，而不是簡單的具備嵌套關係

在一個DOM上同時綁定兩個點擊事件：一個用捕獲，一個用冒泡。事件會執行幾回，先執行冒泡仍是捕獲？

該DOM上的事件若是被觸發，會執行兩次（執行次數等於綁定次數）
若是該DOM是目標元素，則按事件綁定順序執行，不區分冒泡/捕獲
若是該DOM是處於事件流中的非目標元素，則先執行捕獲，後執行冒泡

事件的代理/委託

事件委託是指將事件綁定目標元素的到父元素上，利用冒泡機制觸發該事件
- 優勢：
  - 能夠減小事件註冊，節省大量內存佔用
  - 能夠將事件應用於動態添加的子元素上
- 缺點：
  使用不當會形成事件在不該該觸發時觸發
- 示例：

ulEl.addEventListener('click', function(e){
    var target = event.target || event.srcElement;
    if(!!target && target.nodeName.toUpperCase() === "LI"){
        console.log(target.innerHTML);
    }
}, false);

IE與火狐的事件機制有什麼區別？如何阻止冒泡？

IE只事件冒泡，不支持事件捕獲；火狐同時支持件冒泡和事件捕獲

IE的事件處理和W3C的事件處理有哪些區別？

綁定事件
- W3C: targetEl.addEventListener('click', handler, false);
- IE: targetEl.attachEvent('onclick', handler);
刪除事件
- W3C: targetEl.removeEventListener('click', handler, false);
- IE: targetEl.detachEvent(event, handler);
事件對象
- W3C: var e = arguments.callee.caller.arguments[0]
- IE: window.event
事件目標
- W3C: e.target
- IE: window.event.srcElement
阻止事件默認行爲
- W3C: e.preventDefault()
- IE: window.event.returnValue = false
阻止事件傳播
- W3C: e.stopPropagation()
- IE: window.event.cancelBubble = true

W3C事件的 target 與 currentTarget 的區別？

target 只會出如今事件流的目標階段
currentTarget 可能出如今事件流的任何階段
當事件流處在目標階段時，兩者的指向相同
當事件流處於捕獲或冒泡階段時：currentTarget 指向當前事件活動的對象(通常爲父級)

如何派發事件(dispatchEvent)？（如何進行事件廣播？）

W3C: 使用 dispatchEvent 方法
IE: 使用 fireEvent 方法

var fireEvent = function(element, event){
    if (document.createEventObject){
        var mockEvent = document.createEventObject();
        return element.fireEvent('on' + event, mockEvent)
    }else{
        var mockEvent = document.createEvent('HTMLEvents');
        mockEvent.initEvent(event, true, true);
        return !element.dispatchEvent(mockEvent);
    }
}

什麼是函數節流？介紹一下應用場景和原理？

函數節流(throttle)是指阻止一個函數在很短期間隔內連續調用。

只有當上一次函數執行後達到規定的時間間隔，才能進行下一次調用。
但要保證一個累計最小調用間隔（不然拖拽類的節流都將無連續效果）

函數節流用於 onresize, onscroll 等短期內會屢次觸發的事件
函數節流的原理：使用定時器作時間節流。

當觸發一個事件時，先用 setTimout 讓這個事件延遲一小段時間再執行。
若是在這個時間間隔內又觸發了事件，就 clearTimeout 原來的定時器，
再 setTimeout 一個新的定時器重複以上流程。

函數節流簡單實現：

function throttle(method, context) {
     clearTimeout(methor.tId);
     method.tId = setTimeout(function(){
         method.call(context);
     }， 100); // 兩次調用至少間隔 100ms
}
// 調用
window.onresize = function(){
    throttle(myFunc, window);
}

區分什麼是「客戶區座標」、「頁面座標」、「屏幕座標」？

客戶區座標：鼠標指針在可視區中的水平座標(clientX)和垂直座標(clientY)
頁面座標：鼠標指針在頁面佈局中的水平座標(pageX)和垂直座標(pageY)
屏幕座標：設備物理屏幕的水平座標(screenX)和垂直座標(screenY)

如何得到一個DOM元素的絕對位置？

elem.offsetLeft：返回元素相對於其定位父級左側的距離
elem.offsetTop：返回元素相對於其定位父級頂部的距離
elem.getBoundingClientRect()：返回一個DOMRect對象，包含一組描述邊框的只讀屬性，單位像素

分析 ['1', '2', '3'].map(parseInt) 答案是多少？

答案:[1, NaN, NaN]
parseInt(string, radix) 第2個參數 radix 表示進制。省略 radix 或 radix = 0，則數字將以十進制解析
map 每次爲 parseInt 傳3個參數(elem, index, array)，其中 index 爲數組索引
所以，map 遍歷 ["1", "2", "3"]，相應 parseInt 接收參數以下

parseInt('1', 0);  // 1
parseInt('2', 1);  // NaN
parseInt('3', 2);  // NaN

因此，parseInt 參數 radix 不合法，致使返回值爲 NaN

new 操做符具體幹了什麼？

建立實例對象，this 變量引用該對象，同時還繼承了構造函數的原型
屬性和方法被加入到 this 引用的對象中
新建立的對象由 this 所引用，而且最後隱式的返回 this

用原生JavaScript的實現過什麼功能嗎？

封裝選擇器、調用第三方API、設置和獲取樣式

解釋一下這段代碼的意思嗎？

[].forEach.call($$("*"), function(el){
      el.style.outline = "1px solid #" + (~~(Math.random()*(1<<24))).toString(16);
  })

解釋：獲取頁面全部的元素，遍歷這些元素，爲它們添加1像素隨機顏色的輪廓(outline)

$$(sel)// $$函數被許多現代瀏覽器命令行支持，等價於 document.querySelectorAll(sel)
[].forEach.call(NodeLists) // 使用 call 函數將數組遍歷函數 forEach 應到節點元素列表
el.style.outline = "1px solid #333" // 樣式 outline 位於盒模型以外，不影響元素佈局位置
(1<<24) // parseInt("ffffff", 16) == 16777215 == 2^24 - 1 // 1<<24 == 2^24 == 16777216
Math.random()*(1<<24) // 表示一個位於 0 到 16777216 之間的隨機浮點數
~~Math.random()*(1<<24) // ~~ 做用至關於 parseInt 取整
(~~(Math.random()*(1<<24))).toString(16) // 轉換爲一個十六進制-

JavaScript實現異步編程的方法？

回調函數
事件監聽
發佈/訂閱
Promises對象
Async函數[ES7]

web開發中會話跟蹤的方法有哪些

cookie
session
url重寫
隱藏input
ip地址

說幾條寫JavaScript的基本規範？

不要在同一行聲明多個變量
請使用 ===/!==來比較true/false或者數值
使用對象字面量替代new Array這種形式
不要使用全局函數
Switch語句必須帶有default分支
函數不該該有時候有返回值，有時候沒有返回值
If語句必須使用大括號
for-in循環中的變量應該使用var關鍵字明確限定做用域，從而避免做用域污

Javascript如何實現繼承？

構造繼承
原型繼承
實例繼承
拷貝繼承
原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式

function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//繼承了Parent，經過原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//獲得被繼承的屬性
  }

javascript建立對象的幾種方式？

javascript建立對象簡單的說,無非就是使用內置對象或各類自定義對象，固然還能夠用JSON；但寫法有不少種，也能混合使用

對象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

用function來模擬無參的構造函數

function Person(){}
    var person=new Person();//定義一個function，若是使用new"實例化",該function能夠看做是一個Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();

用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性）

function Pet(name,age,hobby){
       this.name=name;//this做用域：當前對象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");
       }
    }
    var maidou =new Pet("麥兜",25,"coding");//實例化、建立對象
    maidou.eat();//調用eat方法

用工廠方式來建立（內置對象）

var wcDog =new Object();
     wcDog.name="旺財";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();

用原型方式來建立

function Dog(){

     }
     Dog.prototype.name="旺財";
     Dog.prototype.eat=function(){
     alert(this.name+"是個吃貨");
     }
     var wangcai =new Dog();
     wangcai.eat();

用混合方式來建立

function Car(name,price){
      this.name=name;
      this.price=price; 
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"，我如今賣"+this.price+"萬元");
      }
    var camry =new Car("凱美瑞",27);
    camry.sell();

null，undefined 的區別？

undefined 表示不存在這個值。
undefined :是一個表示"無"的原始值或者說表示"缺乏值"，就是此處應該有一個值，可是尚未定義。當嘗試讀取時會返回 undefined
例如變量被聲明瞭，但沒有賦值時，就等於undefined
null 表示一個對象被定義了，值爲「空值」
null : 是一個對象(空對象, 沒有任何屬性和方法)
例如做爲函數的參數，表示該函數的參數不是對象；
在驗證null時，必定要使用　=== ，由於 == 沒法分別 null 和　undefined

寫一個通用的事件偵聽器函數

// event(事件)工具集，來源：github.com/markyun
    markyun.Event = {
        // 頁面加載完成後
        readyEvent : function(fn) {
            if (fn==null) {
                fn=document;
            }
            var oldonload = 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.removeEventListener) {
                element.removeEventListener(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) {
            var ev = e || window.event;
            if (!ev) {
                var c = this.getEvent.caller;
                while (c) {
                    ev = c.arguments[0];
                    if (ev && Event == ev.constructor) {
                        break;
                    }
                    c = c.caller;
                }
            }
            return ev;
        }
    };

什麼是閉包（closure），爲何要用它？

閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域
閉包的特性：
- 函數內再嵌套函數
- 內部函數能夠引用外層的參數和變量
- 參數和變量不會被垃圾回收機制回收

javascript 代碼中的"use strict";是什麼意思 ? 使用它區別是什麼？

use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲

如何判斷一個對象是否屬於某個類？

// 使用instanceof （待完善）
   if(a instanceof Person){
       alert('yes');
   }

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

建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型
屬性和方法被加入到 this 引用的對象中
新建立的對象由 this 所引用，而且最後隱式的返回 this

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

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

defer和async、動態建立DOM方式（用得最多）、按需異步載入js

Ajax 是什麼? 如何建立一個Ajax？

ajax的全稱：Asynchronous Javascript And XML

異步傳輸+js+xml
所謂異步，在這裏簡單地解釋就是：向服務器發送請求的時候，咱們沒必要等待結果，而是能夠同時作其餘的事情，等到有告終果它本身會根據設定進行後續操做，與此同時，頁面是不會發生整頁刷新的，提升了用戶體驗
建立XMLHttpRequest對象,也就是建立一個異步調用對象
建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
設置響應HTTP請求狀態變化的函數
發送HTTP請求
獲取異步調用返回的數據
用JavaScript和DOM實現局部刷新

同步和異步的區別?

同步：瀏覽器訪問服務器請求，用戶看獲得頁面刷新，從新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操做
異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容

documen.write和 innerHTML的區別

document.write只能重繪整個頁面
innerHTML能夠重繪頁面的一部分

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

（1）建立新節點
- createDocumentFragment() //建立一個DOM片斷
- createElement() //建立一個具體的元素
- createTextNode() //建立一個文本節點
（2）添加、移除、替換、插入
- appendChild()
- removeChild()
- replaceChild()
- insertBefore() //在已有的子節點前插入一個新的子節點
（3）查找
- getElementsByTagName() //經過標籤名稱
- getElementsByName() // 經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)
- getElementById() //經過元素Id，惟一性

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

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收
setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

漸進加強和優雅降級

漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容

Javascript垃圾回收方法

標記清除（mark and sweep）

這是JavaScript最多見的垃圾回收方式，當變量進入執行環境的時候，好比函數中聲明一個變量，垃圾回收器將其標記爲「進入環境」，當變量離開環境的時候（函數執行結束）將其標記爲「離開環境」

垃圾回收器會在運行的時候給存儲在內存中的全部變量加上標記，而後去掉環境中的變量以及被環境中變量所引用的變量（閉包），在這些完成以後仍存在標記的就是要刪除的變量了

引用計數(reference counting)

在低版本IE中常常會出現內存泄露，不少時候就是由於其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每一個值被使用的次數，當聲明瞭一個變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1，若是該變量的值變成了另一個，則這個值得引用次數減1，當這個值的引用次數變爲0的時候，說明沒有變量在使用，這個值無法被訪問了，所以能夠將其佔用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間

js繼承方式及其優缺點

原型鏈繼承的缺點
- 一是字面量重寫原型會中斷關係，使用引用類型的原型，而且子類型還沒法給超類型傳遞參數。
借用構造函數（類式繼承）
- 借用構造函數雖然解決了剛纔兩種問題，但沒有原型，則複用無從談起。因此咱們須要原型鏈+借用構造函數的模式，這種模式稱爲組合繼承
組合式繼承
- 組合式繼承是比較經常使用的一種繼承方法，其背後的思路是使用原型鏈實現對原型屬性和方法的繼承，而經過借用構造函數來實現對實例屬性的繼承。這樣，既經過在原型上定義方法實現了函數複用，又保證每一個實例都有它本身的屬性。

defer和async

defer並行加載js文件，會按照頁面上script標籤的順序執行async並行加載js文件，下載完成當即執行，不會按照頁面上script標籤的順序執行

用過哪些設計模式？

工廠模式：
- 主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是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');//第二個實例

構造函數模式
- 使用構造函數的方法，即解決了重複實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於
構造函數方法沒有顯示的建立對象 (new Object());
直接將屬性和方法賦值給 this 對象;
沒有 renturn 語句

請解釋一下 JavaScript 的同源策略

概念:同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性

爲何要有同源限制？

咱們舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。
缺點
- 如今網站的JS都會進行壓縮，一些文件用了嚴格模式，而另外一些沒有。這時這些原本是嚴格模式的文件，被 merge後，這個串就到了文件的中間，不只沒有指示嚴格模式，反而在壓縮後浪費了字節

實現一個函數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;
    }

說說嚴格模式的限制

嚴格模式主要有如下限制：
變量必須聲明後再使用
函數的參數不能有同名屬性，不然報錯
不能使用with語句
不能對只讀屬性賦值，不然報錯
不能使用前綴0表示八進制數，不然報錯
不能刪除不可刪除的屬性，不然報錯
不能刪除變量delete prop，會報錯，只能刪除屬性delete global[prop]
eval不會在它的外層做用域引入變量
eval和arguments不能被從新賦值
arguments不會自動反映函數參數的變化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局對象
不能使用fn.caller和fn.arguments獲取函數調用的堆棧
增長了保留字（好比protected、static和interface）

如何刪除一個cookie

將時間設爲當前時間往前一點

var date = new Date();

date.setDate(date.getDate() - 1);//真正的刪除

setDate()方法用於設置一個月的某一天

expires的設置

document.cookie = 'user='+ encodeURIComponent('name')  + ';expires = ' + new Date(0)

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

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

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"));

請解釋什麼是事件代理

事件代理（Event Delegation），又稱之爲事件委託。是 JavaScript 中經常使用綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能

attribute和property的區別是什麼？

attribute是dom元素在文檔中做爲html標籤擁有的屬性；
property就是dom元素在js中做爲對象擁有的屬性。
對於html的標準屬性來講，attribute和property是同步的，是會自動更新的
可是對於自定義的屬性來講，他們是不一樣步的

頁面編碼和被請求的資源編碼若是不一致如何處理？

後端響應頭設置 charset
前端頁面<meta>設置 charset

把<script>放在</body>以前和以後有什麼區別？瀏覽器會如何解析它們？

按照HTML標準，在</body>結束後出現<script>或任何元素的開始標籤，都是解析錯誤
雖然不符合HTML標準，但瀏覽器會自動容錯，使實際效果與寫在</body>以前沒有區別
瀏覽器的容錯機制會忽略<script>以前的</body>，視做<script>仍在 body 體內。省略</body>和</html>閉合標籤符合HTML標準，服務器能夠利用這一標準儘量少輸出內容

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

設置<script>屬性 defer="defer" （腳本將在頁面完成解析時執行）
動態建立 script DOM：document.createElement('script');
XmlHttpRequest 腳本注入
延遲加載工具 LazyLoad

異步加載JS的方式有哪些？

設置<script>屬性 async="async" （一旦腳本可用，則會異步執行）
動態建立 script DOM：document.createElement('script');
XmlHttpRequest 腳本注入
異步加載庫 LABjs
模塊加載器 Sea.js

JavaScript 中，調用函數有哪幾種方式？

方法調用模式 Foo.foo(arg1, arg2);
函數調用模式 foo(arg1, arg2);
構造器調用模式 (new Foo())(arg1, arg2);
call/applay調用模式 Foo.foo.call(that, arg1, arg2);
bind調用模式 Foo.foo.bind(that)(arg1, arg2)();

簡單實現 Function.bind 函數？

if (!Function.prototype.bind) {
    Function.prototype.bind = function(that) {
      var func = this, args = arguments;
      return function() {
        return func.apply(that, Array.prototype.slice.call(args, 1));
      }
    }
  }
  // 只支持 bind 階段的默認參數：
  func.bind(that, arg1, arg2)();

  // 不支持如下調用階段傳入的參數：
  func.bind(that)(arg1, arg2);

列舉一下JavaScript數組和對象有哪些原生方法？

數組：
- arr.concat(arr1, arr2, arrn);
- arr.join(",");
- arr.sort(func);
- arr.pop();
- arr.push(e1, e2, en);
- arr.shift();
- unshift(e1, e2, en);
- arr.reverse();
- arr.slice(start, end);
- arr.splice(index, count, e1, e2, en);
- arr.indexOf(el);
- arr.includes(el); // ES6
對象：
- object.hasOwnProperty(prop);
- object.propertyIsEnumerable(prop);
- object.valueOf();
- object.toString();
- object.toLocaleString();
- Class.prototype.isPropertyOf(object);

Array.splice() 與 Array.splice() 的區別？

slice -- 「讀取」數組指定的元素，不會對原數組進行修改
- 語法：arr.slice(start, end)
- start 指定選取開始位置（含）
- end 指定選取結束位置（不含）

splice
- 「操做」數組指定的元素，會修改原數組，返回被刪除的元素
- 語法：arr.splice(index, count, [insert Elements])
- index 是操做的起始位置
- count = 0 插入元素，count > 0 刪除元素
- [insert Elements] 向數組新插入的元素

JavaScript 對象生命週期的理解？

當建立一個對象時，JavaScript 會自動爲該對象分配適當的內存
垃圾回收器按期掃描對象，並計算引用了該對象的其餘對象的數量
若是被引用數量爲 0，或唯一引用是循環的，那麼該對象的內存便可回收

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

JavaScript 內存泄露指對象在不須要使用它時仍然存在，致使佔用的內存不能使用或回收
未使用 var 聲明的全局變量
閉包函數(Closures)
循環引用(兩個對象相互引用)
控制檯日誌(console.log)
移除存在綁定事件的DOM元素(IE)

上期經典前端面試題（3）現代技術
往期經典深刻理解——URL加載過程

持續更新中……喜歡請點個贊哦~