JavaScript 函數(shù)作用域、執(zhí)行環(huán)境(this)、call、apply、bind 的用法

1fe1se 發(fā)布于2019-08-26 13:47 / 3136人閱讀

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

什么是函數(shù)的作用域

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

this 與函數(shù)又有什么關系呢？

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

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

那我們想改變函數(shù)執(zhí)行時綁定的 this 怎么辦呢？

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

call、apply 的用法：

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

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

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

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 為函數(shù)定義了一個 bind 方法。這個方法會創(chuàng)建一個函數(shù)的實例，實例執(zhí)行時的 this 值會被綁定到傳給 bind ( ) 函數(shù)的值。舉個

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

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

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

javascript基礎之this

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

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

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

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

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

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

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

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

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

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