[轉(zhuǎn)帖]JavaScript全解析——this指向
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
this指向（掌握）this 是一個關鍵字，是一個使用在作用域內(nèi)的關鍵字 作用域分為全局作用域和局部作用域（私有作用域或者函數(shù)作用域） 全局作用域全局作用域中this指向window 局部作用域函數(shù)內(nèi)的 this, 和 函數(shù)如何定義沒有關系, 和 函數(shù)在哪定義也沒有關系，只看函數(shù)是如何被調(diào)用的(箭頭函數(shù)除外) 可分為以下場景： 普通函數(shù)中調(diào)用普通函數(shù)中的this和全局調(diào)用一樣，this指向window <script> // 全局使用 this console.log(this) //window console.log(window) //window console.log(window === this) //true //普通函數(shù)調(diào)用 function fn() { console.log('我是全局 fn 函數(shù)') console.log(this) //window } fn() </script>
該函數(shù)內(nèi)的 this 指向 語法： <script> //對象函數(shù)調(diào)用 function fn() { console.log(this) //{fun: ƒ} } var obj = { fun: fn } obj.fun() obj['fun']() </script> 定時器處理函數(shù)中調(diào)用定時器中的this同樣也是指向window <script> // 定時器處理函數(shù) setTimeout(function() { console.log(this); //window }, 1000) </script> 事件處理程序中調(diào)用事件處理程序中的this指向的是事件源 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div>hello world</div> <script> var res = document.queryselector('div')
res.onclick = function() { console.log(this); // } </script> </body> </html> 自執(zhí)行函數(shù)中調(diào)用 ●自執(zhí)行函數(shù)中的this也指向window <script> (function() { console.log(this); //window })() </script> 強行改變this指向通過上面的學習大家知道，this在不同的情況指向是不同的，但是有時候需要指向一個制定的對象，這就需要改變this的指向 可以理解成不管之前指向哪里，現(xiàn)在我讓你指向哪里你就要指向哪里 強行改變this指向的方式可以通過 call調(diào)用作用：改變函數(shù)內(nèi)部this的指向 語法：
對象名.函數(shù)名.call(參數(shù)1，參數(shù)2，參數(shù)3...) 參數(shù)：○第一個參數(shù)是this要指向的對象 ○從第二個參數(shù)開始，依次給函數(shù)傳遞實參 特點： 會立即調(diào)用函數(shù)或者說立即執(zhí)行 <script> function fn(a, b) { console.group('fn 函數(shù)內(nèi)的 打印') console.log('this : ', this) console.log('a : ', a) console.log('b : ', b) console.groupEnd() } var obj = { name: '我是 obj 對象' } var arr = [100, 200, 300, 400, 500] // 用 call 調(diào)用 fn.call(obj, 100, 200) fn.call(arr, 1000, 2000) /* this : {name: '我是 obj 對象'} a : 100 b : 200 fn 函數(shù)內(nèi)的 打印 this : (5) [100, 200, 300, 400, 500] a : 1000 b : 2000 */ </script>
作用： 改變函數(shù)內(nèi)部this的指向 語法： ○函數(shù)名.apply() 參數(shù)： ○第一個參數(shù)是this要指向的對象 ○第二參數(shù)的一個數(shù)組，要傳遞的實參要放到數(shù)組里面，就是有一個實參也要放到數(shù)組里面 特點： 會立即調(diào)用函數(shù)或者說立即執(zhí)行 <script> function fn(a, b) { console.group('fn 函數(shù)內(nèi)的 打印') console.log('this : ', this) console.log('a : ', a) console.log('b : ', b) console.groupEnd() } var obj = { name: '我是 obj 對象' } var arr = [100, 200, 300, 400, 500] // 用 apply 調(diào)用 fn.apply(obj, [100, 200]) fn.apply(arr, [1000, 2000]) /* fn 函數(shù)內(nèi)的 打印 this : {name: '我是 obj 對象'} a : 100 b : 200 fn 函數(shù)內(nèi)的 打印 this : (5) [100, 200, 300, 400, 500] a : 1000 b : 2000 */ </script> bind調(diào)用作用： 改變函數(shù)內(nèi)部this的指向 語法：
參數(shù)： 第一個參數(shù)是this要指向的對象 從第二個參數(shù)開始，依次給函數(shù)傳遞實參 特點： 函數(shù)不會立即調(diào)用，會返回一個改變this指向以后的函數(shù)，使用的時候需要調(diào)用 <script> function fn(a, b) { console.group('fn 函數(shù)內(nèi)的 打印') console.log('this : ', this) console.log('a : ', a) console.log('b : ', b) console.groupEnd() } var obj = { name: '我是 obj 對象' } var arr = [100, 200, 300, 400, 500] // 用 bind 調(diào)用 // 注意: 因為是 bind, 不會把 fn 函數(shù)執(zhí)行, 而是把 fn // res 接受的就是 bind 方法復制出來的 fn 函數(shù), 和 fn var res = fn.bind(obj, 100, 200) var res1 = fn.bind(arr, 1000, 2000) res() res1() /* fn 函數(shù)內(nèi)的 打印 this : {name: '我是 obj 對象'} a : 100 b : 200 fn 函數(shù)內(nèi)的 打印 this : (5) [100, 200, 300, 400, 500] a : 1000 b : 2000 */ </script> —————————————————————— https://www.cnblogs.com/qian-fen/p/17391354.html 該文章在 2023/5/26 18:27:08 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
