JavaScript高頻面試試題2——2020.12.04

 function Dog() {
            this.wow = function() {
                alert('wow');
            }
            this.yelp = function() {
                this.wow();
            }
        }
    <span class="token keyword">function</span> <span class="token function">MadDog</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        Dog<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> _this <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">yelp</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                _this<span class="token punctuation">.</span><span class="token function">wow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

9.使用正規表示式驗證郵箱
xxx@xx.xx

/^[0-9a-zA-Z]+@[0-9a-zA-Z]+.[a-zA-Z]+$/

10.請用js去除字串空格 var str = “fdf er re545 6565 2fdfd”

var arr = str.split(’ ‘);
var str1 = arr.join(’’);
console.log(str1);

11.判斷字串是否是這樣組成的。第一個字元必須是字母，後面可以是字母、數字、下劃線，總長度5-20.
用正則，正規表示式為：

var reg = /^[a-zA-Z]\w{4,19}$/

12.閉包的概念、特點以及使用規則

閉包（closure）指有權訪問另一個函式作用域中變數的函式。簡單理解就是 ，一個作用域可以訪問另外一個函式內部的區域性變數。

特點：
1.函式巢狀函式
2.函式內部可以應用外部的引數和變數
3.引數和變數不會被垃圾回收機制回收

閉包中使用的變數會一直儲存在記憶體中，類似全域性變數 ，避免全域性汙染，可以解決全域性變數的問題。

13.用閉包方式完成下面程式碼的修改，使得屬性name,id外界不可見
User = function(){}
User.prototype={
id:"",
Name:"",
getId:function(){return this.id},
setId:function(){this.id = id},
getName:function(){return this.name},
setNmae:function(){this.name = name}
}

var User = function() {
            var id = "id";
            var name = "name";
            this.__proto__ = {
                getId: function() {
                    return id;
                },
                setId: function(_id) {
                    id = _id;
                },
                getName: function() {
                    return name;
                },
                setName: function(_name) {
                    name = _name;
                }
            }
        }
        var u = new User();
        u.setId("007");
        u.setName("tom");
        console.log(u.name, u.getName()); //undefined,tom

 

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

14.建立ajax的過程

 function ajax(type, url, callback, params) {
            //1.建立請求物件
            var xhr = new XMLHttpRequest;
            //2.發生請求
            if (type == 'get' || type == 'GET' && params != undefined) {
                xhr.open(type, url + '?' + params, true);
            } else {
                xhr.open();
            }
            //3.獲取響應資料
            xhr.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
                    callback(this.responseText)
                }
            };
            //4.發生資料
            if (type == 'post' || type == 'POST' && params != undefined) {
                xhr.send(type, params);
            } else {
                xhr.send(null);
            }
        }

 

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

15.ajax請求的時候get和post方式的區別，什麼時候用post

1、get請求會將引數跟在URL後進行傳遞，而POST請求則是作為HTTP訊息的實體內容傳送給WEB伺服器。當然在Ajax請求中，這種區別對使用者是不可見的
2、get傳輸資料容量小，不安全，post傳輸資料內容大，更加安全；當向伺服器發生一些資料的時候選擇post比較安全

16.ajax請求時，如何解釋json資料

如果是字串形式的json：eval("("+ajax.response+")")
如果是本地的json檔案：JSON.parse(data)

17.同步非同步的區別？

同步程式碼會依次執行，執行完這一行，執行下一行 非同步程式碼執行不按順序，‘跳過’執行，待其他某些程式碼執行完後，再來執行
非同步程式碼會在同步程式碼之後執行，同步執行完之後才會執行非同步

18.常見的http狀態碼

1xx 代表請求已接受
2xx 代表請求已成功被伺服器接收、理解並接受
3xx 代表客戶端需要採取進一步的操作才能完成請求
4xx 表示請求錯誤
5xx 代表了伺服器在處理請求的過程中又錯誤或者異常狀態發生

19.eval的作用是

eval函式是強大的數碼轉換引擎,字串經eval轉換後得到一個javascript物件,

舉簡單例子:
var a = eval(“5″);等效於var a = 5;
var a = eval(“’5′”);等效於var a = ’5′;
var obj = eval(“({name:’cat’,color:’black’})”);等效於 var obj = {name:’cat’,color:’black’};
eval(“alert(‘hello world!’);”);等效於 alert(‘hello world!’);

 

 

• 1
• 2
• 3
• 4
• 5

