处理this
this指向
普通函数this指向
目标: 能说出普通函数的this指向
普通函数的调用方式决定了 this 的值,即【谁调用 this 的值指向谁】
// 普通函数 function fn () { console.log(this)//window,调用者 } window.fn() document.addEventListener('click',fn)//this:document // 定时器函数 window.setTimeout(function () { console.log(this)//window,调用者 },200) // 方法 const obj = { uname : '小明', eat : function () { console.log(this)//obj,调用者 } } obj.eat() // 构造函数 function Person (uname) { this.uname = uname console.log(this)//当前实例对象 } new Person('小明') // 自执行函数 ;(function () { console.log(this)//window,调用者 })() // 事件处理函数 document.addEventListener('click', function () { console.log(this)//window,调用者 })
注意:
- 普通函数没有明确调用者时 this 值为 window
- 普通函数严格模式下没有调用者时 this 的值为 undefined
// 开启严格模式 // 'use strict'放在作用域最开头,只对该作用域有影响 'use strict' // 严格模式: // 变量必须声明 // 函数形参不能重名 // 严格模式下普通函数没有调用者时 this 的值为 undefined function fn () { console.log(this)//undefined } fn() // 函数表达式 const fn1 = function () { console.log(this)//undefined } fn1() // 自执行函数 ;(function () { console.log(this)//undefined })() // 定时器 setTimeout(function () { console.log(this)//window,调用者 },200) // 构造函数 function Person (uname) { this.uname = uname console.log(this)//当前实例对象 } new Person('小明') // 事件处理函数 document.addEventListener('click', function () { console.log(this)// document,调用者 })
箭头函数this指向
目标: 能说出箭头函数的this指向
箭头函数中的 this 与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在 this !
-
箭头函数会默认帮我们绑定外层 this 的值,所以在箭头函数中 this 的值和外层的 this 是一样的
-
箭头函数中的this引用的就是最近作用域中的this
-
向外层作用域中,一层一层查找this,直到有this的定义
总结:
-
箭头函数内不存在this,沿用上一级的
-
不适用: 构造函数,原型函数,dom事件函数等等
-
适用:需要使用上层this的地方
改变this
动态指定普通函数中 this 的指向有 3 个方法:
call()
作用:调用函数,并可以改变被调用函数里面的this指向
语法:fn.call(thisArg, arg1, arg2, ...)
thisArg:在fn 函数运行时指定的 this 值
arg1,arg2:实参,传递的其他参数
返回值就是函数的返回值,因为它就是调用函数
function fn(a, b) { console.log(this, a, b) return a * b } const obj = {uname : '小明', age : 18} // 在执行的过程中改变this const re = fn.call(obj, 1, 2) console.log(re)//2 let o = { uname : '小明2', age : 20, fei : function () { console.log(this) } } o.fei()//this=>o o.fei.call(obj)//this=>obj
apply()
作用:调用函数,同时指定被调用函数中 this 的值
语法:fun.apply(thisArg, [argsArray])
thisArg:在fun函数运行时指定的 this 值
argsArray:传递的值,必须包含在数组里面
返回值就是函数的返回值,因为它就是调用函数
因此 apply 主要跟数组有关系,比如使用 Math.max() 求数组的最大值
// 在执行的过程中改变this const re = fn.apply(obj, [3,2]) console.log(re)//6 // 求最值 const arr = [1, 4, 3, 7, 2] console.log(Math.max.apply(null, arr))//7 console.log(Math.max(...arr))//7
bind()
作用:不会调用函数。但是能改变函数内部this 指向
语法:fun.bind(thisArg, arg1, arg2, ...)
thisArg:在 fun 函数运行时指定的 this 值
arg1,arg2:传递的其他参数
返回由指定的 this 值和初始化参数改造的 原函数拷贝 (新函数)
// bind()不会调用函数。但是能改变函数内部this 指向 // 返回由指定的 this 值和初始化参数改造的 原函数拷贝 (新函数) const re = fn.bind(obj,3,4) re()
call apply bind 总结
-
相同点:
都可以改变函数内部的this指向.
-
区别点:
call 和 apply 会调用函数, 并且改变函数内部this指向.
call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]
bind 不会调用函数, 可以改变函数内部this指向.
-
主要应用场景:
call 调用函数并且可以传递参数
apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战