Javascript中定義函數(shù)的三種方式，通過(guò)實(shí)例來(lái)說(shuō)明吧。


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

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

函數(shù)的原型鏈

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

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

通過(guò)實(shí)例來(lái)說(shuō)明吧。


<script>        //函數(shù)的分類和調(diào)用方式        //方式1 普通標(biāo)準(zhǔn)函數(shù),this 指向window        function fn() {            console.log('fn1'+ this);        }        fn(); //本質(zhì)是window.fn(); 全局函數(shù)是window的成員              //方式2 對(duì)象的方法 this 指向調(diào)用者o        var o = {            sayHi: function () {                console.log('fn2'+this);            }        }        o.sayHi();
        //方式3 構(gòu)造函數(shù) this指向新創(chuàng)建的對(duì)象，這里指向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 被點(diǎn)擊了'+ this);        }        btn.onclick = fn;        //點(diǎn)擊了按鈕就可以調(diào)用函數(shù)
        //方式5 定時(shí)器函數(shù) 定時(shí)器實(shí)際是window成員 所以this 就是window        setInterval(function(){},1000);        //定時(shí)器按照設(shè)定的時(shí)間間隔去調(diào)用
        //方式6 立即執(zhí)行函數(shù) this 是window 同方式一
        (function(){console.log('function executed')})();//不需要調(diào)用立即執(zhí)行     </script>

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

我們可以知道函數(shù)后面加了() 表示立即調(diào)用，沒(méi)加()，表示函數(shù)的指針，只是指明函數(shù)不調(diào)用函數(shù)。

this 指向問(wèn)題，牢記this指向調(diào)用者

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

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

call

把父類實(shí)例改成子類實(shí)例實(shí)現(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);//實(shí)現(xiàn)繼承父類的屬性            this.gender = gender;        }</script>

apply

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

主要使用借助Math對(duì)象，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        //案例：實(shí)現(xiàn)多個(gè)按鈕發(fā)送驗(yàn)證碼后 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>

本文完~

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

Javascript - 函數(shù)分類 & this指向

Javascript中定義函數(shù)的三種方式，通過(guò)實(shí)例來(lái)說(shuō)明吧。

函數(shù)的原型鏈

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

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

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)