Javascript中函數分類&this指向的實例詳解

Posted on by

JS中定義函數的三種方式

通過實例來說明吧

<script>
        //method1
        function fn() {
            console.log('fn created ');
        }
        //method2
        var fn2 = function () {
            console.log('fn2 created');
        }
        //method3
        var fn3 = new Function('test', 'console.log(test);');
        fn3('fn3 test');
        console.dir(fn3);
        console.log(fn3 instanceof Object);
    </script>

運行上面例子，證明瞭函數也是對象。可以采用new + 構造函數的方式創建實例，第三種方式執行效率低。

函數的原型鏈

從結果可以看到Function原型對象的__proto__指向Object。

JS中函數的分類和調用方式

通過實例來說明吧

<script>
        //函數的分類和調用方式
        //方式1 普通標準函數,this 指向window
        function fn() {
            console.log('fn1'+ this);
        }
        fn(); //本質是window.fn(); 全局函數是window的成員       
        //方式2 對象的方法 this 指向調用者o
        var o = {
            sayHi: function () {
                console.log('fn2'+this);
            }
        }
        o.sayHi();

        //方式3 構造函數 this指向新創建的對象，這裡指向star1
        function Star(username){
            this.username = username;
        }
        var star1 = new Star('ldh');

        //方式4 綁定事件函數 this 指向函數的調用者 btn
        var fn = function (){
            console.log('btn 被點擊瞭'+ this);
        }
        btn.onclick = fn;
        //點擊瞭按鈕就可以調用函數

        //方式5 定時器函數 定時器實際是window成員 所以this 就是window
        setInterval(function(){},1000);
        //定時器按照設定的時間間隔去調用
        
        //方式6 立即執行函數 this 是window 同方式一

        (function(){console.log('function executed')})();
//不需要調用立即執行      


    </script>

通過上面的例子，基本上歸納瞭筆者瞭解的函數使用方式。通過方式4和方式6的對比，

  • 我們可以知道函數後面加瞭() 表示立即調用，沒加()，表示函數的指針，隻是指明函數不調用函數。
  • this 指向問題，牢記this指向調用者

改變this 指向的三個函數

this 指向是JS中很重要的問題，在上面的函數分類中，已經有瞭系統的分析。下面重點總結改變this 指向的三個函數

call

把父類實例改成子類實例 實現屬性繼承

<script>
        //call function 
        function Father(username, age) {
            this.username = username;
            this.age = age;
        }

        function Son(username, age, gender) {
            Father.call(this, username, age);//實現繼承父類的屬性
            this.gender = gender;
        }
    </script>

apply

apply 和call 不同點，參數是數組(偽數組)。在apply內部會把數組拆成元素

主要使用 借助Math對象，Math.max.apply(Math, [4324, 45, 342, 23])

<script>
        //apply function 
        var o = {
            username: 'testuser'
        };
        function fn(arr) {
            console.log(arr);
            for (let i = 0; i < arr.length; i++) {
                console.log(arr[i]);

            }
            console.log(this);
        }

        fn.apply(o, [23, 43]);
        console.log(Math.max(43, 45, 243, 342));
        console.log(Math.max.apply(Math, [4324, 45, 342, 23])); 
    </script>

bind

隻改變this 的指向 不調用函數

用途改變綁定事件的this，案例

<body>
    <button>click me</button>
    <button>click me</button>
    <button>click me</button>
    <script>
        //bind function
        //案例：實現多個按鈕發送驗證碼後 3s 可以再次發送
        var btns = document.querySelectorAll('button');
        for (let i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                this.disabled = true;
                setTimeout(function () {
                    this.disabled = false;//改變this 指向btn ,3000ms 後執行
                }.bind(this), 3000);
            }
        }        
    </script>
</body>

總結

到此這篇關於Javascript中函數分類&this指向的文章就介紹到這瞭,更多相關JS函數分類this指向內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：