那么,什么是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!!!