this的使用

JS中this调用有几种情况

一：纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。

var x = 1
function test(){
　alert(this.x);
}
test(); // 1

var x = 2;
var obj = {
    x: 1,
    test: function() {
        alert(this.x);
    }
}
var copy = obj.test;
copy() // 2

var obj = {
    test: function () {
        console.log(this); // obj
        var inner = function () {
            console.log(this);
        }
        inner()  //  window
    }
}
obj.test()

从第二个例子看出来对象中的方法如果通过复制的情况，其实就是把这个函数的指针传递了出去，所以这种情况this不再指向本身的对象。从第三个例子看出来我们如果想避免这种对象方法里还有函数的this指向不正确的情况可以通过var that = this来避免。

二：作为对象方法的调用

var x = 2;
var obj = {
    x: 1,
    test: function() {
        alert(this.x);
    }
}
obj.test(); // 1

函数也是对象所以

var bar = function () {
}
bar.fn = function () {
      this // 指向bar函数
}

三 ：作为构造函数调用

首先我们知道构造函数的new过程具体发生了什么，所以this指向新创建出来的对象。

四：apply， call，bind

三中的构造函数的this为何会指向新的对象，主要原因还是源于apply的实现。

针对this指向我们看下列的题目

var boss1 = { 
  name: 'boss1', 
  returnThis () { return this }
}
var boss2 = { 
  name: 'boss2', 
  returnThis () { return boss1.returnThis() }
}
var boss3 = { 
  name: 'boss3', 
  returnThis () { 
    var returnThis = boss1.returnThis 
    return returnThis() 
  }
}
boss1.returnThis() // boss1
boss2.returnThis() // ?
boss3.returnThis() // ?

答案是boss1和window。
在boss2.returnThis里，使用this的函数是boss1.returnThis，所以this绑定到boss1；
在boss3.returnThis里，var returnThis = boss1.returnThis变成了纯粹的函数调用，所以this绑定到window。
要想把this绑定到boss2怎么做呢？

var boss2 = { 
    name: 'boss2',
    returnThis: boss1.returnThis
}
boss2.returnThis() //boss2

这样子为什么可以绑定到boss2上呢？因为这里的boss1.returnThis并没有调用，只是传递了下值。

五 箭头函数中的this

箭头函数的this是根据外层（函数或者全局）作用域来决定this，箭头函数会捕捉调用父函数时候父函数的this

我之前分析过一篇箭头函数的this

补充 事件中的this

事件处理中的this

1. attachEvent的this总是Window
2. 脚本设置onclick方式的事件绑定， this总是指向被设置的DOM元素

document
  .getElementById('l1')
  .onclick = function(){
    console.log(this);
  };

3. HTML中设置onclick方式的事件绑定

  <p id="click" onclick="console.log(this)">点我</p> // 指向当前的DOM元素p
  <p id="click2" onclick="test()">点我</p>  // 指向windown
  function test() {
    console.log(this)
  }

addEventListener 中的this

4. addEventListener方式的事件绑定的this总是当前绑定事件的那个DOM对象。