web前端

JavaScript中this的存在为我们写代码提供了非常多的帮助，但是在具体使用的时候this的具体指向会变得各不相同，在本篇文章中，我们将详细讨论this的指向机制。

首先我们要明确一个概念，this既不是指向当前函数，也不是某个固定的对象，而是函数在执行时的环境对象。也就是是说，函数内this的指向只和函数是如何被调用的有关，和函数的定义方式以及位置等没有必然的联系。

1. 最普通的函数调用

上述案例中，我们可以认为全局函数demo是顶层对象window的方法，所以可以认为是window在调用demo函数，所以其中的this指向的是window对象。

1. function demo(){
2. console.log(this);
3. }
4. demo();

2. 对象方法中的this

在上面这个案例中，执行的虽然也是demo函数，但是在我们是通过obj对象对demo函数的引用访问到demo函数的，所以可以认为是obj对象在调用函数demo,函数内this的this就要指向obj对象。

1. function demo(){
2. console.log(this);
3. }
4. var obj = {
5. foo:demo
6. }
7. obj.foo();

3. 定时器中的this

在第一个定时器中，通过定时器执行函数demo时，可以依然认为demo是全局对象window的方法，所以是window对象在调用demo函数，所以this依然指向window。而第二个定时器中是一个匿名函数，一般匿名函数的执行具有全局性，也就是可以认为匿名函数是是在全局环境中被调用的，那么该定时器函数内的this就指向了全局环境对象window。

1. function demo(){
2. console.log(this);
3. }
4. setTimeout(demo,1000);
5. setTimeout(function(){
6. console.log(this);
7. },2000);

4. 事件绑定中的this

事件处理函数中的this，无论是绑定的是命名函数还是匿名函数，都可以认为是元素引用的一个方法，虽然这种函数的调用具有其隐蔽性，但是我们还是应该视为其执行环境是元素引用，所以this指向触发事件(调用方法)的元素。而addEventListener 方法中的事件函数默认是作为调用addEventListener对象的方法,所以同样触发事件的元素。

1. oBox.onclick = function(){
2. console.log(this);
3. }
4. // oBox.onclick();
5. oBox.addEventListener("click",function(){
6. console.log(this)
7. });

5. 闭包中的函数

在上述案例中，我们虽然是通过调用obj对象的foo方法获取了匿名函数，但是由于匿名函数的执行具有的全局性，而这时并没有出现实际的其他调用者，所以函数内的this指向全局对象window。当然这只是一个常见的案例，this的指向具体情况还是要结合实际调用者具体分析。

1. var obj = {
2. foo:function(){
3. return function(){
4. console.log(this);
5. }
6. }
7. }
8. obj.foo()();

6. new 操作符调用函数

new 操作符调用函数内的this是一个恒定值，指向的是函数执行前创建的对象。

1. function CreateStu(){
2. console.log(this);
3. }
4. new CreateStu();

7. 其他的this

call和apply方法(作用相同，参数不同)都可以强制改变this的指向，可以将函数执行时的this指向方法的第一个参数。

1. var obj1 = {
2. foo:function(){
3. console.log(this);
4. }
5. }
6. var obj2 = {}
7. obj1.foo.call(obj2);