JavaScript 中的this代表的是当前行为执行的主体,在 JavaScript 中主要研究的都是函数中的this,但并不是说只有在函数里才有thisthis实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用

1. 函数调用

函数执行时首先看函数名前面是否有.,若有,.前面是谁,this就是谁。没有的话this就是window

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
function fn() {
console.log(this);
}

let obj = { fn: fn };

fn(); // this -> window
obj.fn(); // this -> obj

function sum() {
fn();
}

sum(); // this -> window

let obj2 = {
sum: function () {
console.log(this);
fn();
},
};

obj2.sum();
// sum中的this -> obj2
// sum中fn中的this -> window

2. 自执行函数

自执行函数中的this永远是window

1
2
3
4
5
6
(function () {
console.log(this); //this -> window
})();
~(function () {
console.log(this); //this -> window
})();

3. 事件绑定

  • DOM 零级事件绑定
1
2
3
oDiv.onclick = function () {
// this -> oDiv
};
  • DOM 二级事件绑定
1
2
3
4
5
6
7
oDiv.addEventListener(
'click',
function () {
// this -> oDiv
},
false
);
  • IE6~8下使用attachEvent,默认的this就是指的window对象
1
2
3
oDiv.attachEvent('click', function () {
// this -> window
});

4. 构造函数

在构造函数模式中,类中(函数体中)出现的this.xxx=xxx中的this是当前类的一个实例。

1
2
3
4
5
6
7
8
9
function Person(name, age) {
this.name = name;
this.age = age;
this.do = function () {
console.log(this);
};
}
var p1 = new Person('Jack', 18);
p1.do(); // this -> p1实例对象

类中某一个属性值(方法),方法中的this需要看方法执行的时候,前面是否有.,才能知道this是谁。

1
2
3
4
5
6
7
8
9
10
function Fn() {
this.x = 100;
this.getX = function () {
console.log(this.x);
};
}
let f1 = new Fn();
f1.getX(); // this -> 100
let ss = f1.getX;
ss(); // this -> undefined

5. call、apply和bind

详情请点击:JavaScript改变函数内部this指向

6. 箭头函数

(1)箭头函数不绑定this

箭头函数的this看外层的是否有函数,如果有,外层函数的this就是内部箭头函数的this。如果没有,则thiswindow

1
2
3
4
5
6
7
8
9
10
11
let btn1 = document.getElementById('btn1');
let obj = {
name: 'kobe',
age: 39,
getName: function () {
btn1.onclick = () => {
console.log(this); // this -> obj
};
},
};
obj.getName();

(2)若上一层并不存在函数,this指向又是谁?

1
2
3
4
5
6
7
8
9
10
11
let btn2 = document.getElementById('btn2');
let obj = {
name: 'kobe',
age: 39,
getName: () => {
btn2.onclick = () => {
console.log(this); // this -> window
};
},
};
obj.getName();

上例中,虽然存在两个箭头函数,其实this取决于最外层的箭头函数,由于obj是个对象而非函数,所以this指向为window

(3)用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略

1
2
3
4
5
6
7
8
let obj = {
birth: 1990,
getAge: function (year) {
let fn = year => year - this.birth; // this.birth -> 1990
return fn.call({ birth: 2000 }, year); // 第一个参数被忽略,this.birth -> 1990
},
};
console.log(obj.getAge(2018)); // 28