随着函数使用场合的不同，this的值会发生变化。但是有一个原则，那就是this指的是，调用函数的那个对象

1.作为函数调用

在函数被直接调用时this绑定到全局对象。在浏览器中，window 就是该全局对象

console.log(this);

function fn1(){
    console.log(this);
}

fn1(); //window

内部函数

函数嵌套产生的内部函数的this不是其父函数，仍然是全局变量

function fn0(){
    function fn(){
        console.log(this);
    }
    fn();
}
fn0();   //window

setTimeout、setInterval

这两个方法执行的函数this也是全局对象

document.addEventListener('click', function(e){
    console.log(this); 
    setTimeout(function(){
        console.log(this);   //window
    }, 200);
}, false);

注意 strict mode下，作为函数调用 this 就是 undefined

2 作为构造函数调用

• 所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象
• new 运算符接受一个函数 F 及其参数：new F(arguments...)。
• 这一过程分为三步：

（1）创建类的实例。这步是把一个空的对象的 proto 属性设置为 F.prototype 。

（2）初始化实例。函数 F 被传入参数并调用，关键字 this 被设定为该实例。

（3）返回实例。

范例

function Person(name){
    this.name = name;
}
Person.prototype.printName = function(){
    console.log(this.name);
};

var p1 = new Person('Byron');
var p2 = new Person('Casper');
var p3 = new Person('Vincent');

p1.printName();  \\Byron
p2.printName();  \\Casper
p3.printName();  \\Vincent

3 .作为对象方法调用

在 JavaScript 中，函数也是对象，因此函数可以作为一个对象的属性，此时该函数被称为该对象的方法，在使用这种调用方式时，this 被自然绑定到该对象

var obj1 = {
    name: 'Byron',
    fn : function(){
        console.log(this);  
    }
};
obj1.fn();  \\obj1

注意

var obj1 = {
    name: 'Byron',
    fn : function(){
        console.log(this); 
    }
};
var fn2 = obj1.fn;
fn2();   \\window

4 DOM对象绑定事件

在事件处理程序中this代表事件源DOM对象（低版本IE有bug，指向了window）

document.addEventListener('click', function(e){
    console.log(this);
    var _document = this;
    setTimeout(function(){
        console.log(this);
        console.log(_document);
    }, 200);
}, false);

jQuery Event Handler 中的 this

当jQuery的调用处理程序时，this关键字指向的是当前正在执行事件的元素。对于直接事件而言，this 代表绑定事件的元素。对于代理事件而言，this 则代表了与 selector 相匹配的元素。

$ul.on('click', 'li' , function(){
  console.log(this)
})

5 () => console.log(this) 箭头函数不改变this