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 lang="en">
<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); //<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
*/
</script>
复制代码文章底部扫码，免费领取前端资料大礼包！
apply调用
●作用：改变函数内部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
*/
</script>
复制代码bind调用
●作用：改变函数内部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>
如果上面的文章看着比较枯燥，点击下面的链接直接观看：
千锋教育JavaScript全套视频教程（10天学会Js，前端javascript入门必备）
也可以扫码直接观看视频哦！绝对的干货满满，更多精彩视频B站搜索“千锋教育”
