前言
今天谈一谈JavaScript中各种情况下this的指向问题，以及怎么改变this的指向。
一、this指向
1、各种情况下的this指向
- 以函数形式调用时，this 永远都是 window
- 以方法的形式调用时，this 是调用方法的对象
- 通过构造函数创建实例对象的时候，this永远指向创建的实例对象
- 严格模式下，普通函数this指向为undefined
- 箭头函数：箭头函数没有this，如果非说有this的话，那么它的this指向所在作用域的this
2、代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=`, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 以函数形式调用
function f1(){
console.log('函数形式调用this指向',this)
}
f1()
// 方法形式调用
let cat = {
name:'咪咪',
age:2,
say:function(){
console.log('方法形式调用this指向',this)
console.log(this.name + '喵呜~')
}
}
cat.say()
// 构造函数
function Person(){
this.name = "leo"
this.age = 23
console.log('构造函数中this指向',this)
}
let man = new Person()
// 箭头函数
let dog = {
name:'小乐',
age:3,
say:function(){
setTimeout(() => {
// 定时器不使用箭头函数写法时，this指向window
// 定时器使用箭头函数写法时，this指向箭头函数所在作用域的this
console.log('箭头函数中的this指向',this)
console.log(this.name + '汪汪')
}, 1000);
}
}
dog.say()
</script>
</body>
</html>
3、结果展示
二、改变this指向
1.方法
call()
代码如下（示例）：
function obj(a,b){
console.log(this,a,b)
}
let a = {name: "leo",age: 23}
obj.call(a,1,2)
apply()
代码如下（示例）：
function obj(a,b){
console.log(this,a,b)
}
let a = {name: "leo",age: 23}
obj.apply(a,[1,2])
bind()
代码如下（示例）：
function obj(a,b){
console.log(this,a,b)
}
let a = {name: "leo",age: 23}
obj.bind(a,1,2)()
2、相同点
三种方法都可以改变this的指向
第一个参数都是this指向的对象
3、区别
- 函数执行 call和apply:都会使函数执行 bind：不会使函数执行，会返回一个改变了this指向的函数，所以加上（）调用
- 传递参数 apply:第二个参数只能是一个数组，函数有几个形参就向数组中传几个实参 call和bind:函数有几个形参，就继续从第二个参数往后写
总结
觉得有用的话，记得点赞收藏哟~
