JavaScript基礎面試題及答案-有解無憂

JavaScript基礎面試題及答案①

- 1 介紹JavaScript的基本資料型別
- 3 jQurry使用建議
- 4 Ajax使用
- 5 JavaScript有幾種型別的值？
- 6 堆疊和堆的區別？
- 7 JavaScript實作繼承的幾種方式
- 8 JavaScript創建物件的幾種方法：
- 9JavaScript作用域
- 9 JavaScript作用域鏈
- 10 閉包
- 11 談談你對this的理解
- 12 什么是window物件，什么是document物件？
- 13 null和undefined的區別
- 14 什么事件流？IE與網景的事件機制有何區別？如何阻止冒泡
- 15 e.target和this的區別
- 16 如何判斷一個物件是否屬于某個類？
- 17 DOM操作
- 18 對call()和apply()的理解
- 19 如何洗掉一個Cookie？
- 20 漸進增強和優雅降級

1 介紹JavaScript的基本資料型別

Number、String、Boolean、Null、Undefined
Object是JavaScript中所有物件的父元素
資料封裝類物件：Object、Array、Boolean、Number和String
其他物件：Function、Arguments、Array、Math、Date、RegExp、Error
新型別：Symbol

##2 說說書寫JavaScript的基本規范
1）不要在同一行宣告多個變數
2）使用 === 或 !== 來比較true/false或者數值
3）switch必須帶有default分支
4）函式應該有回傳值
5）for if else 必須使用大括號
6）陳述句結束打分號

3 jQurry使用建議

1、盡量減少對Dom元素的訪問和操作
2、盡量減少給dom元素系結多個相同型別的事件處理函式，可以將多個想同型別事件處理函式合并到一個處理函式，通過資料狀態來處理分支
3、盡量避免使用toggle事件

4 Ajax使用

全稱：Asynchornous JavaScript And XML
所謂異步，就是區域向服務器發送請求，全域不用等待，而是可以同時做其他的事情，等到有了結果他會自己根據設定進行后續操作，與此同時，頁面不會發生整體重繪，區域重繪，提高了用戶的整體體驗

創建Ajax的程序：
1）創建XMLHttpRequest物件（異步呼叫物件）

var xhr = new XMLHttpRequest()||new ActiveXobject("Microsoft.XMLHTTP");

建立連接（方法、URL、是否異步）

xhr.open("get","請求路徑",true);

3）發送請求

xhr.send(date)

接識訓傳值

