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);

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

你可能感兴趣的:(30分钟让前端学会this(纽约的老郑原创))