亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript函數(shù)this指向問(wèn)題詳解

 更新時(shí)間：2021年11月23日 16:24:05   作者：bear*6  
這篇文章主要為大家介紹了JavaScript函數(shù)this指向，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

一、 函數(shù)內(nèi) this 的指向

這些?this的指向，是當(dāng)調(diào)用函數(shù)的時(shí)候確定的。 調(diào)用方式的不同決定了this 的指向不同，一般指向調(diào)用者。
現(xiàn)在我們來(lái)具體看看吧！

1、普通函數(shù)

function fn(){
            console.log('普通函數(shù)的this:'+this);
        }
        fn()

打印結(jié)果為：

在這里插入圖片描述

可知普通函數(shù)調(diào)用時(shí)this指向的是?window

2、構(gòu)造函數(shù)

function Star(){
            console.log('構(gòu)造函數(shù)的this:'+this);
        }
        new Star()

打印結(jié)果為：

在這里插入圖片描述

可知對(duì)象方法調(diào)用時(shí)this指向的是該方法的實(shí)例對(duì)象。

3、對(duì)象方法

 var o = {
            print: function(){
                console.log('對(duì)象方法的this:'+this);
            }
        }
        o.print()

打印結(jié)果為：

在這里插入圖片描述

可知對(duì)象方法調(diào)用時(shí)this指向的是該方法所屬對(duì)象。

4、事件綁定方法

當(dāng)我們給某個(gè)按鈕添加了一個(gè)綁定事件，他的this又是如何指向的呢？

例如現(xiàn)在有一個(gè)button按鈕，現(xiàn)在我們給它添加一個(gè)點(diǎn)擊事件，如下：

<body>
    <button>按鈕</button>
    <script> 
	var btn = document.querySelector('button');
	btn.onclick = function(){
    	console.log('綁定事件的this:'+this);
	}
    </script>
</body>

當(dāng)我們點(diǎn)擊按鈕時(shí)，可以得到：

在這里插入圖片描述

可知，綁定事件調(diào)用時(shí)this指向的是綁定事件對(duì)象。

5、定時(shí)器函數(shù)

寫(xiě)一個(gè)定時(shí)函數(shù)，讓他在1s后調(diào)用該函數(shù)。

window.setTimeout(function(){
            console.log('定時(shí)器的this:'+this);
        },1000)

打印結(jié)果為：

在這里插入圖片描述

可知，定時(shí)器函數(shù)調(diào)用時(shí)this指向的是window。

6、立即執(zhí)行函數(shù)

定義一個(gè)立即執(zhí)行函數(shù)：

(function(){
            console.log('立即執(zhí)行函數(shù)的this:'+this);
        })();

打印結(jié)果為：

在這里插入圖片描述

可知，立即執(zhí)行函數(shù)調(diào)用時(shí)this指向的是window。

綜上，我們可以總結(jié)為：

調(diào)用方式 this指向
普通函數(shù)調(diào)用 window
構(gòu)造函數(shù)調(diào)用 實(shí)例對(duì)象，原型對(duì)象里面的方法也指向?qū)嵗龑?duì)象
對(duì)象方法調(diào)用 該方法所屬對(duì)象
事件綁定方法 綁定事件對(duì)象
定時(shí)器函數(shù) window
立即執(zhí)行函數(shù) window

二、改變函數(shù)內(nèi)部 this 指向

但是在函數(shù)中，this指向也不是一成不變的，我們可以通過(guò)一些方法來(lái)更改this指向，主要有以下幾種方法。前面在總結(jié)原型對(duì)象中this的指向問(wèn)題中，有提到過(guò)call方法和apply方法，這里就不重復(fù)了，直接舉例。

1、call 方法

先定義一個(gè)對(duì)象和一個(gè)函數(shù)。

 var o = {
            name:'xl'
        }
        function fn(){
            console.log(this);
        }

此時(shí)的this在一個(gè)普通的函數(shù)里面，前面有提到過(guò)，普通函數(shù)的this指向windiw，現(xiàn)在如果想將this的指向o對(duì)象，我們應(yīng)該：

fn.call(o)

打印的結(jié)果為：

在這里插入圖片描述

this指向成功修改。

2、apply 方法

方法同上。

var o = {
            name:'xl'
        }
        function fn(){
            console.log(this);
        }
        fn.apply(o);

打印結(jié)果為：

在這里插入圖片描述

3、bind 方法

bind()方法不會(huì)調(diào)用函數(shù)。但是能改變函數(shù)內(nèi)部this指向 。

語(yǔ)法：

fun.bind(thisArg, arg1, arg2, ...)

thisArg：在 fun 函數(shù)運(yùn)行時(shí)指定的 this 值arg1，arg2：傳遞的其他參數(shù)返回由指定的 this 值和初始化參數(shù)改造的原函數(shù)拷貝

因此當(dāng)我們只是想改變this?指向，并且不想調(diào)用這個(gè)函數(shù)的時(shí)候，可以使用?bind。

如下（還是用上面的例子）：

 var o = {
            name:'xl'
        }
        function fn(){
            console.log(this);
        }
        var f = fn.bind(o);
       f();

打印結(jié)果為：

在這里插入圖片描述

這里需要注意的是：由于bind()方法不會(huì)調(diào)用函數(shù)，修改this指向后，返回的是一個(gè)新函數(shù)，所以我們可以將這個(gè)新函數(shù)賦給一個(gè)f，然后通過(guò)f來(lái)調(diào)用。

三、call apply bind 總結(jié)

1、相同點(diǎn)

都可以改變函數(shù)內(nèi)部的this指向。

2、不同點(diǎn)?

  • call?和?apply?會(huì)調(diào)用函數(shù), 并且改變函數(shù)內(nèi)部this指向。
  • -call?和?apply?傳遞的參數(shù)不一樣,?call?傳遞參數(shù) aru1, aru2…形式?apply必須數(shù)組形式[arg]。
  • bind?不會(huì)調(diào)用函數(shù), 可以改變函數(shù)內(nèi)部this指向。

3、應(yīng)用場(chǎng)景?

  • call?經(jīng)常做繼承。
  • apply?經(jīng)常跟數(shù)組有關(guān)系。比如借助于數(shù)學(xué)對(duì)象實(shí)現(xiàn)數(shù)組最大值最小值。
  • bind?不調(diào)用函數(shù),但是還想改變this指向. 比如改變定時(shí)器內(nèi)部的this指向。

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

最新評(píng)論