前端筆試之2019網易校招

今天剛做完網易校招的前端筆試題，總體難度不算很難，有送分題也有拉分題，不過大公司的筆試算法題占比最大，整套筆試題的題型與分值分布分別是：單選題40分共20題、編程題60分共3題、問答題20分共2題，是牛客網的筆試。

遇到一道比較坑的單選題，在此記錄一下。

以下代碼執行時console.log的結果是：

var obj = {
  x: 1,
  xyz: function () {
      with(this) {
          function con () {
            console.log(x);
            console.log(this.x);
          }
          var x = 2;
          (function() {
              con()
          })()
          con.call(this)
      }
  }
}

obj.xyz()

執行結果：

 要理解這道題就必須搞懂每一個this指向的是什么，所以我們可以把對應的各個this打印出來分析一波

var obj = {
  x: 1,
  xyz: function () {
      console.log('1', this)
      with(this) {
        function con () {
          console.log('2', this)
          console.log(x);
          console.log(this.x);
        }
        var x = 2;
        console.log('3', this);
        (function() {
          con()
        })()
        con.call(this)
      }
  }
}

obj.xyz()

執行結果如下：

從執行順序分析，1號this打印出來的是obj對象，也就是說with傳進去的是obj對象，在with代碼塊里，首先聲明了con函數，然后再執行了var x=2；這一段代碼，而with修改了詞法作用域，把with代碼塊里的上下文改為obj對象，那么這段代碼等同於obj.x = 2，即把obj對象里的x屬性修改為2，接着打印了3號this，值為obj對象，驗證了with代碼塊的上下文是obj對象。接着執行了一個立即執行函數，函數里調用了con函數。在《你不知道的JavaScript上卷》第2章里有提到函數里this的綁定取決於函數的調用方式，而於函數聲明的位置無關，this的綁定規則有四個：默認綁定（獨立函數調用）、隱式綁定（obj.foo()）、顯示綁定（call()和apply()）和new綁定。顯然，立即執行函數里直接調用con函數，屬於默認綁定，默認綁定this會指向全局對象(window或global)，所以第9行console.log(this.x)打印的是window.x，而全局對象window中並沒有定義x，因此打印出undefined，而第8行console.log(x)打印的是當前詞法作用域里的x，即為obj.x，打印出2。接着分析第16行代碼con.call(this)相當於con.call(obj)，顯然，使用call()方法調用con函數，顯示綁定this指向obj，所以第9行console.log(this.x)打印的是obj.x，即為2，然后第8行同理打印的是當前詞法作用域里的x。如此分析一波，這道題的答案就很清晰明了了。