this 是 JavaScript 最容易迷糊的知识点，不同的应用场合 this 的取值可能会有意想不到的结果，在此我们对以往学习过的关于【 this 默认的取值】情况进行归纳和总结。
普通函数
普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】，如下代码所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <script>
function sayHi() {
console.log(this)
}
const sayHello = function () {
console.log(this)
}
sayHi()
window.sayHi()
const user = {
name: '小明',
walk: function () {
console.log(this)
}
}
user.sayHi = sayHi
uesr.sayHello = sayHello
user.sayHi()
user.sayHello()
</script>
|
注： 普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined。
箭头函数
箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <script>
console.log(this)
const sayHi = function() {
console.log(this)
}
const user = {
name: '小明',
walk: () => {
console.log(this)
},
sleep: function () {
let str = 'hello'
console.log(this)
let fn = () => {
console.log(str)
console.log(this)
}
fn();
}
}
user.sayHi = sayHi
user.sayHi()
user.sleep()
user.walk()
</script>
|
在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此DOM事件回调函数不推荐使用箭头函数，如下代码所示：
1
2
3
4
5
6
7
8
9
10
11
12
| <script>
const btn = document.querySelector('.btn')
btn.addEventListener('click', () => {
console.log(this)
})
btn.addEventListener('click', function () {
console.log(this)
})
</script>
|
同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数，如下代码所示：
1
2
3
4
5
6
7
8
9
10
11
| <script>
function Person() {
}
Person.prototype.walk = () => {
console.log('人都要走路...')
console.log(this);
}
const p1 = new Person()
p1.walk()
</script>
|
改变this指向
以上归纳了普通函数和箭头函数中关于 this 默认值的情形，不仅如此 JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向：
call
使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <script>
function sayHi() {
console.log(this);
}
let user = {
name: '小明',
age: 18
}
let student = {
name: '小红',
age: 16
}
sayHi.call(user);
sayHi.call(student);
function counter(x, y) {
return x + y;
}
let result = counter.call(null, 5, 10);
console.log(result);
</script>
|
apply
使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <script>
function sayHi() {
console.log(this)
}
let user = {
name: '小明',
age: 18
}
let student = {
name: '小红',
age: 16
}
sayHi.apply(user)
sayHi.apply(student)
function counter(x, y) {
return x + y
}
let result = counter.apply(null, [5, 10])
console.log(result)
</script>
|
总结：
apply 方法能够在调用函数的同时指定 this 的值- 使用
apply 方法调用函数时，第1个参数为 this 指定的值
apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数
bind
bind 方法并不会调用函数，而是创建一个指定了 this 值的新函数，使用方法如下代码所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script>
function sayHi() {
console.log(this)
}
let user = {
name: '小明',
age: 18
}
let sayHello = sayHi.bind(user);
sayHello()
</script>
|
注：bind 方法创建新的函数，与原函数的唯一的变化是改变了 this 的值，使用场景是修改定时器内this的指向。
比如，点击一个按钮这个按钮就禁用，2s后重新开启。
1
2
3
4
5
6
7
8
9
| const fun =fn.bind(obj)
fun()
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
this.disabled=true;
window.setTimeout(function(){
this.disabled=false //如果不改变，this指向的是window，可以改完箭头函数或者使用bind函数
}.bind(btn),2000)
})
|
