欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

1、普通函數(shù)

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

打印結果為：

在這里插入圖片描述

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

2、構造函數(shù)

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

打印結果為：

在這里插入圖片描述

可知對象方法調用時this指向的是該方法的實例對象。

3、對象方法

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

打印結果為：

在這里插入圖片描述

可知對象方法調用時this指向的是該方法所屬對象。

4、事件綁定方法

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

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

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

當我們點擊按鈕時，可以得到：

在這里插入圖片描述

可知，綁定事件調用時this指向的是綁定事件對象。

5、定時器函數(shù)

寫一個定時函數(shù)，讓他在1s后調用該函數(shù)。

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

打印結果為：

在這里插入圖片描述

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

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

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

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

打印結果為：

在這里插入圖片描述

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

綜上，我們可以總結為：

調用方式 this指向
普通函數(shù)調用 window
構造函數(shù)調用 實例對象，原型對象里面的方法也指向實例對象
對象方法調用 該方法所屬對象
事件綁定方法 綁定事件對象
定時器函數(shù) window
立即執(zhí)行函數(shù) window

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

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

1、call 方法

先定義一個對象和一個函數(shù)。

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

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

fn.call(o)

打印的結果為：

在這里插入圖片描述

this指向成功修改。

2、apply 方法

方法同上。

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

打印結果為：

在這里插入圖片描述

3、bind 方法

bind()方法不會調用函數(shù)。但是能改變函數(shù)內部this指向 。

語法：

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

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

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

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

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

打印結果為：

在這里插入圖片描述

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

三、call apply bind 總結

1、相同點

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

2、不同點?

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

3、應用場景?

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

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!

相關文章

最新評論