JavaScript 函數作用域、執行環境(this)、call、apply、bind 的用法

1fe1se 發布于2019-08-26 13:47 / 3067人閱讀

摘要：什么是函數的作用域函數作用域在中，作用域為可訪問變量，對象，函數的集合。函數作用域作用域在函數內修改。與函數又有什么關系呢對象是在運行時基于函數的執行環境綁定的。

什么是函數的作用域

函數作用域：在 JavaScript 中，作用域為可訪問變量，對象，函數的集合。JavaScript 函數作用域: 作用域在函數內修改。

this 與函數又有什么關系呢？

this對象是在運行時基于函數的執行環境綁定的。比如：在全局函數中，this 等同于 window 或者 global，而當函數被作為方法調用時，this 等于那個對象。特別需要注意的是在執行諸如:setInterval、setTimeout 等函數的回調時，此時的 this 其實是指向全局 window 的，因為類似這樣的方法其實是 window 的屬性方法。所以我們經常會看到類似下面的代碼：

var a = {
    age: 21,
    addAge: function() {
        var that = this
        setInterval(function() {
            that.age += 1
        }, 1000)
    }

那我們想改變函數執行時綁定的 this 怎么辦呢？

call、apply、bind 可以用來干這個事情，哈哈~

call、apply 的用法：

每個函數都有兩個非繼承而來的方法： apply ( ) 和 call ( )。這兩個方法的用途都是在特定的作用域中調用函數，實際上就是用來設置函數體內的 this對象的值。兩個方法的作用是相同的，唯一的區別是接收參數的方式不一樣。兩個方法的第一個參數是接收一個對象或者 null，區別是 apply 接收兩個參數，第二個參數可以是數組或者類數組的對象（arguments）這樣。ES6 的 Set 實例也可以。call 方法就比較厲害了，它接收多個參數，除第一個對象參數外，其余的參數要一個一個列出來。

function sum(num1, num2) {
    return num1 + num2
}
sum.apply(this, [1, 2]) // 3
sum.call(this, 1, 2) // 3

其實，call 和 apply 方法的強大在于，能擴充函數運行的運用域：

var color = "yellow"
var obj = {
    color: "blue"
}
function checkColor () {
    console.log(this.color)
}
checkColor() // yellow
checkColor.call(this) // yellow
checkColor.call(window) // yellow，此處 this === window
checkColor.call(obj) // blue

那 bind 可以用來干點啥好事兒呢？

ES 5 為函數定義了一個 bind 方法。這個方法會創建一個函數的實例，實例執行時的 this 值會被綁定到傳給 bind ( ) 函數的值。舉個

GPU云服務器云服務器 JS中bind、call和apply的作 this作用域 javascript_bind用法 apply與call的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109541.html

javascript基礎之this

摘要：出現箭頭函數的時候，指向為定義時的上下文對象而非指向時，并且不能被改變首先我們先看一個例子由上面的例子我們可以看出來此時指針在用改變了之后指向的依然是全局對象非嚴格瀏覽器環境中是而非。 javascript基礎之this指針越往后面學越發現基礎的重要性，所以打算重新過一遍基礎，之后出幾個vue和react的實戰教程。ok，嚴歸正傳。首先什么是this this是執行上下文創建時確定...

Zoom 2019-08-22 13:57 評論0 收藏0
前端_JavaScript_面向對象編程

摘要：面向對象編程對象的原生方法分成兩類自身的方法靜態方法和的實例方法。的靜態方法方法與，參數是對象，返回一個數組，數組的值是改對象自身的所有屬性名區別在于返回可枚舉的屬性，返回不可枚舉的屬性值。面向對象編程 Objects對象的原生方法分成兩類：Object自身的方法(靜態方法)和Object的實例方法。注意Object是JavaScript的原生對象，所有的其他對象都是繼承自Objec...

Blackjun 2019-08-23 15:15 評論0 收藏0
Know this, use this! (總結 this 的常見用法)

摘要：而當做普通函數調用的話，實際上即第種情況下，對函數普通調用，此時的指向這是正常情況下，會正確返回并且指向該對象，但是在構造函數當中，如果返回了一個對象，那么會指向返回的那個對象。 this應該是一個討論了很久的話題了。其中，關于this的文章，在很多的博客當中也有很多介紹，但是，以前我都是一知半解的去了解它，就是看博客當中，只介紹了一些情況下的 this 的使用方式，但是也并沒有自己去...

zorro 2019-08-21 14:21 評論0 收藏0
this學習筆記

摘要：但是有一個總的原則，那就是指的是，調用函數的那個對象作為函數調用在函數被直接調用時綁定到全局對象。這一過程分為三步創建類的實例。這步是把一個空的對象的屬性設置為。函數被傳入參數并調用，關鍵字被設定為該實例。 this 的值到底是什么？一次說清楚你怎么還沒搞懂 this？this、apply、call、bind 一、Whats this? 由于運行期綁定的特性，JavaScript 中的...

nanfeiyan 2019-08-23 14:32 評論0 收藏0
js函數this理解？手寫apply、call、bind就夠了

摘要：一是什么函數的內部屬性，引用的是函數據以執行的環境對象。函數做為節點事件調用時指向節點本身做為構造函數實力化方法時指向實例對象箭頭函數里的普通函數，由于閉包函數是執行的，所以指向箭頭函數的指向函數創建時的作用域。一、this是什么？函數的內部屬性，this引用的是函數據以執行的環境對象。也就是說函數的this會指向調用函數的執行環境。 function a(){ retur...

Cciradih 2019-08-26 10:39 評論0 收藏0