摘要：全局環(huán)境調(diào)用函數(shù)的對(duì)象實(shí)際為，所以函數(shù)內(nèi)的指向構(gòu)造函數(shù)通過(guò)構(gòu)造函造函數(shù)生成了一個(gè)新對(duì)象，指向這個(gè)新對(duì)象。學(xué)習(xí)前端一個(gè)月，上一周面試了大概多家，收獲的卻是寥寥。為了效率，前端各方面的內(nèi)容都有涉獵，深度卻相當(dāng)不足，面試時(shí)暴露各種問(wèn)題。

最近面試了不少家，苦于前端經(jīng)驗(yàn)薄弱，被各種血虐。做了不少家面試題，把各種不會(huì)的回來(lái)再做一遍，作為經(jīng)驗(yàn)總結(jié)吧。

方法有好多，比如新建一個(gè)數(shù)組，原數(shù)組的內(nèi)容依次往里放，若該數(shù)組元素已存在，則跳過(guò)；又或者先排序，依次比較前后兩個(gè)元素是否相等，若相等，則去掉刪除后一個(gè)元素。面試官有提到使用 filter 的方法,但是當(dāng)場(chǎng)沒(méi)想到，發(fā)現(xiàn)這個(gè)方法其實(shí)屬于相當(dāng)不錯(cuò)的，這種函數(shù)式的思維在某些地方相當(dāng)實(shí)用。

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));

思路擴(kuò)展
比如說(shuō)存在一個(gè)數(shù)組，其中元素為對(duì)象，根據(jù)對(duì)象某個(gè)屬性進(jìn)行排序。例如將以下data數(shù)組按age正序排列，常規(guī)的辦法可能是通過(guò)比較age大小，操作對(duì)象來(lái)進(jìn)行排序，這樣代碼會(huì)比較復(fù)雜。而更優(yōu)的方法則是通過(guò) sort 方法。

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

查閱 MDN 關(guān)于 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);

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

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

fn(1);

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

函數(shù)聲明會(huì)被提到范圍作用域的頂端

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

變量聲明比函數(shù)聲明優(yōu)先級(jí)高，變量聲明優(yōu)于函數(shù)聲明，如果兩者同時(shí)存在，后被提升的函數(shù)聲明會(huì)覆蓋被提升的變量聲明

變量賦值不會(huì)被提升，到執(zhí)行行代碼才開(kāi)始賦值

參考博客地址，根據(jù)以上五點(diǎn)共識(shí)，可將代碼翻譯如上所示。

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

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);

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

全局環(huán)境:調(diào)用函數(shù)的對(duì)象實(shí)際為 window ，所以函數(shù)內(nèi)的 this 指向 window ;

構(gòu)造函數(shù):通過(guò)構(gòu)造函造函數(shù)生成了一個(gè)新對(duì)象，this 指向這個(gè)新對(duì)象。

對(duì)象的方法：函數(shù)作為對(duì)象的某個(gè)方法調(diào)用， this 就指向這個(gè)上級(jí)對(duì)象。

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

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

此題輸出內(nèi)容是什么？

setTimeout 為 Window 對(duì)象方法，用來(lái)注冊(cè)在指定的事件之后單次或重復(fù)調(diào)用的函數(shù)。

setTimeout的作用是將代碼推遲到指定時(shí)間執(zhí)行，如果指定時(shí)間為0，即setTimeout(f,0)，那么會(huì)立刻執(zhí)行嗎？
答案是不會(huì)。因?yàn)樯弦欢握f(shuō)過(guò)，必須要等到當(dāng)前腳本的同步任務(wù)和“任務(wù)隊(duì)列”中已有的事件，全部處理完以后，才會(huì)執(zhí)行setTimeout指定的任務(wù)。也就是說(shuō)，setTimeout的真正作用是，在“消息隊(duì)列”的現(xiàn)有消息的后面再添加一個(gè)消息，規(guī)定在指定時(shí)間執(zhí)行某段代碼。setTimeout添加的事件，會(huì)在下一次EventLoop執(zhí)行。
setTimeout(f,0)將第二個(gè)參數(shù)設(shè)為0，作用是讓f在現(xiàn)有的任務(wù)（腳本的同步任務(wù)和“消息隊(duì)列”指定的任務(wù)）一結(jié)束就立刻執(zhí)行。也就是說(shuō)，setTimeout(f,0)的作用是，盡可能早地執(zhí)行指定的任務(wù)。而并不是會(huì)立刻就執(zhí)行這個(gè)任務(wù)。

所以最終的結(jié)果是當(dāng)前的函數(shù)執(zhí)行結(jié)束之后，再去執(zhí)行 setTimeout 定義的內(nèi)容。

XXXXXXXXXX

最后實(shí)際的問(wèn)題是什么顏色？
存在多個(gè)類名時(shí)，類名的位置不會(huì)對(duì)屬性的渲染產(chǎn)生影響。只有在style中定義的位置才會(huì)有影響，同一條屬性，后面定義的會(huì)覆蓋前面定義的屬性。

即對(duì)一個(gè)元素綁定一個(gè)事件，操作一次后綁定事件失效。

HTML部分：

XXXXXXXXXX

JS部分：

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

此代碼雖可行，但沒(méi)有進(jìn)行封裝，不便于使用。

正統(tǒng)封裝后的JS代碼，使用 arguments.callee 表示當(dāng)前 function ，同時(shí)需對(duì) 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);

學(xué)習(xí)前端一個(gè)月，上一周面試了大概10多家，收獲的 offer 卻是寥寥。
為了效率，前端各方面的內(nèi)容都有涉獵，深度卻相當(dāng)不足，面試時(shí)暴露各種問(wèn)題。
還是需深入思考，欲速則不達(dá)啊！

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