2018前端面試總結js部分【中】

時間 2019-11-17

原文原文鏈接

定義函數的方法

1.
        語法：function 函數名(參數1[,參數2]……){
        	函數體;
        	[return];   //返回值
        }
        function fx() {
            
        }
        
        function () {
            
        }  //匿名函數

2.字面量 
        var fn=function(){
        
        }
        
3.經過函數對象方式

        var x=new function () {
                
        }
複製代碼

函數的調用

這裏的this指向window

//一、函數名();
     function getSum() {
        console.log(this) //window
     }
     getSum()
     
//二、自調用(function(){})()
           
     (function() {
        console.log(this) //window
     })();
     
//三、變量名() 
     var getSum=function() {
        console.log(this) //window
     };
     getSum()
複製代碼

建立實例的方法

//1.json方法
    
    let obj={
        name:"張山",
        age:"11",
        call:function(){
            alert(1)
        }
    };
    obj.call();
    
//2.構造函數方法

    function Obj(){
    		this.name = "張三",
    		this.sex = "男",
    		this.phone = 17603514842,
    		this.call = function(){
    			alert(1);
    		}
    	}
    	let obj = new Obj();
    	obj.call();    
    	
//3.object方法

    	var obj = new Object();
    	obj.name = "張三";
    	obj.sex = "男";
    	obj.call = function(){
    		alert(this.name);
    	};
    	obj.call();
複製代碼

JavaScript的數據類型

string number boolean null underfind object typeof (7種)

什麼是閉包，閉包有什麼缺點什麼狀況下用閉包

閉包就是函數嵌套函數，能夠理解爲定義在函數內部的函數，本質上閉包是函數內部和外部鏈接的橋樑，但若是父函數定義的變量沒有被子函數引用就不叫閉包
閉包讓函數的變量都保存在內存中，內存消耗變大。使用不當會形成內存泄漏。
用途：讀取函數內部變量讓變量保存到內存中設置私有變量和方法

函數重載以及解析順序

var m= 1, j = k = 0; 
        function add(n) { 
            return n = n+1; 
    &emsp; } ;
        y = add(m); 
        function add(n) { 
            return n = n + 3; 
        } ;
    z = add(m); 
複製代碼

以上代碼都會輸出4，js中沒有函數重載的概念，因爲定義了連個相同的函數，因此後面的會覆蓋前面的
因此調用add結果都是同樣的所以真正到執行代碼的時候，也就是第一次調用add(),輸出的固然是4,第二次執行add()一樣輸出4.

js函數調用時加括號和不加括號的區別.不加括號至關於把函數代碼賦給等號左邊,加括號是把函數返回值賦給等號左邊

var color='green';
    var text={
        color:'blue',
        getColor:function() {
          var color='red';
          alert(this.color)
        }
    };
    var getColor=text.getColor;
    getColor();
    text.getColor();
    //結果爲 green blue
複製代碼

關於this指針

直接調用的話 this指向window對象（這裏若是在函數內部聲明一個name也指向的window對象）

var name='張三';
   function sayname() {
     console.log(this.name)
   };
   sayname();
複製代碼

對象函數調用 this指向對象自己

var name='Bob';
    function sayName(){
        console.log(this.name);
    };
    var object={'name':'vicky'};
    object.sayName=sayName;          //sayName沒有寫成sayName(),表示不是執行函數，而是將sayName的指針賦值給object.sayName
    object.sayName();               //因爲對象函數調用方法，this指向對象自己，因此輸出:'vicky'
    sayName();                     //因爲全局環境調用sayName()等同於window.sayName();輸出:'Bob'
複製代碼

構造函數調用 this指針指向新建立的對象

function object(name){
        this.name=name;
        console.log(this);      //因爲this指向新建立的對象自己，輸出：Object { name: "vikcy" }
        console.log(this.name);  //輸出:"vicky"
    }
    var myObject=new Object('vicky');  //因爲this指向新建立的對象自己
複製代碼

JavaScript原型原型鏈

每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時，
若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，
因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念。

JavaScript有幾種類型的值？

棧：原始數據類型（Undefined，Null，Boolean，Number、String）
堆：引用數據類型（對象、數組和函數）兩種類型的區別是：存儲位置不一樣；原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定。若是存儲在棧中，將會影響程序運行的性能；引用數
據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取
得地址後從堆中得到實體

任何對象轉爲布爾值，都爲獲得 true（切記！在JS中，只有 0，-0，NaN，""，null，undefined 這六個值轉布爾值時，結果爲 false）

var x = new Boolean(false);
   if (x) {
     alert('hi');
   }
   var y = Boolean(0);
   if (y) {
     alert('hello'); 
   }
   
   //結果只會顯示 hi

複製代碼

變量提高

在某做用域，聲明變量語句會默認解析爲在該做用域的最開始就聲明瞭。

var a=5;
    function foo() {
      a=2;
      console.log(a);
      var a;
    }
    foo();
    //結果會輸出2
複製代碼

咱們能夠看到，var a;語句並無刷新a的值，由於解析編譯的時候，’var a;’被提早了.因此咱們看的a是內部變量a而不是外面已賦值的5。

var a=5;
  function foo() {
    console.log(a);
    var a=1;
  }
  foo();
  //結果輸出underfind
複製代碼

因爲變量提高的緣由a已經聲明，因此沒有輸出咱們再外部聲明的5，可是a=1;並無被提早執行.因此變量提高這個概念，只適用於聲明變量的
語句，而變量賦值的語句並不能被提早

foo();
    function foo(){
        console.log(1);
    }
    //TypeError: foo is not a function
複製代碼

這裏的foo被提高了，因此這裏並無發生ReferenceError，可是這個時候foo並無被賦值，因此發生了TypeError。這段代碼通過提高後是這樣的：

var foo;
    foo();
    foo=function fooo() {
      console.log(1)
    }
複製代碼

咱們習慣將‘var a=5’看作一條聲明。其實這裏兩條語句的簡寫，‘var a’和‘a = 3’,而且其實這兩條語句是兩個不一樣類型的語句，是由兩個不一樣
的組件完成的。前一句是在編譯階段執行，後一句是在運行階段執行。因此，無論’var a’寫在哪裏，都會在代碼自己被執行以前處理。這一過程很像
是代碼的一個移動過程，因此被你們稱爲「變量提高」。

瀏覽器從輸入url到加載完成都發生了什麼

一、瀏覽器地址欄輸入urljavascript

二、瀏覽器會先查看瀏覽器緩存--系統緩存--路由緩存，若有存在緩存，就直接顯示。若是沒有，接着第三步css

三、域名解析（DNS）獲取相應的iphtml

四、瀏覽器向服務器發起tcp鏈接，與瀏覽器創建tcp三次握手java

五、握手成功，瀏覽器向服務器發送http請求，請求數據包web

六、服務器請求數據，將數據返回到瀏覽器json

七、瀏覽器接收響應，讀取頁面內容，解析html源碼，生成DOM樹數組

八、解析css樣式、瀏覽器渲染，js交互瀏覽器

常見的瀏覽器內核

谷歌：-webkit- 火狐：-moz- ie：-ms- 歐鵬：-o- qq瀏覽器：雙內核 -webkit- -ms-緩存

節點操做

建立節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點bash
添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值
getElementById() //經過元素Id，惟一性