this在JavaScript中彷佛能夠視而不見,但不去正視它學到的就只是殘缺的JS。拋開這些「形而上」的意義不說,從實用性及代碼簡潔展現this的不可或缺的地位,舉例子:app
function identifyUser () { return this.name.toUpperCase(); } let obj1 = { name: leeper; } let obj2 = { name: Sandman; } identifyUser.call(obj1) // -> LEEPER identifyUser.call(obj2) // -> SANDMAN
若是不使用this,就須要給identifyUser()顯示傳入一個上下文對象,但隨着使用模式的增長,顯示傳遞上下文對象成了」噩夢「,讓代碼也變得愈來愈混亂。爲了將API設計得更加簡潔並易於複用,就必須正視this。ide
若是在任何函數體外部,不管是否在嚴格模式,this都指代全局對象。這裏着重討論的是函數體內部的this。JavaScript的this老是指向一個對象,具體指向哪一個對象是在運行時基於函數的執行環境動態綁定的,而非函數被聲明時的環境。函數
在函數內部,this的綁定和函數聲明的位置沒有任何關係,只取決於函數的調用方式:this
this的值默認指向全局對象:設計
let a = 233; function foo () { console.log(this.a); } foo() // -> 233
但在嚴格模式下,this默認爲undefined;code
函數調用時會綁定到上下文對象:對象
let obj = { a: 233, foo: foo }; function foo () { console.log(this.a); } obj.foo(); // -> 233
對象引用鏈中只有在最後一層調用位置中起做用:繼承
function foo () { console.log(this.a); } let obj1 = { a: 233, foo: foo }; let obj2 = { a: 2333, obj1: obj1 } obj2.obj1.foo() // -> 233
在講bind以前不得不先提兩種綁定丟失的狀況:事件
// 第一種 function foo () { console.log(this.a); } var obj = { a: 233, foo: foo }; var bar = obj.foo; var a = 'global a'; bar(); // -> 'global a' // 雖然bar是obj.foo的一個引用,但實際上,它引用的foo函數自己,做爲普通函數直接調用,非嚴格模式下,this指向全局對象。
// 第二種 function foo () { console.log(this.a); } var obj = { a: 233, foo: foo }; var a = "global a"; function doFn(fn) { fn(); } doFn(obj.foo); // -> 'global a'
function foo () { console.log(this.a); } var obj = { a: 233, foo: foo }; var a = "global a"; setTimeout(obj.foo, 0) // -> 'global a'
參數傳入的是函數,做爲普通函數調用,會致使被傳入的這個函數this綁定丟失,this會指向默認的全局對象。
bind方法能夠解決上this綁定丟失的狀況:ip
function foo () { console.log(this.a); } var obj = { a: 233, foo: foo }; var a = "global a"; var bar = foo.bind(obj); function doFn (fn) { fn(); } doFn(bar); // -> 233
fn.bind(某個對象)會建立一個與fn具備相同函數體和做用域的新函數,在這個新函數中,this將永久地綁定到了bind的第一個參數,不管這個函數如何被調用。
這兩個方法的第一個參數是一個對象,是給this準備的,接着在調用函數時將其綁定到this。
let obj = { a:233 }; function foo () { console.log(this.a); } foo.call(obj) // -> 233
this綁定角度看,apply方法與call方法,區別在於其餘參數上。
使用new來調用函數時,會自動執行下面操做:
- 構造一個全新的對象; - 構造出的新對象會被執行[[Prototype]]鏈接; - 新對象會綁定到函數調用的this; - 若是函數沒有返回其餘對象,那麼表達式中的函數調用會自動返回這個新對象。
function foo (a) { this.a = a; } var bar = new foo(233); console.log(bar.a); // -> 233
使用new來調用foo()時,會構造一個新對象並把它綁定到foo()調用中的this上。
當函數被用做事件處理函數時,它的this會指向觸發事件的元素。
箭頭函數會繼承外層函數調用的this綁定,在全局做用域中則會綁定到全局對象上。
function foo () { setTimeout(() => { console.log('a', this.a); }, 0); } var a = 'global a'; foo.call({a: 233}); // -> 233
若是是普通函數,執行時this應該指向全局對象,輸出的'global a',而箭頭函數this繼承它的外層foo函數的this綁定,因爲使用call方法將foo函數的this綁定指向{a: 233},因此輸出233。