js中的有哪些“this”指向值得了解

本篇內(nèi)容介紹了“js中的有哪些“this”指向值得了解”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

14.1 簡介

this是javascript中的一個(gè)關(guān)鍵字，其使用方法類似于一個(gè)變量，是執(zhí)行上下文中一個(gè)重要組成部分。其作用是可以在函數(shù)體內(nèi)部獲取當(dāng)前的運(yùn)行環(huán)境。

14.2 指向

每個(gè)函數(shù)的this是在調(diào)用的時(shí)候基于函數(shù)的執(zhí)行環(huán)境綁定的，this的指向完全取決于函數(shù)的調(diào)用位置。(下面均是在瀏覽器環(huán)境下進(jìn)行測試的結(jié)果)

在全局環(huán)境下，this 始終指向全局對象(window), 無論是否嚴(yán)格模式;

console.log(this); // window

普通函數(shù)內(nèi)部的this分兩種情況，嚴(yán)格模式和非嚴(yán)格模式。

(1)非嚴(yán)格模式下，this 默認(rèn)指向全局對象window

(2)嚴(yán)格模式下， this為undefined

function fun() {     console.log(this); // window }

對象內(nèi)部方法的this指向調(diào)用這些方法的對象

(1)函數(shù)的定義位置不影響其this指向，this指向只和調(diào)用函數(shù)的對象有關(guān);

(2)多層嵌套的對象，內(nèi)部方法的this指向離被調(diào)用函數(shù)最近的對象(window也是對象，其內(nèi)部對象調(diào)用方法的this指向內(nèi)部對象，  而非window)。

const obj = {     a: 10,     b: 20,     add: function () {         return this.a + this.b;     } };  console.log(obj.add()); // 30 const add = obj.add; console.log(add()); // NaN

原型鏈中的方法的this仍然指向調(diào)用它的對象

const obj = {     a: 10,     b: 20 };  const prototypeObj = {     add: function () {         return this.a + this.b;     } };  Object.setPrototypeOf(obj, prototypeObj);  console.log(obj.add()); // 30

當(dāng)函數(shù)通過Function對象的原型中繼承的方法 call() 和 apply() 方法調(diào)用時(shí)， 其函數(shù)內(nèi)部的this值可綁定到 call() &  apply() 方法指定的第一個(gè)對象上， 如果第一個(gè)參數(shù)不是對象，JavaScript內(nèi)部會嘗試將其轉(zhuǎn)換成對象然后指向它。(見后續(xù)代碼)

通過bind方法綁定后， 函數(shù)將被永遠(yuǎn)綁定在其第一個(gè)參數(shù)對象上， 而無論其在什么情況下被調(diào)用。(見后續(xù)代碼)

當(dāng)函數(shù)被當(dāng)做監(jiān)聽事件處理函數(shù)時(shí)， 其 this 指向觸發(fā)該事件的元素(針對于addEventListener事件)

<button id="testId">按鈕</button>  const btn = document.getElementById('testId'); btn.addEventListener('click', function() {  console.log(this); // <button id="testId">按鈕</button> });

內(nèi)聯(lián)事件中的this指向分兩種情況：

(1)當(dāng)代碼被內(nèi)聯(lián)處理函數(shù)調(diào)用時(shí)，它的this指向監(jiān)聽器所在的DOM元素

<button onclick="console.log(this)">按鈕</button> // 輸出該DOM節(jié)點(diǎn)

(2)當(dāng)代碼被包括在函數(shù)內(nèi)部執(zhí)行時(shí)，其this指向等同于 函數(shù)直接調(diào)用的情況，即在非嚴(yán)格模式指向全局對象window，  在嚴(yán)格模式指向undefined

<button onclick="clickFun()">按鈕</button>  function clickFun() {  console.log(this); // window }

對于延時(shí)函數(shù)內(nèi)部的回調(diào)函數(shù)的this指向全局對象window(當(dāng)然可以通過bind方法改變其內(nèi)部函數(shù)的this指向)

function Fun() {     this.a = 10;     this.method = function() {         setTimeout(function() {             console.log(this); // window         }, 1000);     } }  const fun = new Fun(); fun.method();

由于箭頭函數(shù)不綁定this， 它會捕獲其所在(即定義的位置)上下文的this值， 作為自己的this值，所以 call() / apply() /  bind() 方法對于箭頭函數(shù)來說只是傳入?yún)?shù)，對它的 this 毫無影響。

function Fun() {     this.a = 10;     this.method = function() {         setTimeout(() => {             console.log(this); // Fun {a: 10, method: ƒ}         }, 1000);     } }  const fun = new Fun(); fun.method();

14.3 改變this指向

除了隱式綁定this的方式，還能夠通過顯示綁定的方式，通過call、apply、bind方式改變this指向，對于這三者的區(qū)別后續(xù)將有專門的百題斬去闡述，本節(jié)主要進(jìn)行一波簡單使用。

call()

call() 方法使用一個(gè)指定的 this 值和單獨(dú)給出的一個(gè)或多個(gè)參數(shù)來調(diào)用一個(gè)函數(shù)。

function method(val1, val2) {     return this.a + this.b + val1 + val2; }  const obj = {     a: 1,     b: 2 };  console.log(method.call(obj, 3, 4)); // 10

apply()

apply() 方法調(diào)用一個(gè)具有給定this值的函數(shù)，以及以一個(gè)數(shù)組(或類數(shù)組對象)的形式提供的參數(shù)。

function method(val1, val2) {     return this.a + this.b + val1 + val2; }  const obj = {     a: 1,     b: 2 };  console.log(method.apply(obj, [3, 4])); // 10

bind()

bind() 方法創(chuàng)建一個(gè)新的函數(shù)，在 bind() 被調(diào)用時(shí)，這個(gè)新函數(shù)的 this 被指定為 bind()  的第一個(gè)參數(shù)，而其余參數(shù)將作為新函數(shù)的參數(shù)，供調(diào)用時(shí)使用。

function method(val1, val2) {     return this.a + this.b + val1 + val2; }  const obj = {     a: 1,     b: 2 };  const bindMethod = method.bind(obj, 3, 4); console.log(bindMethod); // [Function: bound method] console.log(bindMethod()); // 10

擴(kuò)展

• call() 和 apply()的區(qū)別是call()方法接受的是參數(shù)列表，而apply()方法接受的是一個(gè)參數(shù)數(shù)組;

• bind返回的是一個(gè)綁定函數(shù)，而call和apply返回的是運(yùn)行結(jié)果;

• 多次 bind() 是無效的，只會綁定到第一次調(diào)用的對象上;

• call() / apply() / bind() 方法對于箭頭函數(shù)來說只是傳入?yún)?shù)，對它的 this 毫無影響。

“js中的有哪些“this”指向值得了解”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！