前言
this 關(guān)鍵字在 Javascript 中非常常見,但是很多開發(fā)者很難說清它到底指向什么。大部分人會從字面意思上去理解 this,認(rèn)為 this 指向函數(shù)自身,實際上this 是在運行時進(jìn)行綁定的,并不是在編寫時綁定,它的上下文取決于函數(shù)調(diào)
用時的各種條件。this 的綁定和函數(shù)聲明的位置沒有任何關(guān)系,只取決于函數(shù)的調(diào)用方式。
總結(jié): 函數(shù)被調(diào)用時發(fā)生 this 綁定,this 指向什么完全取決于函數(shù)在哪里被調(diào)用。
一、this 的綁定規(guī)則
this 一共有 4 中綁定規(guī)則,接下來一一介紹每種規(guī)則的解釋和規(guī)則直接的優(yōu)先級
默認(rèn)綁定(嚴(yán)格/非嚴(yán)格模式) 隱式綁定 顯式綁定 new 綁定1.1 默認(rèn)綁定(嚴(yán)格/非嚴(yán)格模式)
獨立函數(shù)調(diào)用: 獨立函數(shù)調(diào)用時 this 使用默認(rèn)綁定規(guī)則,默認(rèn)綁定規(guī)則下 this 指向 window(全局對象)。 嚴(yán)格模式下: this 無法使用默認(rèn)綁定,this 會綁定到 undefined。獨立函數(shù)調(diào)用
function foo() { console.log(this.a);}var a = 2;foo(); // 2嚴(yán)格模式下:
function foo() { "use strict"; console.log(this); //undefined console.log(this.a); //Uncaught TypeError: Cannot read property 'a' of undefined}var a = 2;foo();注意下邊兩種情況
var age = "18";var obj = { name: "heyushuo", age: 25, fn: function() { function sayName() { console.log(this); //window console.log(this.age); //undefined } sayName(); }};obj.fn();函數(shù) sayName 雖然是在 obj.fn 內(nèi)部定義的,但是它仍然是一個獨立函數(shù)調(diào)用,this 仍然指向 window。
var a = "global";var obj = { a: 2, foo: function() { console.log(this.a); //global }};var bar = obj.foo; // 函數(shù)別名!bar();雖然 bar 是 obj.foo 的一個引用,但是實際上,它引用的是函數(shù)本身,因此此時的
bar() 其實是一個不帶任何修飾的獨立函數(shù)調(diào)用,因此應(yīng)用了默認(rèn)綁定。
1.2 隱式綁定
當(dāng)函數(shù)引用有上下文對象時(例如:obj.foo 這個時候使用 obj 上下文來引用函數(shù) foo),隱式綁定規(guī)則會把函數(shù)中的 this 綁定到這個上下文對象。
var obj = { name: "heyushuo, foo: function() { console.log(this.name); //heyushuo }};obj.foo();對象屬性引用鏈中只有上一層或者說最后一層在調(diào)用中起作用。
var obj = { name: "heyushuo", obj1: { name: "kebi", foo: function() { console.log(this.name); // kebi } }};obj.obj1.foo();隱式丟失
被隱式綁定的函數(shù)會丟失綁定對象,而應(yīng)用默認(rèn)綁定,把 this 綁定到全局對象或者 undefined(嚴(yán)格模式) 上。
第一種
新聞熱點
疑難解答
圖片精選