js 整理

biubiubiuer發表於2019-03-18
JS
什麼是原型鏈？怎麼實現繼承？
call、apply、bind的區別?
什麼是作用域鏈？什麼是閉包？詞法作用域？
ajax和jsonp？jsonp為什麼只支援get？
基本資料型別？堆疊區別？null和undefined
js怎麼實現非同步？
eventloop？js引擎執行緒執行過程？
釋出/訂閱者和觀察者區別？
base64網路傳輸？ 網路傳輸只能傳輸可列印字元
持續動畫？ setTimeout、setInterval、window.requestAnimationFrame 
js多正規化語言？
防抖，節流？
事件委託？
迴圈  for...in   Object.keys  for...of  Object.getPropertyNames
模組化、元件化?
this?
類陣列？轉陣列？
判斷陣列，陣列去重？instanceof與isArray  Object.prototype.toString().call([]) ？
instanceof與isArray判斷物件是否為陣列？
localStorage、cookie、sessionStorage
深拷貝、淺拷貝？
垃圾回收機制？
js元件化、模組化？
formData和原生的ajax有什麼區別？Content-type
記憶體洩漏？
in 和hasOwnProperty的區別？
https://www.cnblogs.com/ziwuge/archive/2011/09/27/2193385.html
複製程式碼

深拷貝

    黑科技  JSON.parse(JSON.stringify(obj))
    遞迴拷貝
    Object.create(oldObj)
複製程式碼

原型鏈

  每一個物件都會在內部初始化一個屬性，就是（prototype）原型。
  當訪問一個物件是否存在屬性或方法時，優先在物件自身尋找該屬性，如果有
  就使用自身的屬性或方法；沒有就在建立這個物件的建構函式的原型上向上查
  找，以此類推找到object.prototype物件，還沒找到就返回undefined；
複製程式碼

null 和 undefined

    null是一個空物件，沒有任何屬性和方法
    undefined是未定義，此處應該有個值，未賦值
複製程式碼

js是多正規化語言

    命令式       基本的邏輯控制、迭代語句等。
    函式式       scope Chain (作用域鏈)
    物件導向     Prototype Chain（原型鏈）
複製程式碼

閉包

  1. 可以讀取自身函式外部的變數（沿著作用域鏈尋找）
  2. 讓這些外部變數始終儲存在記憶體中

定時器

    實際上要等到當前指令碼的所有同步任務執行完
複製程式碼

EventLoop 執行棧執行順序。

    巨集任務：script整體   setTimeout  setImmediate I/O UI
    微任務：process.nexTick  promise.then  async
    script(主程式程式碼)—>process.nextTick—>Promises...——> async  ——> setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering
複製程式碼

類陣列

    見類陣列物件有arguments物件、通過Node.childNodes得到的NodeList物件、通過document.getElementsBy...得到的HTMLCollection物件、element.attributes得到的NamedNodeMap物件等。
    Array.prototype.sort.call(arrLikeObj);  劫持應用陣列方法
    Array.prototype.slice.call(arrLikeObj);//轉化為陣列
    Array.from(arrLikeObj);//es6轉化為陣列
    
    Object.prototype.toString().call()  判斷是否是陣列
複製程式碼

localStorage

    localStorage.setItem('myCat', 'Tom');
    localStorage.getItem('myCat');
    localStorage.removeItem('myCat');
    localStorage.clear();// 移除所有  
複製程式碼

formData和原生的ajax有什麼區別

    form的Content-type預設值：Content-type：application/x-www-form-urlencoded
    ajax預設值Content-Type是text/plain;charset=UTF-8。
複製程式碼

jsonp為什麼只支援get

JSONP的最基本的原理是：動態新增一個<script>標籤，而script標籤的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協議無關了。
可以說jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的，因為他的原理實際上就是 使用js的script標籤 進行傳參，那麼必然是get方式的了，和瀏覽器中敲入一個url一樣
複製程式碼

垃圾回收原理淺析

標記清除 標記變數進入環境，離開環境。
引用計數 釋放引用次數為0的值所佔的記憶體。
複製程式碼

陣列去重

// 最簡單去重
function uniq(array){
var temp = []; //一個新的臨時陣列
for(var i = 0; i < array.length; i++){
    if(temp.indexOf(array[i]) == -1){
        temp.push(array[i]);
    }
}
return temp;
}

var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));

// 排序相鄰去重
/*
* 給傳入陣列排序，排序後相同值相鄰，
* 然後遍歷時,新陣列只加入不與前一值重複的值。
* 會打亂原來陣列的順序
* */
function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
        if( array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

// set去重
function dedupe(array){
 return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]
複製程式碼

ajax

 過程：

(1)建立一個非同步呼叫物件XMLHttpRequest物件.var xhr=new XMLHttpRequest();0
(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證資訊;1
(3)設定響應HTTP請求狀態變化的函式.xhr.open('post','1.txt',true);2
(4)傳送HTTP請求.  xhr.send();3
(5)獲取非同步呼叫返回的資料。4
複製程式碼
    xhr.onreadystatechange=function(){
        if (xhr.readyState==4) {
            if (xhr.status==200) {
               alert(xhr.responseText); 
           }else{
            alert("出錯了:"+xhr.status);
           }
        };
    }

    readyState 屬性表示Ajax請求的當前狀態。它的值用數字代表。
    0 代表未初始化。 還沒有呼叫 open 方法
    1 代表正在載入。 open 方法已被呼叫，但 send 方法還沒有被呼叫
    2 代表已載入完畢。send 已被呼叫。請求已經開始
    3 代表互動中。伺服器正在傳送響應
    4 代表完成。響應傳送完畢
複製程式碼

this

js 整理

//this物件是在執行時基於函式的執行環境繫結的：在全域性函式中，this等於window，而當函式被作為某個物件呼叫時，this等於那個物件。不過，匿名函式具有全域性性，因此this物件同常指向window;

var name = "The Window";
var object = {
&emsp;&emsp;name : "My Object",
&emsp;&emsp;getNameFunc : function(){
&emsp;&emsp;&emsp;&emsp;return function(){
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;return this.name;
&emsp;&emsp;&emsp;&emsp;&emsp;};
&emsp;&emsp;&emsp;}
};
alert(object.getNameFunc()());
複製程式碼

型別轉換

物件在轉換型別的時候，會呼叫內建的 [[ToPrimitive]] 函式，對於該函式來說，演算法邏輯一般來說如下：

  1. 如果已經是原始型別了，那就不需要轉換了
  2. 呼叫 x.valueOf()，如果轉換為基礎型別，就返回轉換的值
  3. 呼叫 x.toString()，如果轉換為基礎型別，就返回轉換的值
  4. 如果都沒有返回原始型別，就會報錯

模組化

優點

  1. 解決命名衝突
  2. 提供複用性
  3. 提高程式碼可維護性

手段：

  1. 立即執行函式
  2. AMD CMD
  3. CommonJS
  4. ES Moudle

new 實現

function create() {
  let obj = {}
  let Con = [].shift.call(arguments)
  obj.__proto__ = Con.prototype
  let result = Con.apply(obj, arguments)
  return result instanceof Object ? result : obj
}
複製程式碼

相關文章