# 浅谈this指向
# 概念
js的关键字，在执行上下文环境时被绑定
# 绑定规则
默认绑定、隐式绑定、apply,call、new绑定。优先级从低到高
# 默认绑定
console.log(this); //window
function fun() {
console.log(this.a) // 非严格模式下1 ，严格模式下undefined
}
var a = 1;
fun();
1
2
3
4
5
6
2
3
4
5
6
# 隐式调用
作为对象方法调用，this 指代上下文对象
function fun() {
console.log( this.a );
}
var a = 1;
var obj = {
a: 2,
fun: fun
};
obj.fun(); // 2
var c = obj.fun;
console.log(c()); // 1
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# apply,call
改变对象的prototype关联对象来改变this,对于null，undefined绑定会失效
function fun() {
console.log( this.a );
}
var a = 1;
var obj1 = {
a: 2,
};
var obj2 = {
a: 3,
};
fun.call( obj1 ); // 2
fun.call( obj2 ); // 3
fun.call( null ); // 1
fun.call( undefined ); // 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 作为构造函数调用
this 指代new 出的对象 使用new来调用函数，会自动执行如下操作：
- 创建一个全新的对象。
- 这个新对象会被执行[[原型]]连接。
- 这个新对象会绑定到函数调用的this。
- 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
function fun(a) {
this.a = a;
}
var a = 1;
var obj = new fun(3);
console.log(obj.a); // 3
var obj1 = new fun(4);
console.log(obj1.a); // 4
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# es6中箭头函数this指向
取决于外层（函数或全局）作用域。
# 致谢
感谢大家阅读我的文章，如果对我感兴趣可以点击页面右上角，帮我点个star。
作者：任博
链接： https://www.studyfe.cn/2019/03/05/javascript/this/
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。