日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
前端百題斬——js中的這些“this”指向都值得了解

14.1 簡(jiǎn)介

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

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(創(chuàng)新互聯(lián)).為客戶提供專業(yè)的溫江服務(wù)器租用,四川各地服務(wù)器托管,溫江服務(wù)器租用、多線服務(wù)器托管.托管咨詢專線：18980820575

14.2 指向

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

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

 
 
 
 
      
  
  
  
  1. console.log(this); // window 
    2.

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

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

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

 
 
 
 
      
  
  
  
  1. function fun() { 
    2.   
  
  
  
  2.     console.log(this); // window 
    3.   
  
  
  
  3. } 
    4.

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

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

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

 
 
 
 
      
  
  
  
  1. const obj = { 
    2.   
  
  
  
  2.     a: 10, 
    3.   
  
  
  
  3.     b: 20, 
    4.   
  
  
  
  4.     add: function () { 
    5.   
  
  
  
  5.         return this.a + this.b; 
    6.   
  
  
  
  6.     } 
    7.   
  
  
  
  7. }; 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. console.log(obj.add()); // 30 
    10.   
  
  
  
  10. const add = obj.add; 
    11.   
  
  
  
  11. console.log(add()); // NaN 
    12.

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

 
 
 
 
      
  
  
  
  1. const obj = { 
    2.   
  
  
  
  2.     a: 10, 
    3.   
  
  
  
  3.     b: 20 
    4.   
  
  
  
  4. }; 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. const prototypeObj = { 
    7.   
  
  
  
  7.     add: function () { 
    8.   
  
  
  
  8.         return this.a + this.b; 
    9.   
  
  
  
  9.     } 
    10.   
  
  
  
  10. }; 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. Object.setPrototypeOf(obj, prototypeObj); 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14. console.log(obj.add()); // 30 
    15.

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

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

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

 
 
 
 
      
  
  
  
  1. 按鈕 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. const btn = document.getElementById('testId'); 
    4.   
  
  
  
  4. btn.addEventListener('click', function() { 
    5.   
  
  
  
  5.  console.log(this); // 按鈕 
    6.   
  
  
  
  6. }); 
    7.

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

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

 
 
 
 
      
  
  
  
  1. 按鈕 // 輸出該DOM節(jié)點(diǎn) 
    2.

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

 
 
 
 
      
  
  
  
  1. 按鈕 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. function clickFun() { 
    4.   
  
  
  
  4.  console.log(this); // window 
    5.   
  
  
  
  5. } 
    6.

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

 
 
 
 
      
  
  
  
  1. function Fun() { 
    2.   
  
  
  
  2.     this.a = 10; 
    3.   
  
  
  
  3.     this.method = function() { 
    4.   
  
  
  
  4.         setTimeout(function() { 
    5.   
  
  
  
  5.             console.log(this); // window 
    6.   
  
  
  
  6.         }, 1000); 
    7.   
  
  
  
  7.     } 
    8.   
  
  
  
  8. } 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. const fun = new Fun(); 
    11.   
  
  
  
  11. fun.method(); 
    12.

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

 
 
 
 
      
  
  
  
  1. function Fun() { 
    2.   
  
  
  
  2.     this.a = 10; 
    3.   
  
  
  
  3.     this.method = function() { 
    4.   
  
  
  
  4.         setTimeout(() => { 
    5.   
  
  
  
  5.             console.log(this); // Fun {a: 10, method: ?} 
    6.   
  
  
  
  6.         }, 1000); 
    7.   
  
  
  
  7.     } 
    8.   
  
  
  
  8. } 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. const fun = new Fun(); 
    11.   
  
  
  
  11. fun.method(); 
    12.

14.3 改變this指向

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

call()

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

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

apply()

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

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

bind()

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

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

擴(kuò)展

  • call() 和 apply()的區(qū)別是call()方法接受的是參數(shù)列表，而apply()方法接受的是一個(gè)參數(shù)數(shù)組;
  • bind返回的是一個(gè)綁定函數(shù)，而call和apply返回的是運(yùn)行結(jié)果;
  • 多次 bind() 是無(wú)效的，只會(huì)綁定到第一次調(diào)用的對(duì)象上;
  • call() / apply() / bind() 方法對(duì)于箭頭函數(shù)來(lái)說(shuō)只是傳入?yún)?shù)，對(duì)它的 this 毫無(wú)影響。

本文轉(zhuǎn)載自微信公眾號(hào)「執(zhí)鳶者」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系執(zhí)鳶者公眾號(hào)。


新聞名稱：前端百題斬——js中的這些“this”指向都值得了解
分享路徑：http://www.5511xx.com/article/dppdgps.html