# 绑定规则
# 默认绑定
当函数没有被对象限定时，此时函数会被默认绑定在 window 上
1
2
3
4
5
6
7
8
| function a() {
console.log(this)
b()
}
function b() {
console.log(this)
}
a()
|
输出结果 window window
# 隐式绑定
使用对象进行限定函数的调用，此时函数会被绑定在调用函数的对象上
1
2
3
4
5
6
7
8
| const name = 'a'
const a = {
name: 'b',
fun: function() {
console.log(this.name)
}
}
a.fun()
|
输出结果 b ，说明此时函数中的 this 为 a 这个对象
# 显式绑定
使用 call 、 apply 或 bind 对 this 指向进行明确改变，或使用赋值语句将函数的引用赋值到另一个对象中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const a = {
name: 'a',
fun: function() {
console.log(this.name)
}
}
const b = {
name: 'b',
fun: function() {
console.this(this.name)
}
}
a.fun = b.fun
a.fun()
a.fun.call(b)
|
输出结果为 a b
# new 绑定
使用构造函数新建一个对象时，在构造函数中，this 指向正在新建的这个对象
1
2
3
4
5
6
| function a() {
this.name = 'a'
console.log(this)
}
a()
new a()
|
输出结果为 window a
# setTimout 等内置函数
若非箭头函数则均为 window，若为箭头函数则为上一层的 this。
1
2
3
4
5
6
7
8
9
10
11
| setTimeout(function() {
console.log(this)
})
const a = {
b() {
setTimeout(function() {
console.log(this)
})
}
}
a.b()
|
输出结果为 window window
# DOM 元素触发的事件
由 DOM 元素触发的事件中的 this 指向为 DOM 元素本身
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a</title>
</head>
<body>
<button id="a">按钮A</button>
<button onclick="console.log(this)">按钮B</button>
<button onclick="callclick()">按钮C</button>
</body>
<script>
const a = document.querySelector('#a')
a.onclick = function ()
{
console.log(this)
}
function callclick() {
console.log(this)
}
</script>
</html>
|
输出 button button window
# 箭头函数
箭头函数的指向为上一级的 this 指向，若上一级仍为箭头函数则继续向上寻找
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| let obj = {
aaa(){
console.log(this)
setTimeout(function(){
console.log(this)
setTimeout(function(){
console.log(this)
})
setTimeout(()=>{
console.log(this)
})
})
setTimeout(()=>{
console.log(this)
setTimeout(()=>{
console.log(this)
})
})
}
}
obj.aaa()
const a = obj.aaa()
a()
|
输出结果为 obj window window window obj obj
window window window window window window
# 代码实例 A
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| var name = "window";
var person = {
name: "person",
sayName: function () {
console.log(this.name);
}
};
function sayName() {
var sss = person.sayName;
sss();
person.sayName();
(person.sayName)();
(b = person.sayName)();
}
sayName();
|
输出结果为： window person person window
# 解释
# 代码实例 B
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
32
33
34
35
| var name = 'window'
var person1 = {
name: 'person1',
foo1: function () {
console.log(this.name)
},
foo2: () => console.log(this.name),
foo3: function () {
return function () {
console.log(this.name)
}
},
foo4: function () {
return () => {
console.log(this.name)
}
}
}
var person2 = { name: 'person2' }
person1.foo1();
person1.foo1.call(person2);
person1.foo2();
person1.foo2.call(person2);
person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);
person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);
|
输出结果为： person1 person2 window window window window person2 person1 person2 person1
# 解释
# 参考资源
- https://blog.csdn.net/m0_71485750/article/details/125192696