20.解釋touch.js以及使用場景
21.touch.js如何監聽事件？有哪些事件
22.touch.js事件配置
23.使用touch.js快速搭建移動端頁面

24.$(document).ready()方法和window.onload有什麼區別

時間：前者先執行
$(docunment).ready()是在DOM文件結構繪製完成後，執行，不必等待頁面所有元素載入完成
widows.onload是在頁面包括圖片在內的所有元素載入完成後執行 執行方法數量不同
$(document).ready()可以一次執行多個方法
windows.load只執行一個

25.jQuery的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝

淺拷貝（只複製一份原始物件的引用,也就是地址） var newObject = $.extend({}, oldObject);

深拷貝（對原始物件屬性所引用的物件進行遞迴拷貝） var newObject = $.extend(true, {},
oldObject);

26.jQuery中attr和prop的區別以及使用場景

對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

處理表單元素的時候使用prop方法
對於dom自定義屬性使用attr方法

27.jQuery裡的each()是什麼函式？你是如何使用它的

遍歷函式，又稱迭代函式，
對於陣列，物件等使用$.each(obj,fn);

遍歷節點的時候使用$(‘select’).each(fn);

28.jQuery物件和DOM物件是怎樣轉換的

jQuery轉DOM —$(‘DOM’)[0]

DOM轉jQuery—$(DOM)

29.jQuery中使用過哪些插入節點的方法，他們的區別是什麼

30.簡單講述一下jQuery是怎麼處理事件的，有哪些事件？

31.jQuery中有事件冒泡嗎，它是怎麼執行的，如何來停止冒泡事件

有事件冒泡，
由內向外觸發，觸發子元素，父元素也會受到影響

停止冒泡：
使用stopstopPropagation；
使用retrun false;
使用阻止預設行為preventDefault；

32.jQuery中$(this)和this之間的區別

$(this)是一個Jquery物件，有各種方法可以給我們呼叫；

this則是html中的當前元素，即使是在Jquery方法中引用this，它依然是html元素，只有當你寫成$(this)才會轉變成一個Jquery物件。

33.怎麼解決跨域問題

1.伺服器允許跨域
2.使用代理伺服器（中轉伺服器）
3.第三方軟體—live server
4.jsonp技術----核心技術：利用script標籤中的src屬性

34.ajax的缺點

優點：
1.不需要外掛支援
2.優秀的使用者體驗
3.提高web程式效能
4.減輕伺服器和頻寬的壓力

缺點：
1.破壞了瀏覽器的前進、後退按鈕的正常功能
2.對搜尋引擎支援不足

35.ajax如何實現非同步定時5秒重新整理

 setInterval(function(){
host = window.location.host
$.post(“http://”+host+"/index.php/Article/cpMes/value/1");
},5000);

 

 

• 1
• 2
• 3
• 4

36.頁面編碼和被請求的資源編碼如果不一致如何處理

比如：http://www.yyy.com/a.html 中嵌入了一個http://www.xxx.com/test.js a.html
的編碼是gbk或gb2312的。 而引入的js編碼為utf-8的 ，那就需要在引入的時候

同理，如果你的頁面是utf-8的，引入的js是gbk的，那麼就需要加上charset=“gbk”.

37.jQuery中$.get()提交和$.post()提交有區別嗎

1.引數傳遞機制不一致：
    get:在請求地址中傳遞引數
    post：在再請求方法(請求體)中傳遞引數
2.傳遞的資料量大小不一致
     get:有大小限制(最大2k)
     post：理論上沒有限制
3.安全性
     get:引數在地址中傳遞，會在瀏覽器中被快取，
     post：不會有快取

38.jquery.extend與jquery.fn.extend的區別

jquery.extend是為jQuery物件新增方法
jquery.fn.extend是為元素物件新增方法

39.解釋什麼是Zepto，jQuery和Zepto的區別在哪裡

zepto是移動端開發框架，是jQuery的輕量級替代品，API及語句與jQuery相似，但檔案更小（可壓縮至8k），是目前功能完備的庫中，最小的一個。為了保持原始碼的精簡，Zepto預設只載入一些模組，當需要某些模組時，可以把對應的模組載入進來。
區別：
jQuery更多是在PC端被應用，因此考慮了很多相容性問題，zepto.js則是直接拋棄了相容問題，顯得更加輕盈。
Zepto.js在移動端被運用的更加廣泛
jQuery的底層是通過DOM來實現效果的，而Zepto.js是用css3來實現的
Zepto.js可以說是jQuery的輕量版

40.Zepto事件委託？
41.Zepto相關事件以及使用