js中interview知識點梳理

這裡寫連結內容一、JavaScript 的 typeof 回傳哪些資料型別？ 首先，javascript的資料型別分兩類：原始型別、引用型別 ，希望能幫助大家。

原始類型：null、undefined、number、string、Boolean
引用類型：Object、symbol(ES6)
(至於原始類型與引用類型的區別，可以見自己的一篇部落格文章：Js基本語法、變數、資料型別)
然後，typeof這個運算子可以判斷出所有的原始型別。 typeof 傳回七種可能的值：「number」、「string」、「boolean」、「object」、」symbol」、「function」和「undefined」。

二、請寫出以下運算結果

alert(typeof null); //object 
alert(typeof undefined);//undefined 
alert(typeof NaN);//number 
alert(NaN == undefined);//false 
alert(NaN == NaN);//false 
var str = “123abc”; 
alert(typeof str++); 
alert(str);//string

三、為什麼還有instanceof這個運算子？

typeof 是一個一元運算，放在一個運算數之前，運算數可以是任意型別。在使用 typeof 運算子時採用引用類型儲存值會出現一個問題，無論引用的是什麼類型的對象，它都會返回 “object”。對於 Array,Null 等特殊物件使用 typeof 一律傳回 object，這正是 typeof 的限制。

instanceof 用來判斷一個變數是否某個物件的實例#，

如 ：
 var a=new Array();
 alert(a instanceof Array); 會回傳 true，
 同時，
  alert(a instanceof Object) 也會回傳 true;

再如：
 function test(){};
 var a=new test();
 alert(a instanceof test); 會回傳true

另外，更重的一點是 instanceof 可以在繼承關係中用來判斷一個實例是否屬於它的父型別。例如：

function Aoo(){} 
function Foo(){} 
Foo.prototype = new Aoo();//JavaScript 原型继承var foo = new Foo(); 
console.log(foo instanceof Foo)//true console.log(foo instanceof Aoo)//true

上面的程式碼中是判斷了一層繼承關係中的父類，在多層繼承關係中，instanceof 運算子同樣適用。

console.log(Object instanceof Object);//true console.log(Function instanceof Function);//true console.log(Number instanceof Number);//false console.log(String instanceof String);//false console.log(Function instanceof Object);//true console.log(Foo instanceof Function);//true console.log(Foo instanceof Foo);//false

看了上面的程式碼是不是又暈頭轉向了？為什麼 Object 和 Function instanceof 自己等於 true，而其他類別 instanceof 本身卻不等於 true 呢？如何解釋？要從根本上了解 instanceof 的奧秘，需要從兩個方面著手：
1，語言規範中是如何定義這個運算符的。
2，JavaScript 原型繼承機制。
JavaScript instanceof 運算子程式碼:

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
 var O = R.prototype;// 取 R 的显示原型
 L = L.__proto__;// 取 L 的隐式原型
 while (true) { 
   if (L === null) 
     return false; 
   if (O === L)// 这里重点：当 O 严格等于 L 时，返回 true 
     return true; 
   L = L.__proto__; 
 } 
}

至於instanceof的複雜用法，可以參考以下連結：
JavaScript instanceof 運算子深入剖析

#三、範例至少3 種強制型別轉換與2 種隱式型別轉換?

##可以參考自己的部落格文章：JS資料型別轉換

1. 強制型別轉換： 明確調用內建函數，強制把一種類型的值轉換成另一種類型。強制型別轉換主要有：Boolean、Number、String、parseInt、parseFloat

2. #隱含型別轉換： 在使用算術運算子時，運算子兩邊的資料型別可以是任意的，比如，一個字串可以和數字相加。之所以不同的資料型別之間可以做運算，是因為 JavaScript 引擎在運算之前會悄悄的把他們進行了隱式型別轉換。隱式型別轉換主要有：+、–、==、!

五、JavaScript 的事件流模型都有什麼？

