一 · 大雜燴

[TOC] # 1、JavaScript中如何檢測一個變量是一個String類型？請寫出函數實現 ``` typeof(obj) === "string" typeof obj === "string" obj.constructor === String ``` ## 請用js去除字符串空格？ ### 方法一：使用replace正則匹配的方法 ``` 去除所有空格: str = str.replace(/\s*/g,""); 去除兩頭空格: str = str.replace(/^\s*|\s*$/g,""); 去除左空格： str = str.replace( /^\s*/, “”); 去除右空格： str = str.replace(/(\s*$)/g, ""); str為要去除空格的字符串，實例如下： var str = " 23 23 "; var str2 = str.replace(/\s*/g,""); console.log(str2); // 2323 ``` ### 方法二：使用str.trim()方法 ``` str.trim()局限性：無法去除中間的空格，實例如下： var str = " xiao ming "; var str2 = str.trim(); console.log(str2); //xiao ming 同理，str.trimLeft()，str.trimRight()分別用于去除字符串左右空格。 ``` ### 方法三：使用jquery,$.trim(str)方法 ``` $.trim(str)局限性：無法去除中間的空格，實例如下： var str = " xiao ming "; var str2 = $.trim(str) console.log(str2); // xiao ming ``` # 2、你如何獲取瀏覽器URL中查詢字符串中的參數？測試地址為：http://www.xxxxx.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23 實例如下： ``` function showWindowHref(){ var sHref = window.location.href; var args = sHref.split('?'); if(args[0] == sHref){ return ""; } var arr = args[1].split('&'); var obj = {}; for(var i = 0;i< arr.length;i++){ var arg = arr[i].split('='); obj[arg[0]] = arg[1]; } return obj; } var href = showWindowHref(); // obj console.log(href['name']); // xiaoming ``` # 3、js 字符串操作函數我這里只是列舉了常用的字符串函數，具體使用方法，請參考網址。 * [ ] concat() – 將兩個或多個字符的文本組合起來，返回一個新的字符串。 * [ ] indexOf() – 返回字符串中一個子串第一處出現的索引。如果沒有匹配項，返回 -1 。 * [ ] charAt() – 返回指定位置的字符。 * [ ] lastIndexOf() – 返回字符串中一個子串最后一處出現的索引，如果沒有匹配項，返回 -1 。 * [ ] match() – 檢查一個字符串是否匹配一個正則表達式。 * [ ] substr() 函數 -- 返回從string的startPos位置，長度為length的字符串 * [ ] substring() – 返回字符串的一個子串。傳入參數是起始位置和結束位置。 * [ ] slice() – 提取字符串的一部分，并返回一個新字符串。 * [ ] replace() – 用來查找匹配一個正則表達式的字符串，然后使用新字符串代替匹配的字符串。 * [ ] search() – 執行一個正則表達式匹配查找。如果查找成功，返回字符串中匹配的索引值。否則返回 -1 。 * [ ] split() – 通過將字符串劃分成子串，將一個字符串做成一個字符串數組。 * [ ] length – 返回字符串的長度，所謂字符串的長度是指其包含的字符的個數。 * [ ] toLowerCase() – 將整個字符串轉成小寫字母。 * [ ] toUpperCase() – 將整個字符串轉成大寫字母。 # 4、怎樣添加、移除、移動、復制、創建和查找節點？ ## 1）創建新節點 ``` 　 createDocumentFragment() //創建一個DOM片段　　createElement() //創建一個具體的元素　　createTextNode() //創建一個文本節點 ``` ## 2）添加、移除、替換、插入 ``` 　　appendChild() //添加　　removeChild() //移除　　replaceChild() //替換　　insertBefore() //插入 ``` ## 3）查找 ``` 　　getElementsByTagName() //通過標簽名稱　　getElementsByName() //通過元素的Name屬性的值　　getElementById() //通過元素Id，唯一性 ``` # 5、寫出3個使用this的典型應用 ## 1）在html元素事件屬性中使用，如： ``` <input type=”button” onclick=”showInfo(this);” value=”點擊一下”/> ``` ## 2）構造函數 ``` function Animal(name, color) { 　　this.name = name; 　　this.color = color; } ``` ## 3）input點擊，獲取值 ``` <input type="button" id="text" value="點擊一下" /> <script type="text/javascript"> var btn = document.getElementById("text"); btn.onclick = function() { alert(this.value); //此處的this是按鈕元素 } </script> ``` ## 4）apply()/call()求數組最值 ``` var numbers = [5, 458 , 120 , -215 ]; var maxInNumbers = Math.max.apply(this, numbers); console.log(maxInNumbers); // 458 var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); console.log(maxInNumbers); // 458 ``` # 6、比較typeof與instanceof？ * 相同點：JavaScript 中 typeof 和 instanceof 常用來判斷一個變量是否為空，或者是什么類型的。 * typeof的定義和用法：返回值是一個字符串，用來說明變量的數據類型。 ## 細節： > 1）typeof 一般只能返回如下幾個結果：number,boolean,string,function,object,undefined。 > 2）typeof 來獲取一個變量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因為如果 a 不存在（未聲明）則會出錯。 > 3）對于 Array,Null 等特殊對象使用 typeof 一律返回 object，這正是 typeof 的局限性。 > * Instanceof定義和用法：instanceof 用于判斷一個變量是否屬于某個對象的實例。 ### 實例演示： ``` a instanceof b?alert("true"):alert("false"); //a是b的實例？真:假 var a = new Array(); alert(a instanceof Array); // true alert(a instanceof Object) // true ``` 如上，會返回 true，同時 alert(a instanceof Object) 也會返回 true;這是因為 Array 是 object 的子類。 ``` function test(){}; var a = new test(); alert(a instanceof test) // true ``` 細節，如下，得到的結果為‘N’,這里的 instanceof 測試的 object 是指 js 語法中的 object，不是指 dom 模型對象。 ``` if (window instanceof Object){ alert('Y')} else { alert('N');} // 'N' ``` # 7、如何理解閉包？ ## 1）定義和用法 > 當一個函數的返回值是另外一個函數，而返回的那個函數如果調用了其父函數內部的其它變量，如果返回的這個函數在外部被執行，就產生了閉包。 ## 2）表現形式 > 使函數外部能夠調用函數內部定義的變量。 ## 3）實例如下： (1)、根據作用域鏈的規則，底層作用域沒有聲明的變量，會向上一級找，找到就返回，沒找到就一直找，直到window的變量，沒有就返回undefined。這里明顯count 是函數內部的flag2 的那個count 。 ``` var count=10; //全局作用域標記為flag1 function add(){ var count=0; //函數全局作用域標記為flag2 return function(){ count+=1; //函數的內部作用域 alert(count); } } var s = add() s();//輸出1 s();//輸出2 ``` ## 4）變量的作用域要理解閉包，首先必須理解Javascript特殊的變量作用域。變量的作用域分類：全局變量和局部變量。 ### 特點： > （1）函數內部可以讀取函數外部的全局變量；在函數外部無法讀取函數內的局部變量。 > （2）函數內部聲明變量的時候，一定要使用var命令。如果不用的話，你實際上聲明了一個全局變量！ ## 5）使用閉包的注意點 1. 濫用閉包，會造成內存泄漏：由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。 2. 會改變父函數內部變量的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數內部變量的值。 # 8、什么是跨域？跨域請求資源的方法有哪些？ ## 1）什么是跨域？由于瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。存在跨域的情況：網絡協議不同，如http協議訪問https協議。端口不同，如80端口訪問8080端口。域名不同，如qianduanblog.com訪問baidu.com。子域名不同，如abc.qianduanblog.com訪問def.qianduanblog.com。域名和域名對應ip,如www.a.com訪問20.205.28.90. ## 2）跨域請求資源的方法： ### (1)、porxy代理定義和用法：proxy代理用于將請求發送給后臺服務器，通過服務器來發送請求，然后將請求的結果傳遞給前端。實現方法：通過nginx代理；注意點：1、如果你代理的是https協議的請求，那么你的proxy首先需要信任該證書（尤其是自定義證書）或者忽略證書檢查，否則你的請求無法成功。 ### (2)、CORS 【Cross-Origin Resource Sharing】定義和用法：是現代瀏覽器支持跨域資源請求的一種最常用的方式。使用方法：一般需要后端人員在處理請求數據的時候，添加允許跨域的相關操作。如下： ``` res.writeHead(200, { "Content-Type": "text/html; charset=UTF-8", "Access-Control-Allow-Origin":'http://localhost', 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', 'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type' }); ``` ## (3)、jsonp ### 定義和用法 > 通過動態插入一個script標簽。瀏覽器對script的資源引用沒有同源限制，同時資源加載到頁面后會立即執行（沒有阻塞的情況下）。 ### 特點 > 通過情況下，通過動態創建script來讀取他域的動態資源，獲取的數據一般為json格式。實例如下： ``` <script> function testjsonp(data) { console.log(data.name); // 獲取返回的結果 } </script> <script> var _script = document.createElement('script'); _script.type = "text/javascript"; _script.src = "http://localhost:8888/jsonp?callback=testjsonp"; document.head.appendChild(_script); </script> ``` ### 缺點：　　1、這種方式無法發送post請求（這里）　　2、另外要確定jsonp的請求是否失敗并不容易，大多數框架的實現都是結合超時時間來判定。 # 9、談談垃圾回收機制方式及內存管理 ## 回收機制方式 ### 1）定義和用法垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程中使用的內存。 ### 2）原理垃圾收集器會定期（周期性）找出那些不在繼續使用的變量，然后釋放其內存。但是這個過程不是實時的，因為其開銷比較大，所以垃圾回收器會按照固定的時間間隔周期性的執行。 ### 3）實例如下： ``` function fn1() { var obj = {name: 'hanzichi', age: 10}; } function fn2() { var obj = {name:'hanzichi', age: 10}; return obj; } var a = fn1(); var b = fn2(); ``` fn1中定義的obj為局部變量，而當調用結束后，出了fn1的環境，那么該塊內存會被js引擎中的垃圾回收器自動釋放；在fn2被調用的過程中，返回的對象被全局變量b所指向，所以該塊內存并不會被釋放。 ### 4）垃圾回收策略：標記清除(較為常用)和引用計數。 #### 標記清除： * 　　定義和用法：當變量進入環境時，將變量標記"進入環境"，當變量離開環境時，標記為："離開環境"。某一個時刻，垃圾回收器會過濾掉環境中的變量，以及被環境變量引用的變量，剩下的就是被視為準備回收的變量。到目前為止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或類似的策略，只不過垃圾收集的時間間隔互不相同。 #### 引用計數： 1. 　　定義和用法：引用計數是跟蹤記錄每個值被引用的次數。 2. 　　基本原理：就是變量的引用次數，被引用一次則加1，當這個引用計數為0時，被視為準備回收的對象。 ## 內存管理 ### 1、什么時候觸發垃圾回收？垃圾回收器周期性運行，如果分配的內存非常多，那么回收工作也會很艱巨，確定垃圾回收時間間隔就變成了一個值得思考的問題。 IE6的垃圾回收是根據內存分配量運行的，當環境中的變量，對象，字符串達到一定數量時觸發垃圾回收。垃圾回收器一直處于工作狀態，嚴重影響瀏覽器性能。 IE7中，垃圾回收器會根據內存分配量與程序占用內存的比例進行動態調整，開始回收工作。 ### 2、合理的GC方案 (1)、遍歷所有可訪問的對象; (2)、回收已不可訪問的對象。 ### 3、GC缺陷 (1)、停止響應其他操作； ### 4、GC優化策略 (1)、分代回收（Generation GC）; (2)、增量GC # 10、開發過程中遇到的內存泄露情況，如何解決的？ ## 1）定義和用法：內存泄露是指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束。C#和Java等語言采用了自動垃圾回收方法管理內存，幾乎不會發生內存泄露。我們知道，瀏覽器中也是采用自動垃圾回收方法管理內存，但由于瀏覽器垃圾回收方法有bug，會產生內存泄露。 ## 2）內存泄露的幾種情況: ### (1)、當頁面中元素被移除或替換時，若元素綁定的事件仍沒被移除，在IE中不會作出恰當處理，此時要先手工移除事件，不然會存在內存泄露。實例如下: ``` <div id="myDiv"> <input type="button" value="Click me" id="myBtn"> </div> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ document.getElementById("myDiv").innerHTML = "Processing..."; } </script> ``` 解決方法如下： ``` <div id="myDiv"> <input type="button" value="Click me" id="myBtn"> </div> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ btn.onclick = null; document.getElementById("myDiv").innerHTML = "Processing..."; } </script> ``` ### (2)、由于是函數內定義函數，并且內部函數--事件回調的引用外暴了，形成了閉包。閉包可以維持函數內局部變量，使其得不到釋放。實例如下： ``` function bindEvent(){ var obj=document.createElement("XXX"); obj.onclick=function(){ //Even if it's a empty function } } ``` 解決方法如下： ``` function bindEvent(){ var obj=document.createElement("XXX"); obj.onclick=function(){ //Even if it's a empty function } obj=null; } ``` # 11、javascript面向對象中繼承實現？ ## 面向對象的基本特征有：封閉、繼承、多態。 ## 在JavaScript中實現繼承的方法： 1）原型鏈（prototype chaining） 2）call()/apply() 3）混合方式(prototype和call()/apply()結合) 4）對象冒充 ## 繼承的方法如下： ### （1）prototype原型鏈方式： ``` function teacher(name){ this.name = name; } teacher.prototype.sayName = function(){ console.log("name is "+this.name); } var teacher1 = new teacher("xiaoming"); teacher1.sayName(); function student(name){ this.name = name; } student.prototype = new teacher() var student1 = new student("xiaolan"); student1.sayName(); // name is xiaoming // name is xiaolan ``` ### （2）call()/apply()方法 ``` function teacher(name,age){ this.name = name; this.age = age; this.sayhi = function(){ alert('name:'+name+", age:"+age); } } function student(){ var args = arguments; teacher.call(this,args[0],args[1]); // teacher.apply(this,arguments); } var teacher1 = new teacher('xiaoming',23); teacher1.sayhi(); var student1 = new student('xiaolan',12); student1.sayhi(); // alert: name:xiaoming, age:23 // alert: name:xiaolan, age:12 ``` ### （3）混合方法【prototype,call/apply】 ``` function teacher(name,age){ this.name = name; this.age = age; } teacher.prototype.sayName = function(){ console.log('name:'+this.name); } teacher.prototype.sayAge = function(){ console.log('age:'+this.age); } function student(){ var args = arguments; teacher.call(this,args[0],args[1]); } student.prototype = new teacher(); var student1 = new student('xiaolin',23); student1.sayName(); student1.sayAge(); // name:xiaolin // age:23 ``` ### （4）對象冒充 ``` function Person(name,age){ this.name = name; this.age = age; this.show = function(){ console.log(this.name+", "+this.age); } } function Student(name,age){ this.student = Person; //將Person類的構造函數賦值給this.student this.student(name,age); //js中實際上是通過對象冒充來實現繼承的 delete this.student; //移除對Person的引用 } var s = new Student("小明",17); s.show(); var p = new Person("小花",18); p.show(); // 小明, 17 // 小花, 18 ```