Javascript中函數(shù)分類&this指向的實例詳解

更新時間：2021年05月16日 10:00:57 作者：qinzheng_chen

其實想要徹底理解js中this的指向，不必硬背，這篇文章主要給大家介紹了關(guān)于Javascript中函數(shù)分類&this指向的相關(guān)資料,需要的朋友可以參考下

JS中定義函數(shù)的三種方式

通過實例來說明吧

<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>

運行上面例子，證明了函數(shù)也是對象。可以采用new + 構(gòu)造函數(shù)的方式創(chuàng)建實例，第三種方式執(zhí)行效率低。

函數(shù)的原型鏈

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

JS中函數(shù)的分類和調(diào)用方式

通過實例來說明吧

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

        //方式3 構(gòu)造函數(shù) this指向新創(chuàng)建的對象，這里指向star1
        function Star(username){
            this.username = username;
        }
        var star1 = new Star('ldh');

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

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

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


    </script>

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

我們可以知道函數(shù)后面加了() 表示立即調(diào)用，沒加()，表示函數(shù)的指針，只是指明函數(shù)不調(diào)用函數(shù)。
this 指向問題，牢記this指向調(diào)用者

改變this 指向的三個函數(shù)

this 指向是JS中很重要的問題，在上面的函數(shù)分類中，已經(jīng)有了系統(tǒng)的分析。下面重點總結(jié)改變this 指向的三個函數(shù)

call

把父類實例改成子類實例實現(xiàn)屬性繼承

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

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

apply

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

主要使用借助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 的指向不調(diào)用函數(shù)

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

<body>
    <button>click me</button>
    <button>click me</button>
    <button>click me</button>
    <script>
        //bind function
        //案例：實現(xiàn)多個按鈕發(fā)送驗證碼后 3s 可以再次發(fā)送
        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 后執(zhí)行
                }.bind(this), 3000);
            }
        }        
    </script>
</body>