事件流描述的是從頁面中接收事件的順序。 DOM 結構是樹狀結構，當頁面中的某一個元素觸發了某個一個事件，事件會從最頂層的window 物件開始，向下傳播到目標元素，途徑的祖先節點都會觸發對應的事件，如果當前節點的該事件綁定了事件處理函數的話，則會執行該函數當事件達到目標元素並執行綁定函數（如果有綁定的話）後，事件又會向上傳播到window 元素，途徑的祖先節點都會觸發對應的事件

事件流包含三個階段：

事件捕捉階段

處於目標階段

<br/>

 事件冒泡階段

#事件擷取階段：事件開始由頂層物件觸發，然後逐級向下傳播，直到目標的元素；

處於目標階段：處在綁定事件的元素上；
事件冒泡階段：事件由特定的元素先接收，然後逐級向上傳播，直到不具體的元素；

#六、

BOM 物件有哪些，列舉window 物件？

1、window對象，是JS的最頂層對象，其他的BOM對像都是window對象的屬性；

2、document對象，文檔對象；

3、location對象，瀏覽器目前URL資訊；

4、navigator對象，瀏覽器本身資訊；

5、screen對象，客戶端螢幕資訊；

6、history對象，瀏覽器存取歷史資訊；

七、請簡述AJAX 及基本步驟？

參考我的部落格文章：Ajax

#參考答案：

簡述 AJAX：AJAX即「Asynchronous Javascript And XML」（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用程式的網頁開發技術。透過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某個部分進行更新。

AJAX 基本步驟：

初始化ajax物件
連接位址，準備資料
傳送請求
接收資料（正在接收，尚未完成）
接收資料完成
//初始化ajax物件
var xhr = new XMLHttpRequest();
//連接位址，準備資料
xhr.open(“方式”,”位址”,是否為非同步);
//接收資料完成觸發的事件
xhr.onload =function(){}
//傳送資料
xhr.send();

八、HTTP狀態訊息200 302 304 403 404 500 分別表示什麼？

200：請求已成功，請求所希望的回應頭或資料體將隨此回應傳回。
302：請求的資源暫時從不同的 URI 回應請求。由於這樣的重定向是暫時的，客戶端應繼續向原有位址發送以後的請求。只有在 Cache-Control 或 Expires 中進行了指定的情況下，這個回應才是可快取的。
304：如果客戶端發送了一個帶有條件的GET 請求且該請求已被允許，而文檔的內容（自上次訪問以來或根據請求的條件）並沒有改變，則伺服器應返回這個狀態碼。 304 回應禁止包含訊息體，因此始終以訊息頭後的第一個空行結尾。
403：伺服器已經理解請求，但是拒絕執行它。
404：請求失敗，請求所希望得到的資源未被在伺服器上發現。
500：伺服器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。一般來說，這個問題都會在伺服器端的原始碼出現錯誤時出現。

九、同步和非同步的區別?

首先同步異步於阻塞非阻塞並沒有關係。同步異步主要是事情做完以後，如何進行處理、或者說關注的是一種訊息通訊機制。

同步非同步可以說是對被請求者來說的，被請求者使用什麼方式來告知處理結果。

同步的情況下，是由處理訊息者自己去等待訊息是否被觸發；
而異步的情況下是由觸發機制來通知處理訊息者；

阻塞非阻塞，主要是對於請求者而言的。
阻塞：發出請求等待結果返回，然後再處理後續的事情；
非阻塞：發出請求不等待結果返回，可以接著做後續的事情；

C、GET和POST的差別，何時使用POST？

GET：一般用於查詢數據，使用URL傳遞參數，由於瀏覽器對網址列長度有限制，所以對使用get方式所傳送訊息的數量有限制，同時瀏覽器會記錄（歷史記錄，快取）中會保留請求地址的信息，包括地址後面的資料。 get 只能傳送普通格式（URL 編碼格式）的資料。

