後臺小夥伴面試的時候緊急微信向我求助3道面試題，本著助人為樂+根正苗紅的前端開發出身，這重任必須接下！

力能扛鼎

二話不說，先上這3道題目，：

一、普通函式の this指向

var a = 'one';
function func() {
    this.a = 'two'
}
func()
    console.log(a);

• 這個簡單，顯然考的是this指向問題
• 當一個函式並非一個物件的屬性時候(就是我們正常的函式使用，不是new的建構函式)，那麼就會當作函式來呼叫，此時，this被繫結為全域性物件，瀏覽器環境下就是window物件
• 所以this.a顯然就是修改了全局裡var出來的那個a
• 輸出結果：two
• 難不倒我社會人
  
  
  

二、建構函式this指向2

    var a = 'one';
    function func() {
        this.a = 'two';
    }
    var o = new func();
    console.log(a);

• 也是考的this指向四大方式之一 — 建構函式模式
• 如果在一個函式前面那加上new關鍵字來呼叫，那麼其實就是會自動建立一個連結到該函式的原型prototype成員的新物件，所以此時this繫結的是這個新物件，不再是全域性。
• 意思就是：你建構函式想new折騰到天亮，都不管我window的事情，該是我的，還不是乖乖到console碗裡來~
• 輸出結果：one

穩住！ 我們能贏

三、

 var funcs = [];
    for(var i = 0; i<3;i++) {
        funcs[i] = function () {   
              console.log(i);  
        }
    }
    for(var j = 0;j<3;j++) {
        funcs[j]()
    }

• 噓，這題目有點意思

是時候該展現真正的技術了：搬出我的 男神和大佬

越厲害的人，越謙遜和善和耐心，點名表揚~~~

1.0 進階的我內心是這麼掙扎的

尚不知名但即將崛起的小佬–正是在下

2.0 男神是這麼講解的：

• 首先男神肯定我的理解，okey的(開心到飛起~)
• 其次，JavaScript的特性是變數跟著閉包，不是跟著{}(這就是在其他語言中常被稱為的塊)，所以使用let可以模擬塊級作用域
• 除此之外，有其他方法可以解決假如你想輸出012的方法：

面對男神的我
距離男神還有XXXXXXXXXX公里

//先寫一個函式
function focusGenerator(i) {
    return function() {
        console.log(i)
    }
}

var focues = [];
for (var i = 0; i < 3; i++) {
    focues[i] = focusGenerator(i); //i作為了形參，跟著for迴圈走
}
//其實就是下面這三個，
//focues[0] = focusGenerator(0);
//focues[1] = focusGenerator(1);
//focues[2] = focusGenerator(2);

for (let i = 0; i < 3; i++) {
    focues[i]()
}  
//輸出0 1 2 



//或者用下面的，兩者效果一樣的
var focues = [];
for (var i = 0; i < 3; i++) {
    focues[i] = focusGenerator(i);
}
for (let i = 0; i < 3; i++) {
    focues[i]()
}
//輸出0 1 2 

//其實上面四個for迴圈裡 var let隨便換，大概是2x2x2x2=16種排列組合，反正結果都是012

3.0 大佬是這麼講解滴：

var focues = [];
//劃重點：----
for (var i = 0; i < 3; i++) { //這裡設定了全域性的i
    focues[i] = function () {
        console.log(i) //在這裡用的也是全域性的i

    }
}
for (let i = 0; i < 3; i++) {
    focues[i]()
}

• 考察js的執行順序，
• for迴圈你可以理解為瞬間執行完 ；所以後面事件觸發的時候，i已經是3了

• 對於js來講， for (var i = 0; i < 3; i++)….這是一個程式碼塊；let可以做到讓i變成這個作用域中獨享，即將這個var換成let,此時輸出的就會是0 1 2了
  

  
  
  距離大佬還有XXXXXXXXXXXXX行程式碼
  

• 大佬還親自指點示範：

  • 打個比方 現在有三個蛋撻皮 你要給裡面塞蛋撻 想的是來一個塞一個 但是三個是同時來的 結果你只能給第三個裡面塞

• 本來想親自操刀，畫個蛋撻啥的：
  

  
  
  科技抽象的蛋撻原型
  

想想還是算了，畢竟資源豐富，
千圖網會員，阿里巴巴向量庫，Illustrator(AI)，SVG向量圖走起~！

• 圖示:
  

  
  
  科技抽象的蛋撻原型
  

• 最後，大佬還送我一句話，劃重點：很多東西專案裡遇到了用一倆次比這種自己用程式碼走衚衕要容易

• 恩恩恩，好的，您說的對，小姑娘受教啦~！

大總結

• 一篇文章，從資源搜尋，模擬場景，整合資訊，思考理解消化，大約花費3h時間
• 但是成長是全方面的，語言組織與風趣表達↑↑↑，對前端基礎的熟悉加深↑↑，軟體應用↑↑，與人溝通能力↑↑，而且還能認識大佬，還有男神這個大靠山
  
  
  
• 而且萬一有幸電腦前的你看了我的文章，比馬馬虎虎再好一點，又高擡貴手關注了俺，那小姑娘都能開心跳起來好幾天～
• 總之，小廣告來了猝不及防：簡書上也有自己的技術部落格賬號：Amelia_sun CSDN今天是第一次寫啦，
• 撒花★,°:.☆(￣▽￣)/$:.°★ 。