2018年6月前端面試經歷(上)

前言

座標：杭州 。本身從事前端工做差很少2年，本人不是科班出身，算是一個小菜雞到如今剛入門吧。2年前去面試，由於技術菜，其實公司並無怎麼去了解個人技術，主要仍是看我的的態度和學習能力，因此很感謝前面的倆個老東家，把我這個小菜雞帶入門了。今年，在上一個東家作的項目差很少也成型了，發現本身也到了一個一個瓶頸期吧，因此出來闖闖看。 出去面試其實就是一個快捷徑去認識到本身的不足，但願能給和我同樣在面試的江湖人一點小小的拋磚引玉吧。

筆試題

1）js的繼承是什麼？原型鏈？

function super (){
        this.a = '1'
    }
    function sub (){  
        super.call(this)
    }
複製代碼

或者

function sub (){...}
sub.prototype = new super();
//直接在他的原型上new一個super的實例。
複製代碼

在new的過程當中，發生了，改變this的指向，執行super裏面的代碼，返回一個新的函數。

es6的繼承方法。

class sub extends super(){
    constructor(){
        //super()和super(props)的區別
        super() // cosole.log(this.props)  undifined
        super(props) // console.log(this.props) //打印出定義好的props
        
        // super() 它在這裏表示父類的構造函數，用來新建父類的this對象。
        //子類必須調用這個方法，否則繼承的話會報錯。子類必須在constructor方法中調用super方法，不然新建實例時會報錯。
        //這是由於子類本身的this對象，必須先經過父類的構造函數完成塑造，
        //獲得與父類一樣的實例屬性和方法，而後再對其進行加工，
        //加上子類本身的實例屬性和方法。若是不調用super方法，子類就得不到this對象。
        }
        // constractor必定是必要的嗎？
        // 答 是的，就算你不聲明，也會隱式的把你聲明好一個空的constractor。
        
複製代碼

2）ajax是什麼？

異步的javascript+Xml

var xhr = new XmlHttpRequest() 或者  new ActiveXObject()
    xhr.onreadyChange = function(){
        if(xhr.readyState = 4){
        if(xhr.status == 200){
            var test = xhr.responseTest()
        }
    }
}
xhr.open("Get" , url ,false) //第三個參數，是否異步
複製代碼

3）如何對一個數組作去重？

（1）set方法

var arr = new Set (arr);
    arr = Array.from(arr);
複製代碼

（2）還能夠利用對象的key不能相同去作判斷

（3）for循環

4）rem和em的區別？

rem是相對於 根元素 上的font-size的大小

em是相對於 父元素 的font-size的大小

這裏對於em和rem的理解，不是很準確和深刻，不想誤導新的朋友～ 下面有同窗推薦了一個網站 綜合指南: 什麼時候使用 Em 與 Rem

（更新於2018/07/03 22:51）

---

5）盒子模型

（1）普通盒子模型 boxsizing：content-box; （2）怪異盒子模型 boxsizing：border-box;

6）http的狀態碼

200 304 500 404 415 均可以去了解一下

7）實現一個函數能作到 function add(1)(2)(3) //6，達到function add(1)(2)(3)...(n)

這裏要引生出來倆個js內置的方法，valueOf和toString方法，在特定的狀況下，這倆個方法都會自動調用，並且在用戶定義了新的valueof和tostring的時候，會優先執行新的方法。

在作字符串拼接等須要調用tostring()方法的是有優先調用toString(),若是調用後仍是不能返回原始類型的話會繼續調用valueOf方法。

而在作相似number的運算的時候會優先調用valueOf().

而對於函數而言，add 和add()的返回是不同的。add()會返回return的值。而add則會調用valueOf答應出來函數自己的代碼.函數的轉換相似於number。

解題

function add () {
    var args = [].slice.call(arguments);//這裏也用到了閉包的概念對args的存儲

    var fn = function () {
        var arg_fn = [].slice.call(arguments); //這裏的遞歸是爲了合併參數
        return add.apply(null, args.concat(arg_fn));
    }

    fn.valueOf = function() {
        return args.reduce((a, b) => a + b);//真正的輸出是valueof
    }
    return fn;
}
複製代碼

8）執行循序 setTimout和promise 這裏咱們先要理解js是是單線程執行的。在內存中函數的執行是分同步和異步的。 同步任務會放在主線程中一一執行，而異步任務會先註冊到事件隊列裏。等待主線程任務執行完畢，纔會去異步隊列裏拿出任務放在主線程中去執行。

這裏還有倆個概念要去理解，宏事件 微事件。

宏事件： script， setTimeout，setInterval

微事件：promise

這裏還要多說一句promise是當即執行的函數

setTimeout(function() {
        console.log(1)
    }, 0);
    new Promise(function(a, b) {
        console.log(2);
        for(var i = 0; i < 10; i++) {
                i == 9 && a();
            }
        console.log(3);
    }).then(function() {
        console.log(4)
    });
    console.log(5)
//輸出:2,3,5,4,1
複製代碼

先執行宏事件，再執行微事件，而後再循環.

9）

function Foo() {
    getName = function () { alert (1); };
    return this;
}
    Foo.getName = function () { alert (2);};
    Foo.prototype.getName = function () { alert (3);};
    var getName = function () { alert (4);};
    function getName() { alert (5);}
    //請寫出如下輸出結果：
    Foo.getName(); //2
    getName(); // 4
    Foo().getName(); // 1
    getName(); // 1
    new Foo.getName(); //2 至關於 new (Foo.getName)();
    new Foo().getName(); // 3 至關於 (new Foo()).getName()
    new new Foo().getName(); // 3 至關於 new ((new Foo()).getName)()
複製代碼

new Foo.getName(); 和 new Foo().getName(); 的區別在於

new Foo 結合屬於 new 無參數列表的狀況（17級）

new Foo() 結合屬於 new 有參數列表的狀況（18級）

後三個能夠參考js的運算符優先級問題

10. Object.defineProperty()和 {} 出來的對象有什麼區別

這個問題說實話，我還真不太肯定是什麼，我以爲多是defineProperty定義出來的對象 還能夠定義是否可枚舉，可讀寫的屬性吧

更新於2018／07/05

今天在枚舉一個對象的時候，居然發現defineProperty定義出來的對象, 若是不定義enumerable:true是不能夠被枚舉的，而{}這樣聲明出來的對象就能夠直接被枚舉！

11）http緩存有什麼方法？ 強緩存，協商緩存，304

強緩存：carche-control ：max-age

協商緩存：利用304

12）call，apply的區別。這倆者和bind的區別。bind如何用原生實現出來。

call，apply的區別時後面的傳參。call時一個一個傳，apply時一個數組。

bind能時返回一個新的函數。

Function.prototype.bind = function (context) {
    //判斷調用此方法的是不是一個函數，不是函數就報錯
    if (typeof this !== "function") {
        throw new Error(this + "is not a function");
    }
    var self = this;
    var args = [];
    //把參數循環出來
    for (var i = 1, len = arguments.length; i < len; i++) {
        args.push(arguments[i]);
    }
 
    var fbound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    }
    fbound.prototype = Object.create(self.prototype);
    //返回的函數不只要和 被調函數的函數體相同，也要繼承人家的原型鏈
    return fbound;
}

