云南网站开发费用,做设计图任务的网站,微信辅助网站制作,高新企业建设网站公司本系列内容为JS全解析#xff0c;为千锋教育资深前端老师独家创作
致力于为大家讲解清晰JavaScript相关知识点#xff0c;含有丰富的代码案例及讲解。如果感觉对大家有帮助的话#xff0c;可以【点个关注】持续追更~
this指向#xff08;掌握#xff09;
this 是一个关… 本系列内容为JS全解析为千锋教育资深前端老师独家创作
致力于为大家讲解清晰JavaScript相关知识点含有丰富的代码案例及讲解。如果感觉对大家有帮助的话可以【点个关注】持续追更~
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 langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style div { width: 200px; height: 200px; background-color: red; } /style
/head body divhello world/div script var res document.querySelector(div) res.onclick function() { console.log(this); //div/div} /script
/body /html自执行函数中调用
●自执行函数中的this也指向window
script (function() { console.log(this); //window })()
/script强行改变this指向
通过上面的学习大家知道this在不同的情况指向是不同的但是有时候需要指向一个制定的对象这就需要改变this的指向
可以理解成不管之前指向哪里现在我让你指向哪里你就要指向哪里
强行改变this指向的方式可以通过call、apply和bind来改变
call调用
作用改变函数内部this的指向
语法
函数名.call()
对象名.函数名.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 */
/scriptapply调用
作用 改变函数内部this的指向
语法
○函数名.apply() ○对象名.函数名.apply(参数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] // 用 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 */
/scriptbind调用
作用 改变函数内部this的指向
语法
函数名.bind()
对象名.函数名.bind(参数1参数2参数3...)
参数
第一个参数是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以上即为JS中this指向的一些基础知识点更多技术干货、知识技巧可以关注我们有不清楚的问题也可以在评论区交流讨论也可以私信小千~
