摘要：全局環境調用函數的對象實際為，所以函數內的指向構造函數通過構造函造函數生成了一個新對象，指向這個新對象。學習前端一個月，上一周面試了大概多家，收獲的卻是寥寥。為了效率，前端各方面的內容都有涉獵，深度卻相當不足，面試時暴露各種問題。

最近面試了不少家，苦于前端經驗薄弱，被各種血虐。做了不少家面試題，把各種不會的回來再做一遍，作為經驗總結吧。

方法有好多，比如新建一個數組，原數組的內容依次往里放，若該數組元素已存在，則跳過；又或者先排序，依次比較前后兩個元素是否相等，若相等，則去掉刪除后一個元素。面試官有提到使用 filter 的方法,但是當場沒想到，發現這個方法其實屬于相當不錯的，這種函數式的思維在某些地方相當實用。

var arr = [3,5,2,6,2,3,5,8,6]

function distinct(arr) {
    return arr.filter(function (elem,index,arr){
        return arr.indexOf(elem,index+1) === -1;
    });
}

console.log(distinct(arr));

思路擴展
比如說存在一個數組，其中元素為對象，根據對象某個屬性進行排序。例如將以下data數組按age正序排列，常規的辦法可能是通過比較age大小，操作對象來進行排序，這樣代碼會比較復雜。而更優的方法則是通過 sort 方法。

var data = [
{name:"xiaoming",age:18},
{name:"xiaohua",age:20},
{name:"xiaoli",age:25},
{name:"xiaozheng",age:16}];

查閱 MDN 關于 sort 方法，此方法明顯代碼量更少，含義更加清晰。

function asc_order(data){
    return data.sort(function (a,b){
        return a.age- b.age;
    })
}

function fn(a){
    console.log(a);
    var a=2;
    function a(){}
    console.log(a);
}
fn(1);

以上代碼輸出內容？
此前看書時有了解到變量聲明會提升到作用域頂部，但忘記了變量賦值保持在原處，同時變量聲明和函數聲明的先后關系不確定，所以此題對我來說比較難，只能瞎蒙答案。

function  fn(a){
    var a;
    function a(){}
    console.log(a);
    a = 2;
    console.log(a);
}

fn(1);

所有全局變量都是window或Global的屬性

函數聲明會被提到范圍作用域的頂端

變量聲明被提到范圍作用域的頂端

變量聲明比函數聲明優先級高，變量聲明優于函數聲明，如果兩者同時存在，后被提升的函數聲明會覆蓋被提升的變量聲明

變量賦值不會被提升，到執行行代碼才開始賦值

參考博客地址，根據以上五點共識，可將代碼翻譯如上所示。

深入思考
為什么JavaScript相比較其它語言會存在聲明提升？變量聲明時編譯器做了什么？變量賦值時編譯器又做什么了？

var a = 10;
function test(){
    a = 100;
    console.log(a);
    console.log(this.a);
    var a;
    console.log(a);
}
test();

var a = 100;function test(){
    console.log(a);
    var a = 10;
    console.log(a);
}
test();

var a = 100;function test(){
    console.log(a);
    a = 10;
    console.log(a);
}

test();
console.log(a);

在非嚴格環境下，以上三個代碼分別輸出什么？碰到這種題目我也是頭暈眼花，稍有不慎就掉坑了。當然實際業務中不會出現這樣的代碼，但還是相當有必要以這樣的代碼來檢查對 JavaScript 理解的程度。
this 的用法參照阮一峰老師的博客，主要分為三種情況,但總的原則是指向調用函數的那個對象。

全局環境:調用函數的對象實際為 window ，所以函數內的 this 指向 window ;

構造函數:通過構造函造函數生成了一個新對象，this 指向這個新對象。

對象的方法：函數作為對象的某個方法調用， this 就指向這個上級對象。

故第一道題中屬于全局環境， this 指向 window ，所以輸出結果為：100，10，100；
第二道題輸出結果為：undefined，10；第三道題輸出結果為：100，10，10；

for (var i = 0;i<=3;i++){
    setTimeout(function (){
        console.log(i);
    },0);
}

此題輸出內容是什么？

setTimeout 為 Window 對象方法，用來注冊在指定的事件之后單次或重復調用的函數。

setTimeout的作用是將代碼推遲到指定時間執行，如果指定時間為0，即setTimeout(f,0)，那么會立刻執行嗎？
答案是不會。因為上一段說過，必須要等到當前腳本的同步任務和“任務隊列”中已有的事件，全部處理完以后，才會執行setTimeout指定的任務。也就是說，setTimeout的真正作用是，在“消息隊列”的現有消息的后面再添加一個消息，規定在指定時間執行某段代碼。setTimeout添加的事件，會在下一次EventLoop執行。
setTimeout(f,0)將第二個參數設為0，作用是讓f在現有的任務（腳本的同步任務和“消息隊列”指定的任務）一結束就立刻執行。也就是說，setTimeout(f,0)的作用是，盡可能早地執行指定的任務。而并不是會立刻就執行這個任務。

所以最終的結果是當前的函數執行結束之后，再去執行 setTimeout 定義的內容。

XXXXXXXXXX

最后實際的問題是什么顏色？
存在多個類名時，類名的位置不會對屬性的渲染產生影響。只有在style中定義的位置才會有影響，同一條屬性，后面定義的會覆蓋前面定義的屬性。

即對一個元素綁定一個事件，操作一次后綁定事件失效。

HTML部分：

XXXXXXXXXX

JS部分：

window.onload = function(){
    var target = document.getElementById("target");
    function fn(e){
        alert("hello");
        target.removeEventListener("click",fn);
    };
    target.addEventListener("click",fn);
}

此代碼雖可行，但沒有進行封裝，不便于使用。

正統封裝后的JS代碼，使用 arguments.callee 表示當前 function ，同時需對 event 上的屬性有所了解。

function oneTime(node,type,callback){
    node.addEventListener(type,function (e){
        e.target.removeEventListener(e.type,arguments.callee);
        return callback(e);
    });
}
function handle(e){
    alert("hello!");
}
oneTime(p,"click",handle);

學習前端一個月，上一周面試了大概10多家，收獲的 offer 卻是寥寥。
為了效率，前端各方面的內容都有涉獵，深度卻相當不足，面試時暴露各種問題。
還是需深入思考，欲速則不達?。?/p>

大概是要加入大魚或者小悟，以后工作好好努力吧！