函數調用加括號與不加括號的區別


寫在前面:最近做的一個項目用是很久之前的,在維護項目中就無法使用vue等技術來操作,所以一些方法用的是原生來寫的,在綁定點擊方法時,方法名沒加括號,就沒生效,加了括號就生效了,當時有疑惑的點是在之前做vue的項目中,我記得不加括號也是完全可以的,於是就詳細的查了一下。

原生方法調用函數

在script里寫方法,不加括號的話就相當於得到的是這個函數體,是這個函數本身,並不會執行函數

<body>
    <div>函數調用是否要加括號</div>
    <button>點擊變色</button>
    <script type="text/javascript">
      var div = document.getElementsByTagName('div')[0];
      var btn = document.getElementsByTagName('button')[0];

        function reset(){
            div.style.color='green'
        }
        btn.onclick = reset //1.這種情況相當於  btn.onclick = function reset(){...} ,點擊之后執行這個事件。得到是函數體
        btn.onclick = reset()  //2.這種情況可以理解成給函數外面加了括號成了自執行函數,不用點擊就得到了一個函數執行后面的結果

    </script>
</body>

當然以上兩種大家都明白,不會有什么疑惑,用習慣vue中的方法調用時和再用原生遇到的疑惑的點在於在行內加方法,

   <div>函數調用是否要加括號</div>
    <button onclick="reset()">點擊變色</button>
    <script type="text/javascript">
      var div = document.getElementsByTagName('div')[0];
      var btn = document.getElementsByTagName('button')[0];

        function reset(){
            div.style.color='green'
        }

在原生的行內加方法時是要加()才能執行的 具體原因,哈哈,我想多了會把自己繞進去,歡迎你們解答

vue方法中調用函數

這個其實加不加括號,這個方法都會執行,加()我一般會考慮到傳參的問題,

  • 不加括號,默認傳遞參數為 MouseEvent,
  • 加括號,括號中使用$event, 才能獲取到MouseEvent,不過我們這種加括號的情況,一般是傳自己需要的參數

歡迎指正~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM