面試題(JS)

基本數據類型

number string boolean null undefined symbol

underfined

變量的初始值
數組越界
函數默認返回值
訪問對象沒有的屬性

引用數據類型

array object

判斷數據類型

typeof
arr.constructor == Array
arr instanceOf Array
Array.isArray(arr)

繼承

 function Animal(name, age) {
            this.name = name
            this.age = age
        }
        Animal.prototype.eat = function() {
            console.log("吃飯")
        }
        function Cat(name, age) {
            Animal.call(this, name, age) //執行父級的構造函數,替換this
        }
        Cat.prototype = new Animal()   //原型指向父類實例
        Cat.prototype.constructor = Cat  // constructor 指向自身
        var mimi = new Cat('xioami', 2)

捕獲和冒泡

捕獲從外往裏,.冒泡從裏往外
先捕獲後冒泡

 var div = document.querySelector("div")
        div.addEventListener('click',function(){
            
        },true) //爲true時先捕獲後冒泡
        

 var div = document.querySelector("div")
        div.addEventListener('click',function(){
            
        },false) //默認先冒泡後捕獲

事件對象

<div class="fa">
        <div class="son"></div>
    </div>
    <script>
        var fa = document.querySelector(".fa")
        var son = document.querySelector(".son")
        fa.addEventListener('click', function(e) {
            console.log(e.target); //觸發事件的對象 
            console.log(this);  // 綁定事件的對象 


        })
    </script>

阻止事件冒泡和默認行爲

    e.preventDefault() //阻止默認事件
            e.stopPropagation() //阻止冒泡

事件委託

  <button id="btn">11</button>
    <ul>
        <li>ss</li>
        <li>ff</li>
    </ul>
    <script>
        var oul = document.querySelector('ul')
        var btn = document.querySelector('#btn')
        btn.addEventListener('click', function() {
            var oli = document.createElement('li')
            oli.innerHTML = Math.random()
            oul.appendChild(oli)
        })
        oul.addEventListener('click', function(e) {
            console.log(e.target.innerHTML);

        })
    </script>

動態綁定事件,
減少內存消耗

jQuery的事件委託