30分钟让前端学会this(纽约的老郑原创)

那么，什么是this? 我一下子回到了上初中的时候：

问：who is that ?
答：This is Tom speaking

在英语里面，this是一个代词，用来指叙述中的人或事物，即指前面提到过的人或事物或下文提及的事物。
OK，如果你的棒(zha)棒(zha)的英语能理解到这个份上，我还能说啥，点击右上角那个像X一样的叉叉，慢走，不送。
一个东西我们如果在不知道是啥的时候说再多的废话也是徒劳，我们还是直接看代码吧：

var obj={
    a:1,
    getA:function(){
        console.log(this==obj);
        console.log(this.a);
    }
};

obj.getA();

上面的代码我们直接的看，OK，有一个对象叫obj,调用了这个对象的一个方法叫getA，好的，看getA方法里面，赤裸裸的有一个关键词叫get有没有，这个this是啥意思呢？
听好了，this法则第一条：

对长得像这样的：

XXX.fn();

这个fn的作用域环境里面如果你用上了this,这个this指的就是这个XXX。

OK，于是，有人就问了，teacher,请问下面这个时候,this代表的为啥是window？

var fn = function(){
    console.log(this);
}

这个嘛，我想用下面的一行代码来回敬这位同学：

window.fn === fn

OK，我们了解了this了，慢着，这只是大部分情况下this的用法，this也有一些特殊情况我们需要了解的，我们只有掌握了这些特殊情况才可以算真正的掌握了this。

我们复习一下对象的创建方式，我们知道，对象有二种创建方式，谁说下有哪二种方式创建？（停顿一会儿）

var obj = {};//字面量

var obj = new Object();

是的，对象可以用字面量来创建，当然，有一种不常用但是确实也可以用的是用构造函数的方式来创建，那我们就来看一下，在构造函数里这个this是怎么一个意思，首先我来写一个这样的构造函数：

var Klass = function(){
    this.name = "moyu-edu.com";
}

OK,我们来用一下：

var xiaoMo = new Klass();

这个工作原理是怎么样子的呢？
其实是这样的：把这个构造函数里面的this指向的即将创建出来的这个对象。
那我们现在知道了，其实当一个构造函数在执行的时候，里面的this指向的就不再是window了，而是这个将要创建出来的对象了。

这是一个特殊的地方大家要记住，还有一个特殊的地方要说明一点：

函数内部的函数里的this指向的是window。

为了验证这句话，我们来写一些代码：

var obj = {
    fn:function(){
        function fn1(){
            console.log(this);
        }
        fn1();
    }
}
obj.fn();

setTimeout(function(){
    function fn(){
        console.log(this);
    }
},1000);

<style>
    #demo{
        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>
<div id="demo"></div>
<script>
document.addEventListener("DOMContentLoaded",function(){
    var oDiv = document.getElementById("demo");
    oDiv.onclick = function(){
        console.log(this);
        function fn(){
            console.log(this);
        }
        fn();
    }
},false);
</script>

OK，30分钟到了，新技能get!!!