[转帖]JavaScript全解析——this指向
当前位置：知识管理交流
→『 技术文档交流 』
this指向（掌握）this 是一个关键字，是一个使用在作用域内的关键字 作用域分为全局作用域和局部作用域（私有作用域或者函数作用域） 全局作用域全局作用域中this指向window 局部作用域函数内的 this, 和 函数如何定义没有关系, 和 函数在哪定义也没有关系，只看函数是如何被调用的(箭头函数除外) 可分为以下场景： 普通函数中调用普通函数中的this和全局调用一样，this指向window <script> // 全局使用 this console.log(this) //window console.log(window) //window console.log(window === this) //true //普通函数调用 function fn() { console.log('我是全局 fn 函数') console.log(this) //window } fn() </script>
该函数内的 this 指向 语法： <script> //对象函数调用 function fn() { console.log(this) //{fun: ƒ} } var obj = { fun: fn } obj.fun() obj['fun']() </script> 定时器处理函数中调用定时器中的this同样也是指向window <script> // 定时器处理函数 setTimeout(function() { console.log(this); //window }, 1000) </script> 事件处理程序中调用事件处理程序中的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> 自执行函数中调用 ●自执行函数中的this也指向window <script> (function() { console.log(this); //window })() </script> 强行改变this指向通过上面的学习大家知道，this在不同的情况指向是不同的，但是有时候需要指向一个制定的对象，这就需要改变this的指向 可以理解成不管之前指向哪里，现在我让你指向哪里你就要指向哪里 强行改变this指向的方式可以通过 call调用作用：改变函数内部this的指向 语法：
对象名.函数名.call(参数1，参数2，参数3...) 参数：○第一个参数是this要指向的对象 ○从第二个参数开始，依次给函数传递实参 特点： 会立即调用函数或者说立即执行 <script> function fn(a, b) { console.group('fn 函数内的 打印') 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 调用 fn.call(obj, 100, 200) fn.call(arr, 1000, 2000) /* this : {name: '我是 obj 对象'} a : 100 b : 200 fn 函数内的 打印 this : (5) [100, 200, 300, 400, 500] a : 1000 b : 2000 */ </script>
作用： 改变函数内部this的指向 语法： ○函数名.apply() 参数： ○第一个参数是this要指向的对象 ○第二参数的一个数组，要传递的实参要放到数组里面，就是有一个实参也要放到数组里面 特点： 会立即调用函数或者说立即执行 <script> function fn(a, b) { console.group('fn 函数内的 打印') 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 调用 fn.apply(obj, [100, 200]) fn.apply(arr, [1000, 2000]) /* fn 函数内的 打印 this : {name: '我是 obj 对象'} a : 100 b : 200 fn 函数内的 打印 this : (5) [100, 200, 300, 400, 500] a : 1000 b : 2000 */ </script> bind调用作用： 改变函数内部this的指向 语法：
参数： 第一个参数是this要指向的对象 从第二个参数开始，依次给函数传递实参 特点： 函数不会立即调用，会返回一个改变this指向以后的函数，使用的时候需要调用 <script> function fn(a, b) { console.group('fn 函数内的 打印') 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 调用 // 注意: 因为是 bind, 不会把 fn 函数执行, 而是把 fn // res 接受的就是 bind 方法复制出来的 fn 函数, 和 fn var res = fn.bind(obj, 100, 200) var res1 = fn.bind(arr, 1000, 2000) res() res1() /* fn 函数内的 打印 this : {name: '我是 obj 对象'} a : 100 b : 200 fn 函数内的 打印 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
