06.27 2018前端面試總結js部分

定義函數的方法

1.
 語法：function 函數名(參數1[,參數2]……){
 \t函數體;
 \t[return]; //返回值
 }
 function fx() {
 
 }
 
 function () {
 
 } //匿名函數
2.字面量 
 var fn=function(){
 
 }
 
3.通過函數對象方式
 var x=new function () {
 
 }

函數的調用

• 這裡的this指向window

//1、函數名();
 function getSum() {
 console.log(this) //window
 }
 getSum()
 
//2、自調用(function(){})()
  

 (function() {
 console.log(this) //window
 })();
 
//3、變量名() 
 var getSum=function() {
 console.log(this) //window
 };
 getSum()

創建實例的方法

//1.json方法
 
 let obj={
 name:"張山",
 age:"11",
 call:function(){
 alert(1)
 }
 };
 obj.call();
 
//2.構造函數方法
 function Obj(){
 \t\tthis.name = "張三",
 \t\tthis.sex = "男",
 \t\tthis.phone = 17603514842,
 \t\tthis.call = function(){
 \t\t\talert(1);
 \t\t}
 \t}
 \tlet obj = new Obj();
 \tobj.call(); 
 \t
//3.object方法
 \tvar obj = new Object();
 \tobj.name = "張三";
 \tobj.sex = "男";
 \tobj.call = function(){
 \t\talert(this.name);
 \t};
 \tobj.call();

JavaScript的數據類型

• string number boolean null underfind object typeof (7種)

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

• 閉包就是函數嵌套函數，可以理解為定義在函數內部的函數，本質上閉包是函數內部和外部連接的橋樑，但如果父函數定義的變量沒有被子函數引用就不叫閉包
• 閉包讓函數的變量都保存在內存中，內存消耗變大。使用不當會造成內存洩漏。
• 用途：讀取函數內部變量 讓變量保存到內存中 設置私有變量和方法

想要學習或者瞭解web前端編程的小夥伴,可以私信小編【學習】即可免費領取一套系統web前端學習教程！

函數重載 以及解析順序

 var m= 1, j = k = 0;  

 function add(n) { 
 return n = n+1; 
   } ;
 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到加載完成 都發生了什麼

1、瀏覽器地址欄輸入url

2、瀏覽器會先查看瀏覽器緩存--系統緩存--路由緩存，如有存在緩存，就直接顯示。如果沒有，接著第三步

3、域名解析（DNS）獲取相應的ip

4、瀏覽器向服務器發起tcp連接，與瀏覽器建立tcp三次握手

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

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

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

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

常見的瀏覽器內核

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

節點操作

• 創建節點
• createDocumentFragment() //創建一個DOM片段
• createElement() //創建一個具體的元素
• createTextNode() //創建一個文本節點
• 添加、移除、替換、插入
• appendChild() //添加
• removeChild() //移除
• replaceChild() //替換
• insertBefore() //插入
• 查找
• getElementsByTagName() //通過標籤名稱
• getElementsByName() //通過元素的Name屬性的值
• getElementById() //通過元素Id，唯一性
• 想要學習或者瞭解web前端編程的小夥伴,可以私信小編【學習】即可免費領取一套系統web前端學習教程！

作用域

• 每個函數都有一個作用域，比如我們創建了一個函數，函數里面又包含了一個函數，那麼現在就有三個作用域，這樣就形參了一個作用域鏈
• 特點： 先在自己的變量範圍中查找，如果找不到，就會沿著作用域鏈網上找。