複製代碼

13)一句話打亂一個數組?

arr.sort(function(){ return 0.5 - Math.random()})
複製代碼

14）箭頭函數的this的指向問題

阮一峯博客寫的很準確，推薦 箭頭函數

15）瀏覽器渲染原理 略（要很詳細的講，可能要寫一篇文章～，你們能夠去開源社區找專門的文章去了解～）

16）右邊固定，左邊自適應。左邊固定右邊自適應。上面固定高度，下面自適應高度。

//左邊自適應，右邊固定
.float-box{
    display:flex;
    justify-content:end;
}

.left{
    width: 100%;
    border:1px solid #ddd;
}
.right{
    width:300px;
    border:1px solid #ddd;
}
複製代碼

17）水平居中？水平垂直居中？

水平居中

inline 元素用text-align: center;便可，以下

.container {
   text-align: center;
}

複製代碼

block 元素可以使用margin: auto;，PC 時代的不少網站都這麼搞。

.container {
    text-align: center; 
}
.item {
    width: 1000px;
    margin: auto; 
}
複製代碼

絕對定位元素可結合left和margin實現，可是必須知道寬度。

.container {
    position: relative;
    width: 500px;
}
.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin: -150px;
}

複製代碼

垂直居中

inline 元素可設置line-height的值等於height值，如單行文字垂直居中：

.container {
   height: 50px;
   line-height: 50px;
}

複製代碼

絕對定位元素，可結合left和margin實現，可是必須知道尺寸。

• 優勢：兼容性好
• 缺點：須要提早知道尺寸

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

複製代碼

絕對定位可結合transform實現居中。

• 優勢：不須要提早知道尺寸
• 缺點：兼容性很差

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

複製代碼

絕對定位結合margin: auto，不須要提早知道尺寸，兼容性好。

.container {
    position: relative;
    height: 300px;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
複製代碼

---

下節預告：算法題～～ 我已經在努力高產的像母豬了～

---

更新於 2018/7/03 11:38

噹噹噹～ 新鮮出爐～ 2018年6月前端面試經歷(中)