首頁»JavaScript»前端面試送命題-JS三座大山

                    前端面試送命題-JS三座大山

                    來源:peiyu1988 發布時間:2018-04-21 閱讀次數:

                     前言

                      本篇文章比較適合3年以上的前端工作者,JS三座大山分別指:原型與原型鏈,作用域及閉包,異步和單線程。

                     原型與原型鏈

                      說到原型,就不得不提一下構造函數,首先我們看下面一個簡單的例子:

                    function Dog(name,age){   
                        this.name = name;
                        this.age = age;
                    }
                    
                    let dog1 = new Dog("哈士奇",3);
                    let dog2 = new Dog("泰迪",2);

                      首先創造空的對象,再讓this指向這個對象,通過this.name進行賦值,最終返回this,這其實也是new 一個對象的過程。

                      其實: let obj = {} 是 let obj = new Object()的語法糖; let arr = [] 是 let arr = new Array()的語法糖; function Dog(){...} 是 let Dog = new Fucntion()的語法糖。

                      那什么是原型那?在js中,所有對象都是Object的實例,并繼承Object.prototype的屬性和方法,但是有一些是隱性的。

                      我們來看一下原型的規則

                      1.所有的引用類型(包括數組,對象,函數)都具有對象特性;可自由擴展屬性。

                    var obj = {};
                    obj.attribute = "三座大山";
                    var arr = [];
                    arr.attribute = "三座大山";
                    function fn1 () {}
                    fn1.attribute = "三座大山";

                      2.所有的引用類型(包括數組,對象,函數)都有隱性原型屬性(__proto__),值也是一個普通的對象。

                    console.log(obj.__proto__);

                      3.所有的函數,都有一個prototype屬性,值也是一個普通的對象。

                    console.log(obj.prototype);

                      4.所有的引用類型的__proto__屬性值都指向構造函數的prototype屬性值。

                    console.log(obj.__proto__ === Object.prototype); // true

                      5.當試圖獲取對象屬性時,如果對象本身沒有這個屬性,那就會去他的__proto__(prototype)中去尋找。

                    function Dog(name){ 
                       this.name = name; 
                    } 
                    Dog.prototype.callName = function (){ 
                       console.log(this.name,"wang wang"); 
                    }
                    let dog1 = new Dog("Three Mountain"); 
                    dog1.printName = function (){ 
                       console.log(this.name);
                    }
                    dog1.callName();  // Three Mountain wang wang
                    dog1.printName(); // Three Mountain

                      原型鏈:如下圖。

                      我找一個屬性,首先會在f.__proto__中去找,因為屬性值為一個對象,那么就會去f.__proto__.__proto__去找,同理如果還沒找到,就會一直向上去查找,直到結果為null為止。這個串起來的鏈即為原型鏈。

                     作用域及閉包

                      講到作用域,你會想到什么?當然是執行上下文。每個函數都有自己執行上下文的excution context,和variable object。這些環境用于儲存上下文中的變量,函數聲明,參數等。只有函數才能制造作用域。

                      PS:for if else 不能創造作用域。

                    console.log(a) ; // undefined
                    var a = 1;
                    
                    //可理解為
                    var a;
                    console.log(a);  // undefined
                    a = 1;

                      執行console.log時,a只是被聲明出來,并沒有賦值;所以結果當然是undefined

                      this

                      本質上來說,在js里this是一個指向函數執行環境的指針。this永遠指向最后調用它的對象,并且在執行時才能獲取值,定義是無法確認他的值。

                    var a = { 
                        name : "A", 
                        fn : function (){
                            console.log (this.name) 
                        } 
                    } 
                    a.fn() // this === a 
                    a 調用了fn() 所以此時this為a
                    
                    a.fn.call ({name : "B"}) // this === {name : "B"} 
                    使用call(),將this的值指定為{name:"B"}
                    
                    var fn1 = a.fn 
                    fn1() // this === window
                    雖然指定fn1 = a.fn,但是調用是有window調用,所以this 為window

                      this有多種使用場景,下面我會主要介紹4個使用場景:

                      1.作為構造函數執行

                    function  Student(name,age) {
                        this.name = name           // this === s
                        this.age = age             // this === s
                        //return  this
                    }
                    var s = new Student("py1988",30)

                      首先new 字段會創建一個空的對象,然后調用apply()函數,將this指向這個空對象。這樣的話,函數內部的this就會被空對象代替。

                      2.作為普通函數執行

                    function  fn () {
                        console.log (this)       // this === window
                    }
                    fn ()

                      3.作為對象屬性執行

                    var obj = {
                        name : "A",
                        printName : function () {
                            console.log (this.name)  // this === obj
                        }
                    }
                    obj.printName ()

                      4.call(),apply(),bind()

                      三個函數可以修改this的指向,具體請往下看:

                    var name = "小明" , age = "17"
                    var obj = { 
                        name : "安妮", 
                        objAge : this.age, 
                        fun : function () { 
                                console.log ( this.name + "今年" + this.age ) 
                            } 
                    } 
                    console.log(obj.objAge) // 17 
                    obj.fun() // 安妮今年undefined
                    var name = "小明" , age = "17" 
                    var obj = { 
                        name : "安妮", 
                        objAge :this.age, 
                        fun : function (like,dislike) { 
                                  console.log (this.name + "今年" + this.age ,"喜歡吃" + like + "不喜歡吃" + dislike) 
                               } 
                        } 
                    var a = { name : "Jay", age : 23 } 
                    obj.fun.call(a,"蘋果","香蕉") // Jay今年23 喜歡吃蘋果不喜歡吃香蕉 
                    obj.fun.apply(a,["蘋果","香蕉"]) // Jay今年23 喜歡吃蘋果不喜歡吃香蕉 
                    obj.fun.bind(a,"蘋果","香蕉")() // Jay今年23 喜歡吃蘋果不喜歡吃香蕉

                      首先call,apply,bind第一個參數都是this指向的對象,call和apply如果第一個參數指向null或undefined時,那么this會指向windows對象

                      call,apply,bind的執行方式如上例所示。call,apply都是改變上下文中的this,并且是立即執行的。bind方法可以讓對應的函數想什么時候調用就什么時候調用。

                      閉包

                      閉包的概念很抽象,看下面的例子你就會理解什么叫閉包了:

                    function a(){
                      var n = 0;
                      this.fun = function () {
                        n++; 
                        console.log(n);
                      };
                    }
                    var c = new a();
                    c.fun();  //1
                    c.fun();  //2

                      閉包就是能夠讀取其他函數內部變量的函數。在js中只有函數內部的子函數才能讀取局部變量。所以可以簡單的理解為:定義在內部函數的函數。

                      用途主要有兩個:

                      1)前面提到的,讀取函數內部的變量。

                      2)讓變量值始終保持在內存中。

                     異步和單線程

                      我們先感受下異步

                    console.log("start");
                    setTimeout(function () {
                        console.log("medium");
                    }, 1000);
                    console.log("end");

                      使用異步后,打印的順序為 start-> end->medium。因為沒有阻塞

                      為什么會產生異步呢?

                      首先因為js為單線程,也就是說CPU同一時間只能處理一個事務。得按順序,一個一個處理。

                      如上例所示,第一步:執行第一行打印 “start”;第二步:執行setTimeout,將其中的函數分存起來,等待時間結束后執行;第三步:執行最后一行,打印“end”;第四部:處于空閑狀態,查看暫存中,是否有可執行的函數;第五步:執行分存函數。

                      為什么js引擎是單線程?

                      js的主要用途是與用戶互動,以及操作DOM,這決定它只能是單線程。例:一個線程要添加DOM節點,一個線程要刪減DOM節點,容易造成分歧。

                      為了更好使用多CPU,H5提供了web Worker 標準,允許js創建多線程,但是子線程受到主線程控制,而且不得操作DOM。

                      任務列隊

                      單線程就意味著,所有的任務都要排隊,前一個結束,才會執行后面的任務。如果列隊是因為計算量大,CPU忙不過來,倒也算了。但是更多的時候,CPU是閑置的,因為IO設備處理得很慢,例如 ajax讀取網絡數據。js設計者便想到,主線程完全可以不管IO設備,將其掛起,然后執行后面的任務。等后面的任務結束掉,在反過頭來處理掛起的任務。

                      好,我們來梳理一下:

                      1)所有的同步任務都在主線程上執行,行程一個執行棧。

                      2)除了主線程之外,還存在一個任務列隊,只要一步任務有了運行結果,就在任務列隊中植入一個時間。

                      3)主線程完成所有任務,就會讀取列隊任務,并將其執行。

                      4)重復上面三步。

                      只要主線程空了,就會讀取任務列隊,這就是js的運行機制,也被稱為 event loop(事件循環)。

                    QQ群:WEB開發者官方群(515171538),驗證消息:10000
                    微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
                    提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
                    網友評論(共0條評論) 正在載入評論......
                    理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
                    登錄會員中心
                    福彩试机号今天 新时时彩基本走势图 幸运农场选号技巧 极速11选5是国家开的吗 内蒙时时彩今日走势图 连码三全中是什么数字 pk10用5000千一天赢1千 天津快乐10分体育彩票 4场进球彩比分直播 什么是快乐赛车彩票 体彩p3开奖视频 广东36选7中奖 电脑盘香港六合彩买码 河北快三走势图表 福彩主任1360亿 广东快乐十分开奖查 走势图