带给我this的烦恼

this的第一次接触是做一个父容器事件代理的DEMO，当时还不会jquery；

<ul class="ct">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>
var ct=document.querySelector('.ct');
ct.addEventListener('click',function(e){
    console.log(e.target.innerText);
});

第一次接触this,感觉这个太厉害了，就是谁调用就是谁；后来遇到这样一个DEMO

function foo(){
    console.log(this);
    function foo2(){
        console.log(this);
    }
    foo2();
}
foo();

我以为第一个结果是window，第二个结果是foo2，结果控制台的输入狠狠的打脸了!

输出结果

当时我就懵逼了，因为从"元素之力"的世界来，"零一世界"的运作原理还知之甚少，后来经过别人点拨，这个是由于堆栈，是计算机的一个原理；

后来我想想，应该是我在全局环境下调用了foo()，然后window将整个foo()给推入了堆栈，第一个输出为window理所应当，那么foo(2)也是被window给推进堆栈的，"幕后黑手"也是window，这样应该就解释了，这个demo中第二个输出的结果还是window，虽然是函数内部嵌套函数，但this依旧指向了window；

手贱的我又看到了call和apply，这种切换this的手段

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

obj1.fn();

var fn2 = obj1.fn;
fn2();

fn2.call(obj1);

为什么会这样呢？

• 第一个：obj.fn()是obj去调用fn的，当然第一个是他，这个没有什么异议；
• 第二个陷阱就来了，在全局环境下声明fn2=obj.fn；再去执行fn2，这个时候相当于再全局环境下执行

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

一开始，我也犯了迷糊，明明fn在obj之内，怎么又指向全局了，后来我想明白了，这只是一个赋值，让fn2拥有这个函数罢了，相当于obj是一个银行，fn就是100快，现在银行外面的fn2从银行取出一个100快，总不能因为都是100快，就说fn2的钱还是银行的吧；

• 第三个：用call切换了，函数的作用域，打到了切换this的指向，本来fn2的作用域是全局，this是指向window的，结果被call切换到了obj里面，自然把黑锅又给了obj，那么这个this就指向了obj，最后输出也是obj，而不是window；