JavaScript中this的綁定規(guī)則是怎樣的,相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
10年積累的做網(wǎng)站、網(wǎng)站建設(shè)經(jīng)驗,可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你,你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程,更有監(jiān)利免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
對于 JavaScript 新手來說,this 是非?;A(chǔ)同時也難以理解的知識點。
比如下面的代碼,this 指向就有三種方式。
function foo() { console.log(this.a); } var a = 1; var obj = { a: 2, foo: foo }; foo(); // 1 obj.foo(); // 2 foo.call({ a: 3 }); // 3
this 就是函數(shù)運行時所在的環(huán)境對象,它指向運行時所在的位置,而不是定義時的位置。
根據(jù) this 綁定規(guī)則,分為下面四種:
默認綁定
隱式綁定
顯式綁定
new 綁定
1. 默認綁定
默認情況下,this 指向全局對象。例如下面的代碼。
var a = 2; console.log(this.a); // 2 // 在函數(shù)中 function foo() { console.log(this.a); } foo(); // 2 // 在回調(diào)函數(shù)中 function doFoo() { return function() { console.log(this.a); }; } doFoo()(); // 2
不過,函數(shù)在嚴格模式下,this 無法指向全局對象,因此this會綁定到undefined。
function foo() { "use strict"; console.log(this); } foo(); // undefined
2. 隱式綁定
當(dāng)函數(shù)作為方法被調(diào)用,需考慮運行時上下文環(huán)境。
function foo() { console.log(this.a); } var obj = { a: 2, foo: foo }; obj.foo(); // 2
代碼中,foo()前面添加了obj對象的修飾,因此,obj對象就是函數(shù)的上下文。
this 會綁定到這個對象上。
另外,需要注意下面三種情況,它們會出現(xiàn)綁定對象丟失,從而把this綁定到全局對象或undefined上。
情況一
這段代碼中,雖然obj.foo()和bar()都指向同一函數(shù),但執(zhí)行結(jié)果并不一樣。
可以理解為,bar()是一個不帶任何修飾的函數(shù)調(diào)用,等價于直接調(diào)用foo(),因此應(yīng)用了默認綁定。
function foo() { console.log(this.a); } var a = 3; var obj = { a: 2, foo: foo }; var bar = obj.foo; obj.foo(); // 2 bar(); // 3
情況二
另一種情況,發(fā)生在回調(diào)函數(shù)中。原理和上面的情況一樣。
修改上面的代碼,obj.foo作為參數(shù)傳入doFoo()函數(shù)中,實際上,引用的是foo()函數(shù)本身,因此應(yīng)用了默認綁定。
function foo() { console.log(this.a); } var a = 3; var obj = { a: 2, foo: foo }; function doFoo(fn) { return fn(); } doFoo(obj.foo); // 3
情況三
在一些流行的 JavaScript 庫,進行事件處理操作時,回調(diào)函數(shù)的 this 可能會強制綁定到 DOM 元素上。
這種情況也值得注意。
3. 顯式綁定
JavaScript 提供了call()、apply()和bind()方法,可以強制綁定函數(shù)的this對象。
function fn() { console.log(this.a); } fn.call({ a: 3 }); // 3
通過fn.call(obj),我們將函數(shù)運行時,this強制綁定到obj上。
call apply和bind的區(qū)別
call 和 apply 改變了函數(shù)的 this 上下文后,便執(zhí)行該函數(shù),而 bind 則是將該函數(shù)返回。
function fn() { console.log(this.a); } fn.call({ a: 3 }); // 3 fn.bind({ a: 4 })(); // 4
call和apply的區(qū)別
call 和 apply 的區(qū)別在于傳入?yún)?shù)不同。
call 方法接收若干個參數(shù)列表。
apply 第一個參數(shù)和 call 一樣,第二個參數(shù)接收一個包含多個參數(shù)的數(shù)組。
let arr = [2, 5, 9] console.log(Math.max.call(3, 2, 5, 9)) // 9 console.log(Math.max.call(3, arr)) // NaN console.log(Math.max.apply(3, arr)) // 9
4. new 綁定
如果使用 new 構(gòu)造函數(shù),在函數(shù)內(nèi)部,this 指向新創(chuàng)建的對象。
function foo() { console.log(this); } new foo(); // foo {} foo(); // Window {...}
其他情況
需要忽略的this
若第三方庫的某個函數(shù)使用了 this,默認綁定會把this指向全局對象,從而導(dǎo)致不可預(yù)測的后果。
一個安全的做法,就是使用顯式綁定,將函數(shù)的this指向空對象。
function foo() { console.log(this); } // 創(chuàng)建空對象 var ø = Object.create(null); // 使用bind()進行柯里化(Curry) var bar = foo.bind(ø); bar(); // {}
這方法通常也用于對象初始化,以獲得一個干凈且高度可定制的對象。
箭頭函數(shù)
箭頭函數(shù)常用于回調(diào)函數(shù)中。
它會繼承父級作用域 this 綁定的對象,等價于ES6之前self = this的書寫方式。
const people = { name: "Merry", sayHi() { console.log(this.name) }, wait() { setTimeout(() => { console.log(this.name) }) } } people.sayHi() // Merry people.wait() // Merry
此外還有軟綁定(softBind),用的不多,了解一下即可。
看完上述內(nèi)容,你們掌握JavaScript中this的綁定規(guī)則是怎樣的的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!