在JavaScript中,this是一個關(guān)鍵字,用于指代當(dāng)前執(zhí)行的上下文環(huán)境,即函數(shù)在運(yùn)行時所處的環(huán)境對象。這個環(huán)境對象可以是全局對象、函數(shù)內(nèi)部對象或者外部對象等等,具體取決于函數(shù)的調(diào)用方式。
下面我們通過舉例來詳細(xì)了解this的指向:
//例一 function foo() { console.log(this); } foo(); // 在全局作用域下, this 指向全局對象 window //例二 var obj = { bar: function() { console.log(this); } }; obj.bar(); // 在對象的方法中, this 指向該對象 //例三 function Person(name) { this.name = name; this.sayName = function() { console.log(this.name); }; } var person1 = new Person('Jack'); person1.sayName(); // 在構(gòu)造函數(shù)中, this 指向創(chuàng)建的實例對象
除了以上三種情況外,還有其他幾種特殊的應(yīng)用場景需要注意:
第一種是當(dāng)使用call()、apply()和bind()方法調(diào)用函數(shù)時,它們的第一個參數(shù)都是this要指向的對象:
function foo() { console.log(this); } var obj = {}; foo.call(obj); // 使用 call() 方法,this 指向 obj
第二種是當(dāng)函數(shù)用作事件處理函數(shù)或者回調(diào)函數(shù)時,this通常指向觸發(fā)事件的對象或者調(diào)用函數(shù)的對象:
var btn = document.querySelector('button'); btn.addEventListener('click', function() { console.log(this); // 在事件處理函數(shù)中,this 指向觸發(fā)事件的按鈕 });
第三種是在箭頭函數(shù)中,它的this指向是在箭頭函數(shù)創(chuàng)建時繼承的上下文:
var obj = { foo: function() { setTimeout(() => { console.log(this); // 在箭頭函數(shù)中,this 指向創(chuàng)建此函數(shù)的上下文對象 obj }, 100); } }; obj.foo();
總結(jié)來說,this指向的對象是可以動態(tài)變化的,取決于函數(shù)的調(diào)用方式和上下文環(huán)境。而this的應(yīng)用場景也非常廣泛,在JavaScript中扮演著一個非常重要的角色。
上一篇css指定元素控制樣式
下一篇css樣式不包括 考試