POST：一般用於向伺服器發送數據，對所發送的數據的大小理論上是沒有限制，瀏覽器會快取記錄地址，但是不會記錄 post 提交的數據。 post 可以傳送純文字、URL編碼格式、二進位格式的字串，形式多樣。

在以下情況中，請使用POST 請求：

以提交為目的的請求（類似語意化，get 表示請求，post 表示提交）；
發送私密類別資料（使用者名稱、密碼）（因為瀏覽器快取記錄特性）；
向伺服器發送大量資料（資料大小限制差異）；
上傳檔案圖片時（資料類型差異）；

#十一、 AJAX 的限制?

1、AJAX 不支援瀏覽器back 按鈕。
2、安全性問題 AJAX 揭露了與伺服器互動的細節。
3、對搜尋引擎的支援比較弱。不會執行你的 JS 腳本，只會操作你的網頁原始碼；
4、跨網域請求有一定限制。解決方式：jsonp;

十二、new 運算子具體做了什麼?

1、建立一個新物件；
2、把函數中上下文（作用域）物件this指向該物件；
3、執行程式碼，透過this為新物件新增屬性或方法；
4、回傳物件；

十三、null和undefined 的差別？

null： null表示空值，轉為數值時為0;

undefined：undefined表示」缺少值”，就是這裡應該有一個值，但是還沒有定義。

變數被宣告了，但沒有賦值時，就等於undefined。
物件沒有賦值的屬性，該屬性的值為undefined。
函數沒有傳回值時，預設回傳undefined。

詳見我的部落格文章：JS判斷資料型別、null與undefined的差別？

十四、JavaScript 原型，原型鏈 ? 有什麼特色？作用域鏈？

作用域链的理解：
   当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。
    作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。

JavaScript 原型： 每创建一个函数，函数上都有一个属性为 prototype，它的值是一个对象。 这个对象的作用在于当使用函数创建实例的时候，那么这些实例都会共享原型上的属性和方法。

原型链： 在 JavaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接（proto）。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向）。这种一级一级的链结构就称为原型链（prototype chain）。 当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止;到查找到达原型链的顶部（Object.prototype），仍然没有找到指定的属性，就会返回 undefined。

十五、JavaScript代理
当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

比如我们需要向一个ul中动态添加很多个li，需要遍历li逐个添加点击事件

<ul id=&#39;list&#39;></ul> var count = 100; var ulList = document.getElementById("list"); //动态构建节点
 for(var i = count;i--;){  var liDom = document.createElement(&#39;li&#39;);
  ulList.appendChild(liDom);
 } //绑定点击事件
 var liNode = ulList.getElementByTagName("li"); for(var i=0, l = liNodes.length; i < l; i++){
  liNode[i].onClick = function(){
   //li点击事件
  }
 }

众所周知，DOM操作是十分消耗性能的。所以重复的事件绑定简直是性能杀手。而事件代理的核心思想，就是通过尽量少的绑定，去监听尽量多的事件。如何做呢？答案是利用事件冒泡机制,对其父节点ul进行事件绑定（Event Bubble),然后通过event.target来判断是哪个节点触发的事件，从而减少很多EventHandler的绑定。

