Javascript中函式分類&this指向的例項詳解

阿新 • • 發佈：2021-05-17

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 + 建構函式的方式建立例項，第三種方式執行效率低。

函式的原型鏈

Javascript中函式分類&this指向的例項詳解

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

Javascript中函式分類&this指向的例項詳解

JS中函式的分類和呼叫方式

通過例項來說明吧

<script>
        //函式的分類和呼叫方式
        //方式1 普通標準函式,this 指向wind程式設計客棧ow
        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) {
            conhttp://www.cppcns.comsole.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,243,342));
        console.log(Math.max.apply(Math,23])); 
    </script>

bind

只改變this 的指向不呼叫函式

用途改變繫結事件的this，案例

<body>
    <button&www.cppcns.comgt;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指向內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

Javascript中函式分類&this指向的例項詳解

js中定義函式的三種方式通過例項來說明吧 <script> //method1 function fn() { console.log(\'fn created \');

Javascript - 函式分類 & this指向

js中定義函式的三種方式通過例項來說明吧 <script>//method1function fn() {console.log(\'fn created \');}//method2var fn2 = function () {console.log(\'fn2 created\');}//method3var fn3 = new Funct