xhr.onreadyStatechange = function(){
	if(xhr.readyState == 4){
	if(xhr.status == 200){
	//獲取資料
	var txt = xhr.responseText;
	console.log(txt)
}else{
	console.log("error")
}

5 JavaScript有幾種型別的值？

基本資料型別存盤在堆疊中
復合資料型別（物件）存盤在堆中

6 堆疊和堆的區別？

堆疊（stack）：由編譯器自動分配釋放，存放函式的引數值，區域變數等；
堆（heap）：一般由程式員分配釋放，若程式袁不釋放，程式結束是可能有作業系統數釋放

7 JavaScript實作繼承的幾種方式

建構式繼承

//建構式的核心思想是
    //通過call()或apply()方法在子建構式的內部呼叫父建構式，從而獲取到父物件中的屬性和方法
    function Person(name){
        this.legs = 2;
        this.mouse = 1;
        this.name = name;
        this.walk = function(){
            console.log(this.name+"有"+this.legs+"條腿");
        }
    }

    //中國人
    function Chinese(name){
        Person.call(this,name);
    }

    //實體化物件
    var Chinese = new Chinese("zs");
    //呼叫物件方法
    Chinese.walk();
}

2）組合繼承

<script>
    /* 
    組合繼承：因為原型鏈繼承只能繼承原型物件中的屬性和方法，
    而建構式又只能繼承實體物件中的屬性和方法，便有了組合繼承

    組合繼承也叫偽經典繼承，其核心是：
    1、將原型鏈繼承和建構式繼承組合在一起
    原型鏈實作對原型物件屬性何方法的繼承
    建構式實作對實體物件的屬性和方法的繼承

    */

   function Person(name){
       this.legs = 2;
       this.mouse = 1;
       this.name = name ;
       this.walk = function(){
           console.log(this.name+"有"+this.legs+"條腿");
       }
   }
   Person.prototype.say = function() {
       console.log("我的名字叫"+this.name);
   }

   //中國人
   function Chinese(name){
       Person.call(this,name);
   }
   Chinese.prototype = new Person();
   Chinese.prototype.constructor = Chinese;

   //實體化物件
   var chinese = new Chinese("張三")
   //呼叫物件方法
   chinese.walk();
   chinese.say();
</script>

3）利用空物件作為中介繼承

<script>
    function Boss(){}
    Boss.prototype.money = 9999999;
    

    function fa(n,a){
        this.name = n;
        this.age = a;
    }
    //創建一個空的建構式 通過空物件進行傳值
    function Nul(){}
    Nul.prototype = Boss.prototype;

    //讓fa的原型物件指向創建的空的建構式
    fa.prototype = new Nul();
    //讓fa的建構式指向fa
    fa.prototype.constructor = fa;

    // 創建fa的實體物件
    var son = new fa("tom",16);
    console.log(son.name,son.age,son.money);

    //通過fa改變原型物件 但是Boss原型物件的值不能被修稿
    fa.prototype.money = 100;
    console.log(fa.prototype);
    
    var boss_ = new Boss();
    console.log(boss_.money);//999999
</script>

8 JavaScript創建物件的幾種方法：

1）工廠方法

function creatPerson(name, age) {
            
    var obj = new Object();

    obj.name = name;
    obj.age = age;

    obj.sayName = function() {
        window.alert(this.name);
    };
            
    return obj;
}

2）建構式方法

function Person(name, age) {

    this.name = name;
    this.age = age;

    this.sayName = function() {
        window.alert(this.name);
    };
}

3）原型方法

function Person() {
        
}
        
Person.prototype = {
    constructor : Person,
    name : "Ning",
    age : "23",
    sayName : function() {
        window.alert(this.name);
    }
};

這種方法有些缺陷，類里屬性的值都是在原型里給定的

4）組合使用建構式和原型方法（推薦）

function Person(name, age) {
    this.name = name;
    this.age = age;
}
        
Person.prototype = {
    constructor : Person, 
    sayName : function() {
        window.alert(this.name);
    }
};

將建構式方法和原型函式方法結合使用是最常用的定義類的方法，這種方法的好處就是實作了屬性定義和方法定義的分離，比如我們創建了兩個物件person1和person2，它們分別傳入各自的name值和age值，但sayName()方法可以同時使用原型里定義的，

9JavaScript作用域

1）變數作用域
?1、變數作用域就是變數的可訪問范圍
?2、變數作用域可以減少變數的命名沖突，提高程式的可靠性
?3、變數作用域可以分為全域作用域和區域作用域
??全域作用域：
?? ??1.全域作用域中的變數全域可以使用（函式內外都可以訪問）
?? ??2.在函式外部定義的變數成為全域變數
?? ??3.在函式內部沒有使用var宣告的變數直接賦值的變數也為全域變數
?? ??4.全域變數只有在瀏覽器關閉時才會注銷，比較占用資源

var num1 = 10;
function fun1(){
	console.log(num1);
}
fun1();
console.log(num1)

??區域作用域：
?? ??1.區域作用域中的變數只能在作用域內部使用（函式內部使用）
?? ??2.在函式內部通過var定義的變數為區域變數
?? ??3.函式的形參實際上也是區域變數
?? ??4.區域變數在函式執行結束后會銷毀，比較節省記憶體空間

function fun1(){
	var num = 20;
	console.log(num);
}
fun1();
console.log(num)

9 JavaScript作用域鏈

1）只要是代碼，就至少有一個作用域
2）函式內部為區域作用域
3）內部函式可以訪問外部函式的變數
4）但外部函式無法訪問內部函式的變數
5）內部函式訪問的外部函式中的變數，采取的是鏈式查找的方式來決定取哪個值，這種方式成為作用域鏈（就近原則）

作用域鏈的原理和原型鏈很類似，如果這個變數在自己的作用域中沒有，那么他會尋找父級的，直到最頂層，

注意：JS沒有塊級作用域，若要形成塊級作用域可以通過（function(){{}}）立即執行的形式實作，

10 閉包

1）閉包（closure）指能夠讀取到其他函式內部變數的函式
2）閉包的實作：在函式內部在定義一個函式，把內部函式作為回傳值
3）閉包的優點：避免全域變數污染
4）閉包的缺點：容易造成記憶體泄漏

function  a(){
	var num = 20;
	return function(){
		console.log(num);
	}
}
var b = a();
b();

3）閉包的作用
1、延伸變數作用范圍，可以在函式外部訪問到內部區域變數
2、可以讓區域變數在函式執行結束后不釋放，保存在記憶體中

function  a(){
	var num = 20;
	return function(){
		console.log(num++);
	}
}
var b = a();
b();
b();

4）閉包的缺點：
1、閉包會使得函式中的變數都被保存在網頁中，記憶體消耗很大，所以不能濫用閉包，可能導致記憶體泄漏
2、閉包會在函式外部，改變函式內部變數的值

11 談談你對this的理解

1）this總是指向函式的直接呼叫者（而非間接呼叫者）
2）如果有new關鍵字，this指向new出來的那個物件
3）在事件中this指向目標元素，特殊的是IE的attachEvent中的this總是指向全域物件window，

12 什么是window物件，什么是document物件？

1）window物件代表瀏覽器中打開的一個視窗，
2）document物件代表整個html檔案，
實際上document物件是window物件的一個屬性，

13 null和undefined的區別

1）null表示一個物件被定義了，但存放了空指標，轉換為數值時值為0，
?typeof(null) – object;

2）undefined表示宣告的變數為初始化，轉換為數值是為NAN，
?typeof(undefined) – undefined;

14 什么事件流？IE與網景的事件機制有何區別？如何阻止冒泡

1）事件發生時會在元素節點之間按照特定的順序傳播，這個傳播程序即DOM事件流
DOM事件流分為三個階段：捕獲階段、當前目標階段、冒泡階段

2）捕獲階段：IE最早提出，事件逐級向下傳播
??冒泡階段：網景最早提出，事件逐級向上傳播

3）阻止冒泡：jQuery中使用event.stopPropagation() 方法；舊IE的方法ev.cancelBubble = true;
??reutrn false也能阻止默認行為沒有兼容性問題（return false 只針對傳統注冊方式有效）

15 e.target和this的區別

1）this是事件系結的元素（系結這個事件處理函式的元素）
2）e.target是事件觸發的元素
?**通常情況下target和this是一致的
?**但有一種情況不同，那就是在事件冒泡時（父子元素有相同事件，單擊子元素，父元素的事件處理函式也會被觸發執行）
?**這是this指向的是父元素，因為它是系結事件的元素物件
?**而target指向的是子元素，因為他是觸發事件的那個具體元素物件
??***比如給ul系結了click事件，當點擊里面的li時，this表示ul而e.target表示li

16 如何判斷一個物件是否屬于某個類？

使用instanceof 即if(a instanceof Person){alert(‘yes’);}

17 DOM操作

1）創建節點物件：
**creatDocumentFragment() // 創建一個DOM片段
**creatElement() // 創建一個具體的元素
**creatTextNode() // 創建一個文本節點

2）添加、移除、替換、插入
**appendChild()
**removeChild()
**repliceChild()
**insertBefore() // 在已有的子節點前插入一個新的子節點

3）查找
**getElementsByTagName() // 通過標簽名稱
**getElementsByName() // 通過元素的name屬性值
**getElementById() // 通過元素id，具有唯一性

18 對call()和apply()的理解

call() 方法和apply() 方法的作用相同，動態改變某個類的某個方法的運行換寂靜，他們的區別在于接收引數的方式不同，在使用call()方法時，傳遞給函式的的引數必須逐個列舉出來，使用apply()時，傳遞給函式的是引數陣列，

19 如何洗掉一個Cookie？

1）將Cookie的失效時間設定為過去的時間（expires）

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

2）將系統時間設定為當前時間往前一點

var date = nwe Date();
date.setDate(date.getDate()-1);

20 漸進增強和優雅降級

漸進增強：針對瀏覽器低版本進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、互動等改進，達到更好的用戶體驗，

優雅降級：一開始就構造完整的功能，然后在針對低版本瀏覽器進行兼容

感謝支持：@快樂養兔

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/274417.html

標籤：其他

上一篇：2021前端面試CSS必須要懂的幾個地方！

下一篇：大咖帶你免費學前端，附不容錯過的前端100篇文章合集