学习目标:
- 掌握处理this
学习内容:
- 处理this
- this指向-普通函数
- this指向-箭头函数
- 改变this方法
处理this:
this
是JavaScript最具“魅惑”的知识点,不同的应用场合this的取值可能会有意想不到的结果,在此我们对以往学习过的关于【this默认的取值】
情况进行归纳和总结。
学习路径:
- 普通函数this指向。
- 箭头函数this指向。
this指向-普通函数:
普通函数的调用方式决定了this的值,即【谁调用this的值指向谁】。
<title>this指向-普通函数</title>
</head>
<body>
<button>点击</button>
<script>
// 普通函数: 谁调用我,this就指向谁
console.log(this) // window
function fn() {
console.log(this) // window
}
window.fn()
window.setTimeout(function () {
console.log(this) // window
}, 1000)
document.querySelector('button').addEventListener('click', function () {
console.log(this) // 指向 button
})
const obj = {
sayHi: function () {
console.log(this) // 指向 obj
}
}
obj.sayHi()
</script>
</body>
普通函数没有明确调用者时this值为window
,严格模式下没有调用者时this的值为undefined。
- 小结
1.普通函数this指向我们怎么记忆? | 【谁调用this的值指向谁】 |
---|---|
2.普通函数严格模式下指向谁? | 严格模式下没有调用者时this的值指向undefined |
this指向-箭头函数:
箭头函数中的this与普通函数完全不同,也不受调用方式的影响,事实上箭头函数并不存在this
。
箭头函数会默认帮我们绑定外层this的值,所以在箭头函数中this的值和外层的this是一样的。
箭头函数中的this引用的就是最近作用域中的this。
向外层作用域中,一层一层查找this,直到有this的定义。
- 注意情况1:
在开发中【使用箭头函数前需要考虑函数中this的值】
,事件回调函数使用箭头函数时,this为全局的window。因此DOM事件回调函数如果里面需要DOM对象的this,则不推荐使用箭头函数。
- 注意情况2:
同样由于箭头函数this的原因,基于原型的面向对象也不推荐采用箭头函数。
- 小结
1.函数内不存在this,沿用上一级的 | 过程:向外层作用域中,一层一层查找this,直到有this的定义 |
---|---|
2.不适用 | 构造函数,原型函数,字面量对象中函数,dom事件函数等等 |
3.适用 | 需要使用上层this的地方 |
4.使用正确的话,它会在很多地方带来方便,后面我们会大量使用慢慢体会 | - |
改变this方法:
JavaScript中还允许指定函数中this的指向,有3个方法可以动态指定普通函数中this的指向。
call( )-了解
:
使用call方法调用函数,同时指定被调用函数中this的值。
语法:
fn.call(thisArg, arg1, arg2,...)
thisArg | 在fun函数运行时指定的this值 |
---|---|
arg1, arg2 | 传递的其他参数 |
返回值就是函数的返回值,因为它就是调用函数 | - |
<title>call方法</title>
</head>
<body>
<script>
const obj = {
uname: 'pink'
}
function fn(x, y) {
console.log(this) // window
console.log(x + y)
}
// 1. 调用函数
// 2. 改变 this 指向
fn.call(obj, 1, 2)
</script>
</body>
apply()-了解
:
使用apply方法调用函数,同时指定被调用函数中this的值。
语法:
fn.apply(thisArg, [argsArray])
thisArg | 在fun函数运行时指定的this值 |
---|---|
argsArray | 传递的值,必须包含在数组 里面 |
返回值就是函数的返回值,因为它就是调用函数 | - |
因此apply主要跟数组有关 | 比如使用Math.max() 求数组的最大值 |
<title>apply()方法</title>
</head>
<body>
<script>
const obj = {
age: 18
}
function fn(x, y) {
console.log(this) // {age: 18}
console.log(x + y)
}
// 1. 调用函数
// 2. 改变this指向
// fn.apply(this指向谁, 数组参数)
fn.apply(obj, [1, 2])
// 3. 返回值 本身就是在调用函数,所以返回值就是函数的返回值
// 1.使用场景: 求数组最大值
// const max = Math.max(1, 2, 3)
// console.log(max)
const arr = [100, 44, 77]
const max = Math.max.apply(Math, arr)
const min = Math.min.apply(null, arr) //利用apply
console.log(max, min)
// 2.使用场景: 求数组最大值
console.log(Math.max(...arr)) //利用展开运算符
</script>
</body>
bind()-重点
:
bind()方法不会调用函数,但是能改变函数内部this指向。
语法:
fn.bind(thisArg,arg1, arg2,...)
thisArg | 在fun函数运行时指定的this值 |
---|---|
arg1, arg2 | 传递的其他参数 |
返回由指定的this值和初始化参数改造的原函数拷贝(新函数) | - |
因此当我们只是想要改变this指向,并且不想调用这个函数的时候,可以改变定时器内部的this指向 | - |
<title>bind()方法</title>
</head>
<body>
<button>发送短信</button>
<script>
const obj = {
age: 18
}
function fn() {
console.log(this)
}
// 1. bind 不会调用函数
// 2. 能改变this指向
// 3. 返回值是个函数, 但是这个函数里面的this是更改过的obj
const fun = fn.bind(obj)
// console.log(fun)
fun()
// 需求,有一个按钮,点击里面就禁用,2秒钟之后开启
document.querySelector('button').addEventListener('click', function () {
// 禁用按钮
this.disabled = true
window.setTimeout(function () {
// 在这个普通函数里面,我们要this由原来的window 改为 btn
this.disabled = false
}.bind(this), 2000) // 这里的this 和 btn 一样
})
</script>
</body>
- 小结
相同点 | 都可以改变函数内部的this指向 |
---|---|
区别点 | 1.call和apply会调用函数,并且改变函数内部this指向。2. call和apply传递的参数不一样,call传递参数arul,aeu2…形式;apply必须数组形式[arg]。3.bind不会调用函数,可以改变函数内部this指向。 |
主要应用场景 | 1.call调用函数并且可以传递参数。2.apply经常跟数组有关系,比如借助于数学对象实现数组最大值最小值。3.bind不调用函数,但是还想改变this指向,比如改变定时器内部的this指向。 |