“` 
var count = 100; 
var ulList = document.getElementById(“list”); 
//动态构建节点 
for(var i = count;i–;){ 

 var liDom = document.createElement(‘li’); 

 ulList.appendChild(liDom); 
} 
//绑定点击事件 
var liNode = ulList.getElementByTagName(“li”); 
liNode.onClick = function(e){ 

 if(e.target && e.target.nodeName.toUpperCase == “LI”) { 

  // li点击事件 

 } 
}

十六、如何理解闭包？
闭包

十七、call和apply的作用是什么？区别是什么？
call和apply的功能基本相同，都是实现继承或者转换对象指针的作用；
唯一不通的是前者参数是罗列出来的，后者是存到数组中的；
call或apply功能就是实现继承的；与面向对象的继承extends功能相似；但写法不同；
语法：
.call(对象[,参数1，参数2,….]);//此地参数是指的是对象的参数，非方法的参数；
.apply(对象,参数数组)//参数数组的形式:[参数1，参数2,……]

十八、JavaScript 如何实现继承？

(1)构造继承 (2)原型继承 (3)实例继承 (4)拷贝继承
 //原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。 function Parent()
 {  
     this.name = ‘song’; } function Child() {
     this.age = 28; } Child.prototype = new Parent(); //通过原型,继承了Parent var demo = new Child(); alert(demo.age); alert(demo.name); //得到被继承的属性

十九、JavaScript 有哪几种创建对象的方式？

javascript創建對象簡單的說,無非就是使用內建對像或各種自訂對象，當然還可以用JSON；但寫法有很多種，也能混合使用。 //
 (1)物件字面量的方式
 person={firstname:”Mark”,lastname:”Yun”,age:25,eyecolor:”black”};
 (2)用function來模擬無參的建構子 function Person(){} var person = new Person();
 //定義一個function，如果使用new”實例化”,該function可以看成是一個Class person.name =
 「Xiaosong」; person.age = “23”; person.work = function() {
      alert(“Hello ” + person.name); } person.work(); (3)用function來模擬參構函數來實作（用this關鍵字定義建構的上下文屬性） function
 Person(name,age,hobby) {  
     this.name = name; //this作用域：目前物件
     this.age = age;  
     this.work = work;  
     this.info = function() {  
#          alert(「我叫」 + this.name + “，今年」 + this.age + 「歲，是個」 + this.work);  
## } } var Xiaosong = new Person(“WooKong”,23,”程式猿”); //實例化、建立物件Xiaosong.info(); //呼叫info()方法(4)用工廠方式來建立（內建物件） var jsCreater = new
 Object(); jsCreater.name = “Brendan Eich”; //JavaScript的發明者
 jsCreater.work = “JavaScript”; jsCreater.info = function() {  
alert(“我是”+this.work+”的發明者”+this.name); } jsCreater.info(); (5)用原型方式來創建function Standard(){} Standard.prototype.name =
 “ECMAScript”; Standard.prototype.event = function() {  
     alert(this.name+」是腳本語言標準規範」); } var jiaoben = new Standard(); jiaoben.event(); (6)用混合方式來建立 function iPhone(name,event) {
      this.name = name;
      this.event = event; } iPhone.prototype.sell = function() {  
alert(“我是”+this.name+”，我是iPhone5s的”+this.event+”~ haha​​!”); } var SE = new iPhone(“iPhone SE”,”官方翻新機”); SE.sell ();

二十、JavaScript 中，有一個函數，執行物件尋找時，永遠不會去找原型，這個函數是哪一個？

hasOwnProperty // JavaScript 中 hasOwnProperty
 函數方法是傳回一個布林值，指出一個物件是否具有指定名稱的屬性。此方法無法檢查該物件的原型鏈中是否具有該屬性；該屬性必須是物件本身的成員。
 //
 使用方法：object.hasOwnProperty(proName)其中參數object是必選項，一個物件的實例。 proName是必選項，一個屬性名稱的字串值。
 // 如果 object 有指定名稱的屬性，那麼JavaScript中hasOwnProperty函數方法傳回 true，反之則回傳
 false。

二十一、Ajax 是什麼？如何創建一個 Ajax ？

ajax的全名為：Asynchronous Javascript And XML，非同步傳輸+js+xml。
所謂異步，在這裡簡單地解釋就是：向伺服器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行後續操作，與此同時，頁面是不會發生整頁刷新的，提高了使用者體驗。
 (1)建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件
 (2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證資訊
  (3)設定回應HTTP請求狀態變化的函數
  (4)取得非同步呼叫返回的資料  
  (5)使用JavaScript和DOM實現局部刷新

以上是js中interview知識點梳理的詳細內容。更多資訊請關注PHP中文網其他相關文章！