2020-題目（JavaScript）

阿新 • • 發佈：2020-12-28

1.this指向問題

    var length = 10

    function fn(){
      console.log(this.length)
    }
    
    let obj = {
      length : 5,
      method : function(fn){
        fn()
        arguments[0]()
      }
    }

    obj.method(fn,1) // 執行結果：10 2

2.宣告提前

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

    fn(1) // ƒ a(){}   2

3.區域性變數和全域性變數

    var f = true
    if(f===true){
      var a = 10
    }
    function fn(){
      var b = 20
      c = 30
    }
    fn()
    console.log(a) // 10
    console.log(c) // 30 未宣告則強行建立全域性變數b=30 
    console. 
log(b) // undefined

4.變數隱式宣告

    // in：專門判斷一個物件中，是否包含指定名稱的屬性
    // 一切全域性物件，其實都是window物件的成員
    if('a' in window){
      var a = 10
    }
    alert(a) // 10
    console.log(a) // 10
    console.log(window.a) // 10
    console.log(window['a']) // 10

    var a1 = 10
    window.a2 = 20
    window['a3'] = 30
    let a4 = 40 

    delete window.a1
    delete window.a2
    delete window.a3
    delete window.a4
    console.log(window)
    // a: 10
    // a1: 10 用var建立的全域性變數無法被delete刪除,所以建立物件時建議使用window.變數名；或者使用let

5.給基本型別資料新增屬性不報錯，但訪問值時是undefined – 包裝型別

    /*
    包裝型別：
    專門封裝原始型別，並提供對原始型別執行操作的API
    每當對原始型別的值呼叫方法或訪問屬性時，都會自動建立包裝型別物件
    原理：表面上是對原始型別的變數呼叫方法，實際上是對自動建立的包裝型別物件呼叫方法和訪問屬性，呼叫完畢後包裝型別物件自動釋放
    */
    var a = 10
    a.pro = 10
    /*
    typeof a 返回number，則：
    new Number(10).pro = 10
    隨著包裝型別物件釋放，pro也被釋放
    */
    console.log(a.pro + a) // NaN
    /*
    再次訪問a.pro，再次new Number(10).pro，返回undefined
    undefined + 10 = NaN
    */

    var s = 'hello'
    s.pro = 'world'
    /*
    typeof s 返回string，則：
    new String('hello').pro = 'world'
    隨著包裝型別物件釋放，pro也被釋放
    */
    console.log(s.pro + s) // undefinedhello,原因同上
    /*
    再次訪問s.pro，再次new String('hello').pro，返回undefined
    undefined + 'hello' = undefinedhello
    */

6.函式宣告優於變數宣告

    console.log(typeof fn) // function
    function fn(){}
    var fn = 10

7.經典利用閉包問題

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 實現一段指令碼，使得點選對應連結alert出相應的編號 -->
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>


  <script>
    var btns = document.getElementsByTagName('button')
    var i = 1

    for(var btn of btns){

      btn.onclick = (function(i){
        // 相當於 var i = 全域性變數i傳入的值1、2、3、4
        return function(){ // 利用閉包(i=1)(i=2)(i=3)(i=4)
          alert(i)
        }
      })(i++)

    }
  </script>
</body>
</html>

8.原型物件和繼承，及事件處理函式中this的指向

    function JSClass(){
      this.m_Text = 'division element'
      this.m_Element = document.createElement('div')
      this.m_Element.innerHTML = this.m_Text
      this.m_Element.addEventListener(
        'click',this.func//.bind(this)
        /*
        事件處理函式等回撥函式傳遞時，僅傳遞.後的函式物件，不會保留.前的物件
        因此，當回撥函式執行時，this和原理.前的物件無關
        而是指向呼叫該函式的物件，即div.m_Text，也即undefined
        若要將this的指向繫結將來new出的新物件，改寫為this.func.bind(this)即可,可得division element
        */
      )
    }

    JSClass.prototype.Render = function(){
      document.body.appendChild(this.m_Element)
    }

    JSClass.prototype.func = function(){
      alert(this.m_Text)
    }

    var jc = new JSClass()
    jc.Render() // 點選後彈框顯示 undefined
    jc.func() // 彈框顯示 division element

9.split

編寫一個函式parseQueryString，把URL引數解析為一個物件

    // http://localhost:3000products?key0=0&key1=1&key2=2
    // search = location.search
    var search = '?key0=0&key1=true&key2=hello'
    search = search.slice(1)

    var strs = search.split('&')
    console.log(strs)

    var params = {}
    // 遍歷每個字串，按'='切割，第[0]個作屬性名，第[1]個作屬性值
    for(var str of strs){
      var arr = str.split('=')
      // params[arr[0]] = arr[1]
      params[arr[0]] = isNaN(arr[1]) ? arr[1] :Number(arr[1])
    }

    console.log(params)
    /*
    params = {
      key0:0,
      key1:1,
      key2:2,
    }
    */